Static website generation using AWS S3, CloudFront and Route 53

Hosting static web sites on Amazon is dirt cheap and blazingly fast. No need for obscure old web hosting companies anymore.
This blog posts describes how to get started with your own website on AWS.

Getting started: Hosting on AWS S3

Let’s start with the basic, serving static content from a S3 bucket. In this part we are going to use

  • AWS S3 for storage
  • AWS CloudFront for caching/CDN
  • AWS Route 53 for routing your domain to the content

S3 Bucket

Login to your AWS console and go to S3 dashboard. Create a new bucket, name it to your domain (for example typedef.se). Go into your bucket and upload a simple index.html containing “Hello World”. Move over to the Properties tab and activate Static website hosting. The Index document should already be prepopulated with index.html.

There is also an endpoint link, click on it after saving to verify that your “Hello World” page is shown.
Hosting - done.

CloudFront - deliver your content in blazing speed

While this step is optional, it is still a nice feature to have. Leave S3 and move to the CloudFront dashboard. Click on Create Distribution and select Web. You will now get to a large config page.

First, you want to fill in Origin Domain Name. This is where your content is stored, in our case S3. Click in the textbox and it should autocomplete with S3 as an option. Pick your bucket.

Scroll down until you reach Alternate Domain Names (CNAMEs). This is where you specify your domain names. Remember to list both with and without www. Example example.com and www.example.com

For now leave the rest of the options and click Create distribution. Now we have working CDN distribution of our content. You can find your CDN Domain Name in the CloudFront Distributions overview, verify that it shows your index page.

Route 53 - Show me the way.

Leave CloudFront and go to Route 53. Create a new hosted zone with your domain name (without www).
Add a new A record set for your domain example.com. Click in the Alias target and the autocompletion should pop up. Pick your CloudFront distribution this time and save.

Bam, our website is now served on our domain name!

But wait.. it doesn’t work with www

The A record we just created does not apply for subdomains. Create a new record and add www to the name. As for Alias, pick your other record example.com this time.
Done!