Why I switched to Jekyll

Recently, I relocated my personal blog from Tumblr to a Jekyll-formatted site hosted with GitHub Pages. This new setup means that my whole blog loads much faster — the first view and the repeat view of the homepage load over twice as fast with Jekyll rather than Tumblr. The Google Page Speed result for my site increased by 8%. This increased load speed improves the search ranking of the site as well as the user experience.

Using Jekyll to make my blog means that my posts are stored on my hard drive, in Markdown formatted plain text files (Jekyll also supports Textile and HTML). These are searchable with Spotlight, so I can instantly find any blog post. I can also list the top 5 posts by word count, for example, with:

wc -w * | sort | tail -n6

Having my posts in Markdown also means that I can edit and create new posts with a text editor of my choice, on my Mac, iPad, or even iPod touch. My personal preference for text editors is Byword or TextMate for Mac, and PlainText for iOS.

Another benefit of Jekyll is that thanks to GitHub’s cofounder Tom Preston-Werner being the creator of Jekyll, GitHub will automatically run the jekyll command when you push to the branch gh-pages or the repository USERNAME.github.com. For this reason, a site created in Jekyll can be hosted on GitHub Pages. GitHub Pages is fast, reliable, easy, and free, and even supports custom domains for free. Of course, the Jekyll source code can be downloaded (sudo gem install jekyll) or customised (a git clone https://github.com/mojombo/jekyll.git is probably best) for running on your own server.

Jekyll uses YAML front matter and the Liquid templating engine so it is very easy to write a layout for your site. Here is my default post template for instance:

---
layout: default
---
<div class="post">
    <h1 class="ptitle">{{ page.title }}</h1>
	<div class="body">
	{{ content }}
	</div>
	<p class="meta"><span>{{ page.date | date: "%d %B %Y" }}</span> <span><a href="{{ page.url }}">&#8734;</a></span></p>
</div>

It is also very easy to make a basic archive page, here is mine:

---
layout: default
title: Henry Mercer
---
{% for post in site.posts %}
	{% capture cmonth %}{{ post.date | date: "%B" }}{% endcapture %}
	{% unless lmonth == cmonth %}
		{% unless forloop.first %}</ul>{% endunless %}
		<h3>{{ cmonth }} {{ post.date | date: "%Y" }}</h3>
		<ul class="archive">
		{% assign lmonth = cmonth %}
	{% endunless %}
	{% if post.layout == 'link' %}
			<li><span class="time">{{ post.date | date: "%d" }}</span> <a href="{{ post.link_url }}">{{ post.title }}</a> <a href="{{ post.url }}" class="arch_permalink">&#8734;</a></li>
	{% else %}
			<li><span class="time">{{ post.date | date: "%d" }}</span> <a href="{{ post.url }}" class="innerlink">{{ post.title }}</a></li>
	{% endif %}
{% endfor %}
		</ul>

The easy styling and customisation of Jekyll makes it really easy to theme your blog. And if you’re looking for somewhere to start, you can fork the creator’s (or my) repo on GitHub.

Jekyll definitely follows the “Content is king” principle. It isn’t for everyone, but for me, the easy theming, speed, and static file system make it a great blogging setup. In the future, it will be easy to switch to another blogging system with my posts in Markdown, and I can also hack Jekyll if I wish to.

Read more about Jekyll at its wiki, and examine my blog’s source code if you want to take a look at how the site is built.

Many thanks to this article, which explains how to highlight and escape Liquid template tags.