In this post you are going to learn more about Amazon Web Services (AWS) via a practical example, hosting a static website on Amazon Simple Storage Service (S3) . In five simple and easy steps you can have a static website hosted on S3.

While there are many cloud providers available, I use AWS because:

They have the “Free Tier” which is a huge benefit when combined with already low costs.

Their services offer unmatched scale, elasticity, performance, and security.

It is one of the easiest to learn when you use it for practical examples.

There are other cloud platforms out there such as Microsoft Azure, Google Cloud Platform, and IBM Cloud Computing. They each have a similar service to S3, so the concepts in this post apply to these other providers as well.

Most websites are becoming static websites which means they run zero server side code and consist of only HTML, CSS and JavaScript. With no server side code to run, there is no reason to host them on a traditional server.

By using the static website hosting feature on an S3 bucket, we host static websites for one to two dollars a month and scale to handle millions of users.

I am a huge believer in learning by doing. The first service I learned from AWS was S3. I learned it by going through the process of hosting my personal site on it. This jump started my passion for all things Amazon Web Services. It is what led me to becoming a certified AWS Solutions Architect.

With the background out of the way, are you hungry to learn more about AWS by completing a practical example? Then let’s jump in.

A Bit Of History

In November 2004, Amazon announced their first service for AWS, Simple Queue Service (SQS). That was the first inkling at what we often call the cloud, but it wasn’t viewed as a big disruption to the status quo.

In Spring 2006, Amazon introduced Simple Storage Service (S3). Unlike SQS, S3 would not only disrupt status quo, but would go on to be the foundational service of AWS.

S3 consists of buckets which are storage containers for files. A bucket is a high availability and high durability flat object store with no hierarchy.

Since 2006, the service has evolved to be much more. S3 is a foundational building block for other AWS services in the eco-system. Don’t believe me? Look at the event log for when S3 in Virginia went offline earlier this year.

As you can see from this graphic there were a lot of AWS services affected by the outage. This is because several AWS services rely on S3 internally as well.

In fact, the AWS Health Dashboard is hosted out of S3. Hey what a segue right?

1. Naming Your S3 Bucket

Before you begin hosting your awesome static website out of S3, you need a bucket first. For this blog post, it is critical that your bucket has the same name as your domain name.

If your website domain is www.my-awesome-site.com, then your bucket name must be www.my-awesome-site.com.

The reasoning for this has to do with how requests are routed to S3. The request comes into the bucket, and then S3 uses the Host header in the request to route to the appropriate bucket.

Host: www.my-awesome-site.com

2. Configuring Your S3 Bucket for Static Website Hosting

Alright, you have your bucket. It has the same name as your domain name, yes? Time to configure the bucket for static website hosting.

Guess what? Turning on static website hosting for your bucket is as simple as a few clicks in the AWS Console.

Navigate to S3 in the AWS Console.

Click into your bucket.

Click the “Properties” section.

Click the “Static website hosting” option.

Select “Use this bucket to host a website”.

Enter “index.html” as the Index document.

Or if you are all about command lines and would rather not have a graphical user interface (GUI) in your way, this AWS CLI command turns website hosting on for your bucket.

aws s3 website s3://www.my-awesome-site.com/ --index-document index.html --error-document error.html

Your bucket is configured for static website hosting, and you now have an S3 website url like this http://www.my-awesome-site.com.s3-website-us-east-1.amazonaws.com/ .

Your bucket serves your static website, so it must be accessible to anyone in the world. This is referred to as anonymous access to the bucket.

By default, any new buckets created in an AWS account deny you the ability to add a public access bucket policy. This is in response to the recent leaky buckets where private information has been exposed to bad actors. However, for our use case, we need a public access bucket policy. To allow this you must complete the following steps before adding your bucket policy.

Click into your bucket. Select the “Permissions” tab at the top. Under “Public Access Settings” we want to click “Edit”. Change “Block new public bucket policies”, “Block public and cross-account access if bucket has public policies”, and “Block new public ACLs and uploading public objects” to be false and Save.

You must complete this step before adding the bucket policy to your static website bucket.

Now you must update the Bucket Policy of your bucket to have public read access to anyone in the world. The steps to update the policy of your bucket in the AWS Console are as follows:

Navigate to S3 in the AWS Console.

Click into your bucket.

Click the “Permissions” section.

Select “Bucket Policy”.

Add the following Bucket Policy and then Save

Or for the command line fans out there, if policy.json is the above bucket policy, then use:

It is important to note the "Principal": { "AWS": "*" } section of the bucket policy. This part of the policy opens up your bucket to anyone in the world. Any object in this bucket is available to the public via the S3 website url. Don’t put anything in this bucket that you’re not willing to share with the world.

3. Adding A CNAME Record For Your Bucket Url

You have a bucket that is configured for static website hosting. It has an S3 website url. You understand that this bucket is accessible to the world? You are cruising right through this.

In order for a user to load your S3 website you’ll need to provide mapping from your domain name www.my-awesome-site.com, to your S3 website url www.my-awesome-site.com.s3-website-us-east-1.amazonaws.com. This mapping is often referred to as a CNAME record inside of your Domain Name Servers (DNS) records.

www.my-awesome-site.com CNAME www.my-awesome-site.com.s3-website-us-east-1.amazonaws.com

The process to complete this step varies depending on who your DNS provider is. In general this is what you are looking for within your DNS provider:

Create a record for a host like www

The record type must be CNAME (Canonical name)

The value must be your S3 website url www.my-awesome-site.com.s3-website-us-east-1.amazonaws.com

4. Uploading Your Static Website

Your bucket is configured for static website hosting. You have a CNAME record in your DNS records that resolves to the S3 website url? Awesome, it’s showtime then.

Remember S3 is a flat object store, which means each object in the bucket represents a key without any hierarchy. While the AWS S3 Console makes you believe there is a directory structure, there isn’t. Everything stored in S3 is keys with prefixes.

This is important to note because if you have a website structure like this:

about/

index.html

contact/

index.html

css/

styles.min.css

...

...

index.html

It is easy to assume that this is a traditional directory structure. In fact, the AWS S3 Console makes you believe this as well.