How to host a static website on an Amazon S3 bucket

What is Amazon S3?

Amazon S3 is a scalable storage service of Amazon. With S3, we can store and retrieve any kind of data from anywhere on the cloud.

Amazon S3 bucket can be used as a server for static websites. We can configure an S3 bucket for static website hosting to store and deliver static web files like HTML, CSS, JavaScript, and images.

Let's learn how to use an S3 bucket as a server.

Create an S3 bucket

We'll start by creating an S3 bucket. Replace <your-bucket-name> with a globally unique name for the bucket in the command given below and then create an S3 bucket using this command given below:

Note: S3 buckets' names must be globally unique.

Enable website hosting

Now that we have our bucket let's enable static website hosting for it. Replace <your-bucket-name> , in the command given below, with the name of the bucket, and then execute this command to enable static website hosting for our bucket:

We can view the contents of these files by using the following commands:

Upload website files to the bucket

Now our bucket is ready to be used as a server with index.html file as the main file for our website and error.html file as the error handling file. Now let’s upload these files to the bucket. Replace <your-bucket-name> , in the command given below, with the name of the bucket, and then execute this command to upload the folder containing our website files to the bucket:

Website in the above command refers to a pre-built folder that contains index.html and error.html files.

Make the website publicly accessible

Our S3 bucket is hosting the website, but it is not publicly accessible yet. To make it publically accessible, we’ll have to attach a resource-based policyResource-based policy is a JSON document that specifies the access that an entity has to the specified resources. with it that allows everyone to read the files stored in the bucket. To do that, let’s start with creating the policy file by using this command. Replace <your-bucket-name>, in the command given below, with the name of the bucket, and then execute this command:

This policy will provide everyone the read access to all the files in our bucket.

By default, we are not allowed to add a policy to the bucket; let’s modify that permission first. To do that, replace <your-bucket-name> , in the command given below, with the name of the bucket, and then execute this command:

Now add the resource-based policy we created earlier to the bucket. Replace <your-bucket-name> , in the command given below, with the name of the bucket, and then execute this command to add the bucket policy:

Our website is now live and publically accessible.

Access the website

The last step is to access our website. The generic URL to access a website hosted on an S3 bucket is as follows:

Replace <your-bucket-name> with the name of your bucket and open this URL. We should be able to access our website. By default the index.html page will be redered. In case of any error, we’ll be redirected to the error.html page.

Practice

Enter your AWS access_key_id and secret_access_key in the widget below before running any commands. If you don’t have these keys, follow the steps given in this documentation to generate the keys.

Note: The IAM user whose credentials are being used must have the permissions to perform all the required actions.