I'm a huge fan of static websites. This site is a static site using Middleman and, more importantly, my wife's website Mississippi Life is a Jekyll site. While neither of them really need a ton of performance, I figured it'd be a fun experience to see what hosting a site on Amazon's S3 is like.

Setup

The first step I took was to create an S3 bucket with the same name as the website. So I created a bucket named mississippilife.org. Once you've got it, click on "Properties" and then select "Static Website Hosting." Enable it and set the index document to index.html, or whatever you want the index to be.

Now you'll want to enable permissions so that anonymous users are able to access everything. To do that, just click on "Permissions" and then edit the bucket policy to be:

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "AddPerm",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::mississippilife.org/*"
        }
    ]
}

Here's what that looks like:

At this point your site is technically ready to go! If you upload an index.html file to the bucket and visit the endpoint in the "Static Website Hosting" section of the bucket configuration, you'll see it showing up now.

From here we're going to want to set up our custom domain. I already had the domain I wanted, but you could even go so far as to buy it from Amazon. For me, the process was as simple as setting up a hosted zone and configuring all of the records correctly. Check out this document for a step by step guide on this process.

Now I know all of that has seemed awful easy... but it's about to get easier. We're going to use the s3_website gem. The first step is to create a new IAM user with sufficient permissions in S3.

Next you'll want to create a s3_website.yml configuration file in your site's directory.

s3_id:       <AWS Access Key>
s3_secret:   <AWS Secret key>
s3_bucket:   <Bucket Name>
max_age:     86400
gzip:        true
s3_endpoint: us-east-1

At this point you're able to use s3_website push and it'll work like a charm.

You could quit here, but there's still room for improvement! We can use Amazon's CDN, CloudFront, to make pages load even faster. It's as easy as

  • Click on CloudFront in the AWS Console
  • Click on "Create Distribution"
  • Put your S3 Web Host in the "Origin Domain name" field and your actual domain, as in mississippilife.org, in the "Alternate Domain Names" field.
  • CLick on "Create Distribution"

Once it's done creating the deployment you'll want to go to Route53 and create an A entry with Alias set to "Yes" and then select your brand new CloudFront distribution. While you're waiting for all of that to propogate, you should get your CloudFront distribution's id and add the following line to your s3_website.yml file:

cloudfront_distribution_id: <id>

You'll now have a super fast, super cheap, and super reliable website. For Mississippi Life, it was also a definite speed improvement over GitHub Pages.


If any of these steps weren't clear or you need help with something feel free to reach out and