Published on

Blogging on S3

Authors
  • avatar
    Name
    Linell Bonnette
    Twitter

Hosting a static website via Amazon Web Service's S3 service is pretty easy and is a great introduction to using S3. This process is actually exactly what's powering this blog.

You'll need an AWS account to follow along, but I believe that everything we're going to do should fall into either being completely free or close enough to not worry about. It's worth noting that I'll be using a custom domain that isn't a hosted zone in Route 53, so we're going to pretty much skip domain configuration in this post because it would just be confusing.

Starting Point

We're going to pretend that you've create a wonderful static site. This can be just about anything you can dream up - a site where each and every page is carefully created by hand, something created via Jekyll like this blog, or even an entire React application. If you're just trying to follow along with a barebones example, you can create something as simple as an index.html file that contains this:

<html>
  <head>
    <title>Test!</test>
  </head>
  <body>
    <h1>This is a test!</h1>
  </body>
</html>

Everything from here out can be done via the AWS console.

Once you've logged in there, navigate to the S3 dashboard. There should be a large "Create bucket" button, and that's what you want to click. This opens up a dialog and this is where the fun starts.

The bucket's name needs to be DNS-compliant and unique. Do whatever you want there, but I'm going to go crazy and choose blog.thelinell.com. Your choice of region will put the bucket wherever you want it, but I'm leaving mine as US East (N. Virginia). At this point you can actually leave everything on the default settings, we'll handle all of that in just a moment.

Once you've got the bucket created, click into it and go to the properties tab. One of the options here is "Static website hosting". Click to enable it and then choose the "Use this bucket to host a website" option. The only option you need to worry about right now is the "Index document" field. This field just tells S3 which file represents the base of your website. Typically this is your index.html file, but if you got a little wild and used something else then this is where you'll tell S3 how to handle things.

Now we need to change a couple of permissions. Shockingly, this happens in the "Permissions" tab. Click "Everyone" underneath "Public access" and check the box for "List objects." Now find the "Bucket Policy" box and click that. In the policy editor, put the following:

{
    "Version": "2008-10-17",
    "Statement": [
        {
            "Sid": "PublicReadForGetBucketObjects",
            "Effect": "Allow",
            "Principal": {
                "AWS": "*"
            },
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::YOUR_BUCKET_NAME/*"
        }
    ]
}

At this point you should be able to upload an index.html file and see magic happening at the URL specified inside of the "Static website hosting" property of your bucket. For example, the endpoint of my bucket above ended up as:

http://blog.thelinell.com.s3-website-us-east-1.amazonaws.com

So that's it!