Relaunching the blog with Octopress and Amazon S3

During a Skype conversation with an ol'buddy of mine, he asked me if I had decided what to do with my blog; And that he really wants to pick his own blogging up again. He told me he came up with Octopress as a replacement for Wordpress and asked if I heard about it.

“Not really, but came across it as well on Github I think some time ago. I like the concept of Jekyll though. If you don’t have any other intentions than just write text and code.” I said, as I couldn’t put my finger on it.

“Exactly!” he responded, and I realized it’s basically the same thing.

The hassle with database backed blogging tools

I am a full-stack developer and like control of my own stacks; But having to maintain a web-server, relational database and backups for such a trivial thing as blogging is too much of a hassle.

Which led me to set up Octopress and Jekyll locally and push the content to an Amazon S3 Bucket with Website Hosting enabled.

Less cumbersome

It’s a lot less cumbersome to work with after everything’s set up, that’s for certain :)

  • No web-server nor database required.
  • Posts written in Markdown, which I have written all my projects documentation in for years.
  • No need for “real” backups as I host the git repository in multiple locations and devices.

Some caveats

Accessing the blog with wildcards did not work with S3 out of the box; If I visited a wildcard (i.e. blahonga.robertbrewitz.com) without a bucket I received Amazon S3’s ugly “NoSuchBucket/404 Not Found”. Also it was not possible to point an A-record to the bucket, only CNAMEs, which meant accessing it through robertbrewitz.com would not work.

After moving my domain to Route 53 it was possible to point robertbrewitz.com to a bucket with the same name, unfortunately wildcard-domains were not possible still.

Best solution right now is redirecting robertbrewitz.com with an external service to www.robertbrewitz.com; If I find a good solution that doesn’t require usage of a third-party service or EC2 instances I will share that information.

Step-by-step

Octopress, the static blog generator

Firstly read the instructions on how to get started with Octopress on Octopress Documentation pages.

Amazon S3

Don’t forget to change the domain-name to the one you’re intending to use ;)

1) Create the bucket www.mydomain.com.

2) Open up the buckets “Properties” and expand the “Permissions” dropdown. Hit the “Edit bucket policy” button and fill in the following JSON data (with your domain-name):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
{
  "Version": "2008-10-17",
  "Statement": [
    {
      "Sid": "",
      "Effect": "Allow",
      "Principal": {
        "AWS": "*"
      },
      "Action": "s3:GetObject",
      "Resource": "arn:aws:s3:::www.mydomain.com/*"
    }
  ]
}

And hit “Save”.

If you are wondering, as I did, about the date, it has to be 2008-10-17 for some reason I do not know; But I have an inkling.

3) Expand the “Static Website Hosting” dropdown, toggle “Enable website hosting”, fill in “Index Document” with “index.html” and hit “Save”.

Step 2, DNS settings

1) Create a CNAME-record pointing to your bucket, you can find the endpoint in the “Static Website Hosting” dropdown in the buckets properties.

1
2
Subdomain, Type, TTL, IP
www, CNAME, 7200, www.mydomain.com.s3-website-eu-west-1.amazonaws.com

2) Create an A-record pointing to 174.129.25.170, it is a service that redirects all TLD requests to a www version, Naked Domain Redirect.

1
2
Subdomain, Type, TTL, IP
@, A, 7200, 174.129.25.170

Push to Amazon S3 with jekyll-s3

1) Install the jekyll-s3 gem locally with

1
gem install jekyll-s3

2) Run jekyll-s3 to generate and edit _jekyll_s3.yml, I wanted to host my site in Europe so I had to add the following to _jekyll_s3.yml

1
s3_endpoint: EU

3) The jekyll-s3 gem currently expects the static files to be located in “_site” instead of “public”, change _config.yml

1
destination: _site

4) Reconfigure compass to generate stylesheets to the “_site” instead of “public” in config.rb

1
css_dir = "_site/stylesheets"

5) To be able to run “bundle exec rake preview” with “_site” directory change Rakefile

1
2
3
# ...
public_dir      = "_site"     # compiled site directory
# ...

and change from “public” to “_site” in config.ru

1
2
3
4
5
6
7
8
9
10
11
# ...
not_found do
  send_file(File.join(File.dirname(__FILE__), '_site', '404.html'), {:status => 404})
end

def send_sinatra_file(path, &missing_file_block)
  file_path = File.join(File.dirname(__FILE__), '_site',  path)
  file_path = File.join(file_path, 'index.html') unless file_path =~ /\.[a-z]+$/i
  File.exist?(file_path) ? send_file(file_path) : missing_file_block.call
end
# ...

6) Regenerate static site to _site directory and push to Amazon S3

1
2
bundle exec rake watch
jekyll-s3

There you have it

Hopefully these few hours of mine will get you up and running in a lot less time!

If you have any questions or have any suggestions your have the Disqus comments below.

Now, give MOAR coffee, I need to node and mongo all night ;)

Comments