A Deep Dive on Amazon Simple Storage Service(Amazon S3) for Hosting Static Website

Photo by rawpixel.com from Pexels

In this article, we are going to explore “How to host a static website on Amazon S3”.

Amazon Simple Storage Service (Amazon S3) is an object storage service that offers high scalability, data availability, security, and performance. Amazon S3 can be used for website hosting by configuring the bucket and then uploading your content to the bucket in a few steps.

Before making our hands dirty for hosting our static website on Amazon S3, let’s explore why Amazon S3 is the first choice for hosting static websites:

1. It offers industry-leading scalability, data availability, security, and performance.
2. This is used to store and protect any amount of data for all kinds of industries having any size.
3. This supports a wide range of use cases like hosting static, backup and restore, Disaster recovery (DR) and Data lakes and big data analytics, Hybrid cloud storage & Cloud-native application data, etc.
4. S3 is free service from Amazon Web Services and follows a pay-as-you-go service model.
5. Amazon S3 is designed for 99.999999999% (11 9’s) of durability & between 99.95% to 99.99% availability.
6. Amazon S3 is trusted by big giants like Netflix, SmugMug, Pinterest (for hosting images) & many more for various use cases. Even Reddit is hosted on Amazon S3.

The process of hosting a static website can be divided into four simple steps:

1. Create Your S3 Bucket
2. Configuring the bucket for “Static Website Hosting”
3. Uploading all files/documents of the static website
4. Adding a policy to the bucket that will make the bucket publicly available

Let's host our static website:

Step 1: Create Your S3 Bucket

The name of the new bucket should be a unique DNS-compliant name. The following naming conventions should be followed while naming your bucket.

1. The bucket name must be unique across all existing bucket names in Amazon S3(globally unique).
2. The name must not contain uppercase characters & always start with either lowercase letters or numbers.
3. The length of the bucket name must be between 3 and 63 characters.
4. The bucket name cannot be updated once the bucket is created. If you want to change the Bucket Name then you need to create a new Bucket.

We need to select a region where the bucket will reside. The nearest region should be selected to minimize latency & costs.

Note: We don't need to login to a specific region to use Amazon S3. The Amazon S3 service is globally available.

Go to AWS S3 console and click on “Create bucket”. In the pop up that follows, choose a suitable region from the Select a “Region” dropdown. If you have an existing bucket & you want to use the settings of that bucket for this new one then select choosing “Copy settings from an existing bucket”, and then choose that particular bucket. Versioning, tags, and logging are the bucket properties that will be copied from source bucket to destination Bucket. This is an optional step though.

Step 2: Configuring the bucket for “Static Website Hosting”

Now we need to configure our bucket as a website. To achieve this, select your bucket and click on the “Properties” section and click on the “Static Website Hosting”. Now Select the option “Use this bucket to host a website”.

Now we will configure the home or default page on the website. Add “index.html” as “Index Document”. We can also configure “Error document” that will be returned in case of any errors.

Step 3: Uploading all files/documents of the static website.

Select the bucket and upload all the files of the website. Amazon S3 is a simple key-based object-store. Every object is assigned with a unique object key that can later be used to retrieve the data. When any file is successfully uploaded to the bucket then AWS S3 will respond with 200 OK responses.

To upload the static website to S3 via the AWS Console, we need to proceed with the following steps:

1. Select the bucket and click on the “Upload” button.
2. Either we can drag and drop all files at once or click on “Add files” and upload all the files and click on “Next”.
3. We will go with the default permissions that S3 offers as it is recommended that we should not change the default settings. We should always make changes to object permissions when the objects are successfully uploaded into the bucket.
4. Finally, click on “Next” and click on “Upload” to upload files. We can see 200 OK response for every file that is being uploaded to AWS S3.

After uploading all the files of your static website, the bucket structure will look like :

Step 4: Adding a policy to the bucket that will make the bucket publicly available

Now the newly created Amazon S3 buckets are always private and protected by default. We are required to use Access Control Lists (ACLs) and bucket policies to grant access to anonymous users. This adds an extra layer of security. We need to perform the following steps before adding Bucket Policy.

In your bucket, select the “Permissions” panel, under the “Public access settings” section, uncheck the following and click on save.

1. Block new public ACLs and uploading public objects
2. Block new public bucket policies
3. Block public and cross-account access if the bucket has public policies

Now, to make the bucket publicly available, select your bucket and click on the “Properties” section and choose “Permissions”.
Then choose to add bucket Policy. To use the bucket as a website, the bucket must have public read access. The following policy can be added to the bucket Policy Editor.

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Sid": "AddPermission",
      "Action": [
        "s3:GetObject"
      ],
      "Effect": "Allow",
      "Resource": "arn:aws:s3:::www.my-example-site.com/*",
      "Principal": "*"
    }
  ]
}

Note: You can use the AWS Policy Generator to generate your policy.

Now open any browser and hit the URL “http://www.my-example-site.com.s3-website-us-east-1.amazonaws.com” i.e. <bucket-name>.s3-website-<AWS-region>.amazonaws.com or to get the Endpoint of your bucket, go to “Properties” section then click on “Static Website Hosting” option.

Congratulations! You’ve successfully hosted a static website on Amazon Simple Storage Service (Amazon S3). 😊😊😊