Hosting A Static Website on Amazon S3

9 min readJan 22, 2024

You have been tasked with moving a Fintech startup (Level Up) bank’s website hosted an on-premise server to Amazon S3.

What is Amazon S3 ?

S3 stands for Simple Storage Service. Get it? S3. Like the name implies, S3 is a storage service offered by Amazon Web Services (AWS). You can use S3 to store and retrieve your digital items like pictures, videos, files, documents, and any other digital item you want to keep safe and easily accessible from anywhere on the web.

An important use case for the data stored on S3 is the Hosting of a Static Website. This leads to the second question which you may or may not have but I’ll answer it anyway:

What is a Static Website and Why Should We Host it on S3?

A Static website is a type of website that contains a collection of web pages that are “static” or “fixed” (usually a set of HTML, CSS Javascript code) and displays the same content for every visitor or user regardless of the user’s preferences, settings, or factors like local time or location.

Excusing the technical jargon, but it’s a basic website with content that doesn’t change unless a web developer manually updates the code and uploads a newer version to the server. This makes it easy to deploy, maintain, and host on simple web servers. An example would be a nonprofit’s website providing visitors with essential information about its organization and mission.

I know, I know.. you might be wondering “When’s the info about static website gonna be over?” Almost there I promise. Before we get to business we need to understand why S3 is an ideal environment to host the bank’s website.

Durability: S3 is designed to provide resilient data storage in the cloud, against widespread disaster. Fun fact: It exceeds 99.999999999 (11 nines) data durability.
Improved Scalability: Amazon S3 can handle any amount of data, and it automatically scales to accommodate an increase or decrease in the user’s storage space as needs grow or reduce without any input from the user. In our case for example, if the bank’s website receives more traffic than it normally gets due to e.g. a holiday promotion, S3 can easily handle the increased traffic without any downtime.
Cost Savings: This is an important factor. Companies especially a startup like ours might be looking to cut down on some costs, and moving from an on-premise server which incurs more costs like electricity, maintenance, data transfer, training staff on how to manage the servers, and so on to hosting the website on S3, will significantly cut down those costs. S3 charges only for the amount of storage used and the cost of data transfer is also minimal. The best part? S3 has several storage plans which come with discounts that the company could take advantage of. Who doesn’t love a good discount?
High availability: A website hosted on S3 would be available and accessible to users at all times because S3 offers high availability and durability across many data regions worldwide.

Phew! Now that we have all that out of the way, let’s get into what you actually came here for (I hope you’re still with me🤞🏾), which is how to host a static website on S3. Lock in!!

Prerequisite(s)

To host the company’s website on Amazon S3, all you simply need is an AWS account which you can sign up for free here (You get 5GB of S3 for free with the free tier)

S3 Terminology

Below are a few terms associated with the S3 service, and I think it’s important to know what they are/what they do before proceeding because we’ll be using them. They are:

a. Bucket: This is where your digital data is stored. The name of your bucket must be globally unique, and we’ll see this when we make our bucket to store files.

b. Object: This is the data that you upload and store in the bucket. An object is made up 3 things:

Data: This is the actual content of the file uploaded into the bucket e.g., an image, text file, and so on.
Key: The Key is a unique name or path to identify an object in the bucket. It is composed of a “prefix” + the object name.
Metadata: It simply provides additional information about the object.

c. Bucket Policy: A bucket policy is a configuration or set of rules that defines who has access to the data in our bucket and how it is managed. This is what will grant the public read access to our website in the bucket, and anyone on the internet will be able to access it. The policy is written in JSON format.

Step 1: Create a Bucket

To create a bucket, do the following:

a. Sign into your AWS account/management console and look up the S3 service in the search bar.

b. Now you’re in the S3 console. Within the S3 dashboard, click on the “Buckets” option in the left sidebar, then click on the yellow “Create bucket” option on the far right.

c. On the “create bucket” page, use the following options for their corresponding steps:

AWS Region: S3 buckets are region-specific, so choose a region that is close to you geographically. This would minimize cost and latency.
Bucket Type: Leave as “General purpose” (default)
Bucket Name: Use a name specific to your bucket.

Leave all other options as default and click the “create bucket” option.

d. If the creation of the S3 bucket was successful, you should get something like this on your screen.

Step 2: Viewing a Created Bucket

a. After the successful creation of your bucket, you will find it under the “General purpose buckets” heading. Click on your newly created bucket.

b. You should be able to view a new page like the one below.

As seen in the image above, we have zero objects in our “lu-bank” bucket because we have not uploaded any files yet. This page is where the fun begins.

Step 3: Enable Static Website Hosting in Your Bucket

To host Level Up’s bank website in our S3 bucket, follow the following steps:

a. Click on the “properties” tab

b. Locate “Static website hosting” and choose “Edit”

c. To edit static website hosting do the following:

Enable static website hosting
Choose “Host a static website” as the Hosting Type
Enter “index.html” as the Index document. This is the home page document for our website. Note: The Index document name is case-sensitive, so it must match exactly the name of the HTML document that you plan to upload to your bucket.
Enter your “error.html” or “404.html “document if you have an error document. I am not using an error document so I would ignore that option.

We are done editing, click “Save changes”.

d. Now our “lu-bucket” is enabled to host the website.

The HTTP link in the picture above is the endpoint of our website. This is how we’ll test our website after we’re done configuring our bucket.

Step 4: Allow Public Access to the Bucket

Since the website we intend to host on our bucket is for public use, we need to edit the Block Public Access configuration in the bucket settings. S3 blocks public access to your buckets by default so you have to edit this to host a static website. If not, the bank’s customers would be unable to access the bank’s services.

To do this,

a. Click on the “permissions” tab of the bucket.

b. Under “Block public access (bucket settings)”, choose Edit

c. Uncheck “Block all public access”, and click “Save Changes”.

d. Confirm the changes you made by typing confirm in the prompted box

Then you should have this below

Step 5: Add a Bucket Policy

To provide the public read access to our bucket follow the steps below:

a. Continuing in the permissions tab, locate “Bucket policy” and click Edit

b. If you have a policy, you can copy and paste it into the text bar. I do not have a policy so I’ll be creating one using the “policy generator”. Choose the policy generator option if you also don’t have a policy.

c. To generate a policy

Choose the “S3 Bucket Policy” in Step 1

In step 2,

choose “Allow” as your Effect
“ * “ as your Principal,
“GetObject” as your Action
Your bucket name plus “/*” (a slash and an asterisk) is your ARN. In this case, our bucket name is “arn:aws:s3:::lu-bank” therefore, our ARN would be arn:aws:s3:::lu-bank/*
The asterisk as the principal means the policy applies to any user. The GetObject action means reading objects from the bucket. The ARN means that the policy applies to all objects in our lu-bank bucket. Essentially, the policy generated allows anyone (principal) to download (GetObject) within the lu-bank bucket.

Choose “generate policy” for step 3. You should get something like the image below.

{
  "Id": "Policy1705856505053",
  "Version": "2012-10-17",
  "Statement": [
    {
      "Sid": "Stmt1705855481325",
      "Action": [
        "s3:GetObject"
      ],
      "Effect": "Allow",
      "Resource": "arn:aws:s3:::lu-bank/*",
      "Principal": "*"
    }
  ]
}

You can now copy and paste the above code into the Statement bar and Save Changes.

A message showing you’ve successfully added the bucket policy should appear at the top of your screen.

Step 6: Upload The Website’s Content

Remember the Index document we talked about while editing the S3 bucket to host a static website? The one that contains the homepage of our website? Yeah, that one! We are going to upload it into our S3 bucket.