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. It’s nice to have my posts as files: I can instantly find any blog post with Spotlight, and I can edit and create new posts with the 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 with 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. As such, a site created in Jekyll can be hosted on GitHub Pages, which supports custom domains for free. Jekyll can also be downloaded (sudo gem install jekyll or git clone https://github.com/mojombo/jekyll.git) 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 }}
	<p class="meta"><span>{{ page.date | date: "%d %B %Y" }}</span> <span><a href="{{ page.url }}">&#8734;</a></span></p>

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 %}

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 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 take a look at my blog’s source code if you want to take a look at how this site is built.

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

← View all posts