Jekyll And Grunt BoilerplateMarch 10, 2015
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 home page, 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.
Here’s what I’m on:
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.
Open the folder, and open two command windows on the root of the project. On one, type
jekyll serve. You should see this:
On the other cmd, type
grunt. You should see this:
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.
Here’s what the folder structure looks like:
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.
It watches any changes, live reloads browsers synced across multiple devices proxying jekyll’s default
localhost:4000 server into browserSync’s default
It compiles Sass with Compass support and autoprefixes the minified output
It compresses and optimizes images coming from the
images/src folder to the
It syncs image deletion from the
It minifies all the html in the
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.