Patrick Ward words, code, and music

Using Amazon S3 for Static Files on a Custom Subdomain

I’ve moved this blog over to Jekyll and decided to take advantage of Github Pages for hosting. Previously, I used my own static generator, Willow, and hosted it on Linode, but it didn’t seem worthwhile to spend the money on Linode for the simple, and infrequent posts I was making. In addition, I found the workflow of pushing changes to Github and having Github Pages automatically regenerate the website to be quite nice.

However, I didn’t want to host larger files and projects, such as my games, in the site’s git repository. It would have been redundant and take up too much storage space.

So, I created a new Amazon S3 bucket to host media files for this site that shouldn’t be in the main blog’s repo.

The process was rather simple:

Note: this will only work with a subdomain. To create an S3 website using a root domain (e.g. example.com), you will need to host your DNS with Amazon’s Route 53 service. That’s a topic for another day.

  • Log in the AWS Management Console
  • Create a new bucket with the same name as the subdomain (e.g. a bucket named media.example.com for the domain media.example.com)
  • Next, you’ll need to add permission for anonymous users to read the contents of that bucket.
  • Select the bucket you created.
  • Select the Properties tab at the top right.
  • Select Permissions in the available properties.
  • Click the Add bucket policy button and in the policy editory add the following code (replacing media.example.com with your own subdomain).
{
	"Version": "2008-10-17",
	"Statement": [
		{
			"Sid": "AllowPublicAccess",
			"Effect": "Allow",
			"Principal": {
				"AWS": "*"
			},
			"Action": "s3:GetObject",
			"Resource": "arn:aws:s3:::media.example.com/*"
		}
	]
}

A few notes about this:

The Sid is an arbitrary identifier that you make up. Name it something meaningful related to the policy statements. The Principal here indicates you are allowing acces to all of the AWS objects in the bucket. The Action indicates you’re allowing GetObject (or read) access.

  • Next, you’ll need to enable the S3 website feature
  • Click on the Static Website Hosting tab under the Properties area.
  • Select Enable website hosting and add the index and error document names that Amazon’s S3 service will use when browsers hit to the root of your new subdomain hosted at S3.
  • Finally, you’ll need to make a CNAME entry at your DNS provider and point your subdomain to the Endpoint url that is listed under the Static Website Hosting tab.

Once your DNS resolves and you’ve uploaded your files, you should be able to view your subdomain, now hosted on Amazon S3.