Nemo's Home

Blogging with Jekyll ⚓

19 Sep 2011

For the past few years, there has been a revolution in the blogging scene. People have moved towards better hosting providers, better blogging tools, with automated, and delayed blogging becoming the norm. Posts are written months in advance, and proof-read dozens of times, before making it to the general public. Wordpress, Blogspot, Tumblr, Posterous, Texpaterrn are pretty much everything that most of the bloggers use. However, there have been some silent niche entries in this market. Static Site Generators.

Static Site Generators

Static Site Generators are tools which you use to generate a static version of your site. Instead of using a dynamic scripting language (such as php), your tool takes in your markup & combines it with your blog posts to generate an html only version of your site. This version is then uploaded(for eg, via ftp) and is then visible as your blog. Most such tools are written in languages such as ruby, python, node.js, and erlang. The most commonly known are Jekyll, Hyde, nanoc, and webby. An excellent list is available here.

Benifits of using Static Site Generators

Markup

For me, the most important part of using Jekyll is that it allows me to use markdown as my writing syntax. Markdown is a markup language that is compiled to HTML. It is supposed to be a highly readable version of html. For instance it uses backticks(`) to write code.

`this` becomes this

Also, you can use * to emphasize text(strong or emphasis). Link creation is not the horrible <a href=> that you remember, but the sleek looking [Link text](Link URL). Similarly it offers lots of other features. You can even specify alternative markup languages, such as textile in jekyll configuration.

Ease Of Blogging

You can write blog entries very easily. I’ve added markdown syntax bindings to vim, my favorite editor, and geany has a markdown plugin as well. I am of the opinion that you should write text entries in a text-editor, not a textarea in a browser window. I used Windows Live Writer for quite some time and still believe that it is far ahead of anything else in the market. But the wpost format that it uses is propertiery, and as such stopped me from importing blog posts anywhere.

Revision Control

Revision Control, such as git, works best with text-files. Since your blog entries are now just plain text files, you can easily store them under version control, easily reverting blotched commits, making branches, and merging errors. And in case you do not know it yet, git is awesome!

Layout Tools

Jekyll allows you to define your layout using Liquid Templating. {{content}} translates to the variable content. Similarly you can iterate over blog posts, by using Liquid tags for foreach. The best part is that this is all done before publishing your website, meaning that the final result is always just pure html. You can easily create static portions of your site (such as headers, footers, sidebars).

Getting Started With Jekyll

I’ll start with jekyll, since it is the most used one out there, and runs on github. It even powers this very blog. First, you must install jekyll. On an Ubuntu machine, sudo apt-get install ruby rubygems && gem install jekyll should work. If you are working on development using Ruby, I’d recommend you to rvm, instead of plain vanilla distro ruby installs. For windows folks, install Ruby, and the Devkit using RubyInstaller.org. After that run gem install jekyll.

Instead of preparing a site from scratch, we will instead be forking an existing site running on jekyll, and using it to model our own. This is partly to shield this tutorial from html/css/js which is irrelevant in this case. In this particular case, I will be using my very own website. Download the source code for my website from github and extract it somewhere. Next, you will have to delete all the content inside the _posts, projects, _drafts, contact, & data directories as I do not give permission to you do use those in your site.

Next, create a file called _posts/2011-month-date.md with the following format :


---
title: Title Of Post
layout: post
---
The blog entry follows here in markdown. You can use *italic*, **bold**, [Link](http://google.com), #header1, ##header2 etc.

For more markdown details, visit its official page at http://daringfireball.net/projects/markdown/syntax#autolink

Now, open up the _layouts/ and edit default.html. You’d need basic html skills to replace my photo with your own, and change links to various places. After you are done, just cd into the root directory of the site, and run jekyll. Some output should confirm that the server ran successfully. Open up http://localhost:4000 in your browser, and you will see your web-site running.

Now for the hosting part. All of your current site is hosted in _site folder, so you can upload it anytime you want. Or, if you want, you can use github as your hosting provider. Just follow the instructions on pages.github.com and you should be be up and running in no time.

Published on September 19, 2011
By