Deployment of Static Sites on S3

Amazon Web Services "Simple Storage Service" or S3 is probably the cheapest and easiest way to serve static web content. There are 3 requirements:

  1. Your S3 bucket is set to host html content.
  2. Route 53 is configured to route traffic to your domain. (Although you could use a domain redirect, but using Route 53 is really the best way to do this.)
  3. You have a way to deploy your content to S3.

This assumes you have an AWS account setup. If you don't, do that first.

Set up s3 to host html content

First, create an S3 bucket with the exact name of your domain. Put in some sample files. Go to "properties" and enable "Static Website Hosting." Also, go to "Permissions" and make sure that there is public read access to the bucket.

Configuring Route 53.

It's actually fairly straightforward. First, go to Route 53, and add a new "Hosted Zone." When you do, you'll see the nameserver entries clearly.

Route 53 Configuration

Copy and paste the nameserver entries into your registrar's entries for nameservers.

Then, as you can see on the side of that image, create a new record set, make it an 'A' record, choose 'alias' and point it to your s3 bucket that you created.

Wait for a bit for DNS to propogate. Since you changed nameservers, it might take a few hours, depending on how fast your ISP handles DNS changes.

Deploy your content

There are a number of ways to deploy content onto S3:

  1. You can simply upload the images to S3 via the web-based control panel.
  2. You can use a desktop S3 client like Cloudberry Explorer
  3. You can use the aws command-line tools to sync the content like this:
$ aws s3 sync . s3//<name-of-bucket>

(If you are on Windows 10, like I am, you can use the Windows Subsystem for Linux or Powershell to use the AWS CLI. The Powershell commands look a bit different - I'm using WSL. You can use the command line tools with any version of Windows back to XP.)

Since I'm using the static site generator Pelican I can use Make to re-generate and upload my site to S3. If you use Pelican, and run the quickstart, choose that you want the site automatically generated. It will create a makefile for you, which you can then edit as you'd like. For S3, the makefile uses s3cmd, but you can easily replace the s3cmd command with the aws sync command. I used:

aws s3 sync $(OUTPUTDIR)/ s3://$(S3_BUCKET) --profile <profile name if you are using multiple AWS profiles> --grants read=uri=http://acs.amazonaws.com/groups/global/AllUsers

links

social