Converting my Blog to Jekyll

March 01 2011

I started this blog to develop my writing ability as well as to make some use of a domain name I purchased some time ago. Going from an initial one page template, to a Python script generating a small static site, I realized I was writing my own static site generator. While initially entertaining, it wasn't really what I set out to do with this creative outlet.

Jekyll?

Reading about GitHub pages introduced me to Jekyll, which I found to be an elegant take on static site generation. While other generators like Blosxom are extremely powerful ( and highly tailored to blogging ), they have more of a startup or conversion time investment required.

With Jekyll you don't need a configuration file or much boilerplate. A simple site can consist of just a folder containing an index.[whatever markup you want] and a layout in the _layouts sub-folder. Make sure that your index.[whatever markup you want] is topped off with an appropriate header:

---
layout: post
title: Converting my Blog to Jekyll
categories: [Utilities, Ruby]
---

Which looks a little familiar... Upon running jekyll --server I am greeted with a preview of my site running on WEBrick. Marvelous!

Customization

While the default behavior of Jekyll works pretty well, I had to do some digging on how to replicate my posts by date and posts by tag lists. After some searching I came across this great post on Bruce Cooper's blog about exposing the posts as a tree by year and month. This greatly simplified the creation of the posts by date list and gave me a jumping off point for sorting tagged posts.

# Based on Bruce Cooper's postsbydate.rb # https://github.com/brucejcooper/8bitcloud.com/blob/master/_plugins/postsbydate.rb # http://www.8bitcloud.com/2010/12/29/posts-in-tree.html module Jekyll class Site # Sort posts by category and date def postsbycategory categories = [] self.categories.sort.each do |category_name, posts| category = {} category["name"] = category_name category["posts"] = posts.sort {|x,y| y.date <=> x.date } categories.push( category ) end return categories end # Extends Site to have an field that gives you a map of posts by year and category. def postsbyyear # Create a tree of the posts by year and then month tree = {} self.posts.each do |post| year = post.date.year month = post.date.month if tree[year] == nil tree[year] = { "number" => year, "count" => 0, "months" => {} } end if tree[year]["months"][month] == nil tree[year]["months"][month] = { "number" => month, "name" => Date::MONTHNAMES[month], "count" => 0, "posts" => [] } end tree[year]["months"][month]["posts"] << post end # Turn the tree into sorted arrays, so it is easier to interpret # in liquid years = tree.values.sort { |x, y| y["number"] <=> x["number"] } # Calculate counts of posts and sort each of the months as well years.each do |year| year["months"] = year["months"].values.sort { |x, y| y["number"] <=> x["number"] } year["months"].each do |month| month["count"] = month["posts"].size month["posts"] = month["posts"].sort {|x,y| y.date <=> x.date } end sum = 0 year["months"].each {|month| sum += month["count"] } year["count"] = sum end return years end # Redefine site_payload to include our posts by year. This is ugly # but I don't know how else to do this without changing the jekyll code # itself. #rubynoob def site_payload { "site" => self.config.merge({ "time" => self.time, "posts" => self.posts.sort { |a,b| b <=> a }, "pages" => self.pages, "html_pages" => self.pages.reject { |page| !page.html? }, "categories" => post_attr_hash('categories'), "tags" => post_attr_hash('tags'), "postsbyyear" => self.postsbyyear, "postsbycategory" => self.postsbycategory }) } end end end

With the resulting pages being:

--- layout: default title: Posts by date --- <h1>{{ page.title }}</h1> {% for year in site.postsbyyear %} {% for month in year.months %} <h2>{{ month.name }} {{ year.number }}</h2> <ul class="clickList"> {% for post in month.posts %} <li><a href="{{ post.url }}">{{ post.title }} <span class="date">- {{ post.date | date: "%B %d %Y" }}</span></a></li> {% endfor %} </ul> {% endfor %} {% endfor %}

Finalizing it

Having all my posts already in Markdown, finalization was as simple as installing the rdiscount gem, updating the headers on my posts, running jekyll and uploading the finished _site directory.

Now to work on posting more often.

~Colin

Converting my Blog to Jekyll

Jekyll?

Customization

Finalizing it

Previous post ~ Next post