Hop.ie needed a new look, and what better opportunity to learn a new approach.

I decided to try out Jekyll, a “blog aware, static site generator”, as well as GitHub Pages. GitHub pages allows you to serve static websites for free. It’s extremely fast and easy to deploy if you’re used to Git.

##Getting started with Jekyll

Jekyll is easy to install. Once installed, there are loads of examples available online to learn from. One of the most feature-rich is jekyll-bootstrap. It includes handy rake tasks for setting up pages and posts, configuration for multiple comment systems and RSS distributors, and even a templating system.

I prefer to start with something simpler (that I can understand) and add things on as needed. With that in mind, I found a great simple starter layout from Lukasz Maciak. I was able to refer to the features in jekyll-bootstap and grab various bits as I learned how it worked.

##Gotta have the SASS

While building the HTML templates without using HAML was ok, I couldn’t stick to plain old CSS. I installed Compass and set up a sass directory within my stylesheets directory. Compass is a fantastic way to quickly produce efficient and powerful CSS effects, and includes a range of amazing plugins. One of which I got to try out was Vertical Rhythm (thanks to @irishstu for the tip).

A decent tutorial video helped explain just what it was about, and it was a great help getting the text to behave.

##Migrating from Wordpress

There are a million plugins and ways to convert Wordpress posts into other formats, but I found this simple script most handy in quickly converting a bunch of posts at once. It took very little time to then tidy up the meta data in each and remove some of the Wordpress-specific resources.

##Speaking of Markdown

Markdown is just lovely, compared to the bloated Wordpress WYSIWYG I escaped. I did need a quick introduction to some of the syntax, and this one from Slekz was handy. More info is available from Daring Fireball. (You can also see the source of this post.)

##Deploying to GitHub Pages

Pages hosted on GitHub are generated through their own version of Jekyll. Because of this, no custom plugins will work. However if you wanted to pre-process your site locally and publish the static result, that would work too.

Setting up and deploying this site was straightforward. I set up a new repo called donovanh.github.com (Note: You’ll want to add _site/* to your .gitignore file), then applied the following to my local Jekyll version of the site.

$ git init
$ git add .
$ git commit -a -m "First commit"
$ git remote add origin git@github.com:donovanh/donovanh.github.com.git
$ git push -u origin master

After waiting a few minutes for the site to be created, the site was available at donovanh.github.com.

##See under the hood on GitHub

I’m sure there are a few more blogposts in the process used to create this site, and as I learn more I’ll continue to update.

In the meantime if you’d like to poke at the code behind this site, it’s on GitHub right now. Have fun, and if you feel like suggesting improvements I’d appreciate it.