Valerio Pierbattista
Front end web developer

Jekyll And Grunt Boilerplate

March 10, 2015

jekyll and grunt boilerplate

Jekyll is great, and it gets even better with Grunt automating repetitive tasks. I’m assuming you already know what Jekyll and Grunt are. I’ve covered Grunt in a previous blog post so you may want to check that out before continuing, as we will use a very similar gruntfile. If you never used Jekyll before, I suggest you to read this great tutorial before starting. Jekyll is a static site generator, and it’s “blog aware”, this means it’s ready to manage posts, categories, excerpts and all you need to create and maintain a modern blog without having to deal with CMS installations, theme hacking and databases. You are in complete control here and you will have more time to focus on what really matters: your content.

In this boilerplate, I’ve merged a classic Jekyll website with the Grunt Boilerplate I use for my projects. What we are building here is a website with a homepage, an about page and a blog. Running two command windows, you’ll have Jekyll watching and building your _site, and Grunt doing stuff like compiling sass, autoprefixing css, browser syncing and a lot more.

Development environment

Here’s what I’m on:

OS: Windows 8.1
Ruby: Ruby 2.1.5 (x64) download
Ruby DevKit: DevKit-mingw64-64-4.7.2-20130224-1432-sfx.exe download
Jekyll: 2.5.3

Jekyll is not officially supported on Windows, so if you are on Windows you will have to follow the instructions on this website to have it working. I’ve encountered problems with Ruby 1.9.3 so I recently switched to Ruby 2.1.5 and everything works perfectly now. One thing you’ll probably have to do is follow the instructions on this post if you encounter problems with installing gems on your machine after switching to a newer version of Ruby.

Ok, you can now clone it from github.

The Boilerplate

Open the folder, and open two command windows on the root of the project. On one, type jekyll serve. You should see this:

terminal

On the other cmd, type grunt. You should see this:

terminal2

A browser window should have popped up and you should see the website whose source is in our _site folder. You should also see a notification that says “Connected to BrowserSync”. It’s on! We can now explore what it’s in our jekyll and grunt boilerplate.

Folder structure

Here’s what the folder structure looks like:

folderstructure

For clarity’s sake, I’ve kept the project as simple as I could. You can explore files and folders to get the idea of where is the Jekyll stuff: I kept all the default settings except for the blog section which I moved in a separate blog folder.

Gruntfile

It watches any changes, live reloads browsers synced across multiple devices proxying jekyll’s default localhost:4000 server into browserSync’s default localhost:3000
It compiles Sass with Compass support and autoprefixes the minified output
It compresses and optimizes images coming from the images/src folder to the images/dist and _site/images/dist folders
It syncs image deletion from the images/src
It concatenates javascript into a single minified production file
It minifies all the html in the _site folder

I decided not to use the grunt-jekyll task because it looks like it’s not maintained by the time I’m writing this, so I preferred to go the 2-cmd way. I won’t go deeper into the gruntfile.js because it’s practically identical to the one described here. Same thing about Jekyll because I’m assuming you already have some knowledge about it. The gruntfile may have some misused settings or redundancy, if you have any suggestion on how to make it better please comment down below.

Happy Jekylling!

Share this:

Back

Guest Posts

Recent Posts