How to host a Static Website in AWS S3

How to host a Static Website in AWS S3

Hello All! Welcome back to the third article in the AWS Series! As we already know, AWS S3 offers low cost, high performance, highly scalable, unlimited cloud storage with a pay-as-you-go approach. But, apart from being a storage option, it can also be used to host static web content. In this article, we will discuss how to host a static website in AWS S3. 

Below is the overview of the steps for doing that:

Creating a bucket

Step1: First let’s create a bucket. For that, let’s first login to AWS console, and then select S3 under ‘Storage’ from the AWS ‘Console Home’. 

select S3
select S3

Step2: Next, from the S3 console, let’s click on the ‘Create Bucket’ icon in the Amazon S3 console.

Creating New Bucket
Creating New Bucket

A pop up window appears wherein we enter the bucket details. Here, let’s consider the bucket name as ‘codebabel-static-website-demo and the region can be according to the requirement. Here we have chosen the default region ‘US EAST ohio’. Let’s leave everything to default settings by clicking on “Next” option. In the ‘review’ page, let’s review our configurations and click on ‘Create bucket’ to create the S3 bucket.

Create New S3 Bucket
Create New S3 Bucket

We can see the newly created S3 bucket in the AWS S3 console.

Bucket after creation
Created Bucket can be viewed in S3 Dashboard

Step3: For this demo, we have created a simple static website in HTML. It consists of an index.html file which has two web pages and an error.html file which throws an error message when something goes wrong. We also have some .css files for formatting. Now let’s upload these files in the AWS S3 demo bucket.

For this, let’s click on our S3 bucket and click on the “upload” option under the “overview” icon. We can either add or drag and drop the required files. We can also set permissions for each of the files while uploading by clicking the “Next” icon which we will discuss later in this article. For now, we will only upload the files by clicking “Upload“. Let’s upload all our files this way.

Upload Files
Upload Files

Enabling static website hosting

Step4: Let’s click on our S3 bucket, and go to Properties -> Static website hosting. 

Enabling Static Website Hosting
Enabling Static Website Hosting

We can see the generated endpoint URL to access our static website, as soon as we select this option. Now below that, we will mention the following: “Index document = index.html, error document = error.html“.

Static Website Hosting
Static Website Hosting

Finally, let’s click on “Save” to save our configurations.

Setting permissions using bucket policy

Step5: The endpoint URL is: http://codebabel-static-website-demo.s3-website.us-east-2.amazonaws.com. Now, when we try to access the Static website using the generated endpoint URL, we will get access denied error.

Access Denied Error
Access Denied Error

This is because, AWS by default, blocks public access to all the files that we upload in S3 bucket. It is a security feature in AWS. So in order to access our website, we have two options:

  1. Make all the files public individually by clicking on the file, and changing its permissions to public under “Set permissions” tab
  2. By applying policies to the bucket to give public access to the files in a single shot.

Let’s use the second option for obvious reasons. 🙂

Step6: For applying permissions, let’s click on our bucket, go to “Permissions” tab and click on “Bucket policy” option and copy paste the following in the policy editor and click on “Save”.

Applying Permissions
Applying Permissions

The code can be copy pasted from below. We can also use policy generator provided by AWS to generate different policies based on our requirements. You can refer the documentation for generating policies here.

Testing the static website

Step7: Now that everything is done, let’s test our website. Let’s enter the endpoint URL. And there we go! We can see the home page of our static website.

Static Website Page1
Static Website Page1

We are able to navigate to the second page as well.

Static Website Page2
Static Website Page2

Yup! It’s that easy to host a static webpage in S3 🙂

When something goes wrong while accessing this endpoint URL, AWS S3 automatically  should use the html file that the user mentions in the error document field to throw an error message (In our case that is the error.html file) Now, let’s test if that works as expected as well. For this, let’s type in some random letters in the endpoint URL and when we click enter, we can see that the contents in the error.html file is displayed automatically.

Automatic Redirect of Error Message
Automatic Redirect of Error Message

Conclusion

We have now reached the end of the article. We hope this article was informative on how to host a static website in AWS S3. You can also find more information about hosting static websites in AWS S3 here. You can also find the code used for creating the static website used in this demo here.

Please share your thoughts, questions, and suggestions in the comment section below. Do subscribe to our blog to stay up to date on any new articles.

Copy link
Powered by Social Snap