Static blogging: from Wordpress to Jekyll

15 Jul 2011

Goodbye Wordpress

The first time I started a blog, I went with the obvious option: software as a service. After all, they could get me started in minutes and let me focus on the content. After a while though, I started to get the limitations - I guess "free" came with a cost. From then I decided to run my own instance of Wordpress, which felt a lot more flexible: I could play with CSS, change all the settings, and most of all I had my own little blog. Not that it was complicated, but you still get the IKEA satisfaction of assembling everything correctly!

So why change again? Don't get me wrong, Wordpress is great platform. But eventually some things started bugging me:

I could go on, but let's say it just felt like a very heavy tool when all I want it to publish content. You know, formatted text and a few images.

Back to text

What if I could write posts in a normal text editor, possibly in markdown / textile? What if I could preview all my changes locally, and publish whenever I wanted? And what about version control? I guess what I wanted was to approach blogging like we do software development, which led me to Jekyll. Yes, that's Tom Preston-Werner's project - the same guy behind like GitHub and Gravatar!

Dr Jekyll and Mr Hyde

When you think about it, a typical blog doesn't have many dynamic components. Apart from the search and comments, everything could be generated once and served many times - from posts to tag pages and RSS feeds. Well Jekyll does exactly that! It takes a series of local files as an input, runs them through layouts and plugins, and generates HTML files ready to be served. Being written specifically for blogs, it knows about posts, tags and permalinks, and you can literally get started in minutes.

Where it really shines is its simplicity. It doesn't take more than jekyll --auto --server to get a local server running, re-processing your raw files as you change them. You can just start writing plain posts in the markup language of your choice, and they will be rendered using Liquid templating. Layouts are pretty straightforward, and you don't need to know much Ruby to get around.

However if you feel like DRYing up your code or adding extra functionality, Ruby will come in handy for Jekyll's plugin system. It's pretty easy to find existing plugins (tag clouds, minification…) but writing your own is easy and fun too! For example the following filter allows me to quickly add a HTML 5 timestamp to my posts:

def html5_pubdate(date)
    html5_date = date.strftime("%Y-%m-%d")
    print_date = date.strftime("%d %b %Y")
    "<time datetime=\"#{html5_date}\" pubdate>#{print_date}</time>"
end

to be used like:

Posted on {{ post.date | html5_pubdate }}

Because yes, with complete control over the HTML and CSS, I thought why not give HTML5 a try? {% sprite android-cool smiley %} Hopefully what you're reading looks OK, while being nicely organised in headers, navigation, articles etc. Next up is mobile stylesheets!

Amazon S3

With all the sources checked in to my private Git repo, and a small Rake build to generate the site, it looked like I was done. Oh no wait, maybe a blog is meant to be published! Like I mentioned, the result of a Jekyll build is an entirely static website. Yes, that's just HTML, CSS, Javascript and a few images. No security issues, no time spend rendering pages, and in fact… no need for any server-side environment other than an HTTP server!

Amazon AWS

That was the ideal occasion to play with Amazon AWS and deploy my blog to S3. If you haven't played with S3, I really recommend it. It's fun, accessible, and probably won't cost you a dime. For the first year you're entitled to the AWS free tier, which provides plenty enough storage and transfer to even stop thinking about it. I simply created a new "deploy" user in the Access Management console, and gave it the following permissions:

{
    "Statement":[{
        "Effect":"Allow",
        "Action":"s3:*",
        "Resource":[
            "arn:aws:s3:::your.bucket.name",
            "arn:aws:s3:::your.bucket.name/*"
        ]
    },
    {
        "Effect":"Allow",
        "Action":"s3:ListAllMyBuckets",
        "Resource":"arn:aws:s3:::*"
    }]
}

From then, all you need is s3cmd, which can synchronise your local output folder with your remote bucket.

s3cmd sync --delete-removed output/* s3://your.bucket.name

Of course that became another task in my rakefile, and publishing a new article or layout change is as easy as rake deploy.

So would I recommend Jekyll for a feature-heavy commercial blog with thousands of posts? Probably not. Dynamic server-side generation has its advantages and it would be silly to pretend otherwise. But for a personal website or medium-sized blog, you would need to be very convincing to make me go back to a world of hosting and databases! Smiley

Comments