Using Grunt To Build A Jekyll (Gh-pages) site

For those unaware, Github.com offers the ability the host a site based on a repo. You can create a gh-pages branch on your repo that will get transformed via Jekyll and served, free of charge.

I got pretty excited about it when I found out, since I was having issues getting my personal site up and running with a regular hosting company. I also hate paying for things.

Since I wanted to use SASS for my site, this presented a bit of a problem with building the site. So when you have a Jekyll site, Jekyll takes your code and parses through it, transforming it into the code that’s actually served.

This means that you have more than one build step that needs to be run. You have a build step for preprocessing css, minifying JS, etc, and you have the Jekyll step.

The best way I’ve found to get grunt to handle this for me was to install the grunt-contrib-jekyll task, along with grunt-contrib-compass (my runner for processing Sass files.)

Then, in my watch task, I tell grunt to run my compass task followed by my jekyll task whenever I make changes. This also allows me to use live reload.

Here is a gist with my Gruntfile.