How to Create and Hosting Static Website with AWS

S3 is one of the oldest and most popular services provided by AWS with high availability, durability, security, and scalability. S3 can be used to store a backup of the database, Big Data Analytics, media, and much more. It provides an object storage mechanism with an abstraction of Buckets, folders, and files. The abstraction is what makes S3 easy to use.

With S3 (a storage mechanism), there is no need to perform the capacity planning and to specify the initial capacity. As we put more data and delete data, S3 will shrink and expand automatically. S3 provides different storage classes to store different types of data (old/new, frequently/infrequently accessed) and the data can be moved from one storage class to another using S3 Object Life Cycle Management. Or else use the AWS S3 Intelligent Tiering to let AWS decide when to move the data from one storage class to another. AWS CloudFront which is a CDN (Content Distribution Network) can optionally be used to make the website load faster to the end-user.

S3 with the free tier provides 5GB of storage, 20,000 Get Requests, 2,000 Put Requests for free every month for the first year and beyond at on a pay-on-usage model. In this article, we would be creating a static website on S3.

Hosting Static Website with AWS S3

Here is the full tutorial video based on "How to Create and Host a static website in Amazon S3" and S3 C.O.R.S. 👇👇

Step 1: Creating Bucket in S3

- Go to the S3 Management Console and click on “Create Bucket”

- Enter the Bucket name. Note that the Bucket name should be unique. Add something at the end to get a unique Bucket name. Select the Region where the data must be stored. Click on Create and the Bucket should be created as shown below. A Bucket is a container for storing folders and files.

Step 2: Giving the public permissions to the S3 Bucket

- Any folder/file in the Bucket would only be visible to the owner who created it. For a website, the Bucket should be given public access for the rest of the world to access it as a webpage. Click on the Properties tab, make sure the “Block public access” is selected, and click on the Edit button. Unselect “Block all public access” and click on Save. Type the word confirm and click on the “Confirm” button.

This step doesn’t give the public permission to the S3 Bucket but will allow us to make the Bucket and its content public later in the next step. AWS has introduced these additional steps and hoops, as there had been a good number of incidents where sensitive data has been put in the S3 Bucket and without the proper settings it was made public for everyone to access the sensitive data.

- Now is the time to make the Bucket public. Click on the “Bucket Policy” and enter the below policy, make sure to change the Bucket name to what was created in Step 1. Click on Save to make the Bucket public. Note that AWS will let us know three times that the Bucket has been made public, just to make sure that we don’t make in public accidentally.

1 2 3 4 5 6 7 8 9 10

{ "Version":"2012-10-17", "Statement":[{ "Sid":"PublicReadGetObject", "Effect":"Allow", "Principal": "*", "Action":["s3:GetObject"], "Resource":["arn:aws:s3:::my-pictures-website/*"] }] }

Step 3: Enabling Static website hosting and uploading the website to S3

- Now is the time to enable “Static website hosting” for S3. Notice that by default, it is disabled. Click on the card and select “Use this Bucket to host a website”. Enter the Index document as index.html and the Error document as error.html. Make sure to note down the Endpoint, this is the URL used to access the S3 website. Click on Save.

Note that the “Static website hosting” would be enabled by now. The Index document is the default HTML to be displayed and the Error document is the HTML to be displayed when the HTML page which we are trying to access is not there in S3.

- Now is the time to upload the index.html and error.html. Go to the Overview tab and click on Upload. Click on “Add Files” and then Upload. The same steps must be repeated for index.html and the error.html pages.

- Here is the content of index.html and error.html.

Step 4: Access the webpage hosted in S3

- Open the URL got from “Step 5” to get the index.html displayed. To the end of the URL, anything besides the index.html and the error page would be displayed. The URL is not user-friendly, a user-friendly URL can be created using AWS Route53.

I HOPE YOU ALL ARE CLEAR WITH THIS, 

IF YOU ARE FACING ANY PROBLEM THEN YOU CAN TAKE HELP OF ABOVE VIDEO.

▬▬▬▬▬▬ WANT TO LEARN MORE? ▬▬▬▬▬▬

Full Terraform tutorial ► https://bit.ly/2GwK8V2 DevOps Tools, like Ansible ► https://bit.ly/3iASHuP Docker Tutorial ► https://bit.ly/3iAT9Jx AWS Tutorial ► https://bit.ly/30GFv1q GCP Tutorial ► https://bit.ly/3mwh412 Jenkins Tutorials ► https://bit.ly/3iHnfv4 Jenkins Pipeline ► https://bit.ly/30CJGLB Python ► https://bit.ly/3I7bewU Python in just 1 video ► https://bit.ly/3EeqGVy