Nov 30, 2012 3 min read

Jekyll on your root domain on CloudFront CDN

Maybe like me, you read about the Obama campaign’s $250 million fundraising platform and wanted the same high-performance for your own site?

I’ve used Jekyll for a while, but there was always one thing that prevented me from using Amazon S3 / CloudFront to host it.

The deal-killer - WWW

To use amazon s3 or cloudfront for hosting, you have to use a CNAME. This basically means you need to have blog.mydomain.com or www.mydomain.com to host there.

I hate using “www” in front of a website. It’s a pet-peeve but a big one and I didn’t want to host with s3 / cloudfront because of that.

Enter the ANAME

ANAME is a proprietary, non-standard DNS record type from DNS Made Easy learn more. It allows you to point the domain apex “domain.com” to cloudfront.

Basically, for $29.95 a year, you can host up to 10 domains there and not look like you’re living in 1997 with your “www”. Pretty sweet. I signed up yesterday.

So now you can set up an ANAME on the domain apex and it looks like we can use Cloudfront to serve content, let’s migrate the blog with zero-downtime.

Get Amazon S3 Set up

Add your bucket

Make sure you name the bucket “yourdomain.com”

Set up your policy

Use this gist as a guide.

Set your bucket up for static hosting

Yours should look pretty similar to this:

On to CloudFront

CloudFront is Amazon’s CDN. Basically, by putting content on CloudFront, you can achieve a faster experience for people wherever they are in the world. It sends them data from the closest datacenter.

Create a distribution

You’ll notice that when you create a distribution, and select the origin, they have a list of your s3 buckets:

DONT pick one of these!

You need to use your website endpoint from S3.

Distribution Settings

It seems like you need to set the root object again. Not sure what happens if you dont. You’ll also want to make sure to add “domain.com” and “www.domain.com” as your CNAMEs.

After you set up your CloudFront distribution, copy the “domain”. You can find that by clicking the info icon. You’re gonna need it for the DNS.

Set up DNS Made Easy

Create your DNS made easy account

Feel free to use my afilliate link (or not)

Add your ANAME record to point to your cloudfront domain name i.e. d20l41xryjmszl.cloudfront.net (make sure you add a trailing .)

Also, you should set the TTL to 60 seconds.

Before you switch your registrar, let’s make sure content is up.

Synchronizing content to S3

Install S3Cmd

You could install s3cmd with homebrew, but the stable version doesn’t support expiring the cache on cloudfront. The development version does, but doesn’t support expiring the cache for static sites… so…

Jose Prio forked S3Cmd to support our use case well… so let’s use his fork.

git clone https://github.com/joseprio/s3cmd.git

cd s3cmd

sudo python setup.py install

Set up your access key and secret

s3cmd --configure

Follow the prompts to add your key and secret.

Set up your publish script

Then, I created a shell script: publish.sh one level up from my site. My generated site is in “public” but yours will probably be in _site

Publish.sh:

s3cmd sync --delete-removed --acl-public --reduced-redundancy --cf-invalidate public/ s3://iamnotaprogrammer.com/ --verbose

Publish!

sh publish.sh

You should see some success like this:

Test your cloudfront is working

Now if you go to the cloudfront address you saved earlier, you should see your site.

Switch your DNS

Last step, assuming everything went well is to switch your DNS provider on your registrar to DNS Made Easy.

And that’s it. You’ve got your static site hosted on a CDN and it’s on the domain apex.