Jekyll, Bower & Grunt
website programming grunt jekyll
This website is powered by jekyll, an excellent static website generator. While I like jekyll quite a bit, I found my workflow for generating and minifying the stylesheets quite suboptimal. So far I used a Rakefile for automating these tasks, which I recently replaced in favor of Grunt. This blog post describes my setup.
NPM and Bower
First we need to install npm. On Mac OS X I achieved this
homebrew install npm. NPM allows us to install the
required packages without much trouble. Add the following lines to a
Afterwards install the packages by running
npm install, this should
download all the required files to a folder
After installing the required binaries, we need to specify which CSS and JS
libraries we are using. My website makes use of jQuery and
Bootstrap. Instead of manually
installing these dependencies, I use Bower to
install them. This can be achieved by adding the following
bower.json file to the project directory.
bower install then installs the two packages to
Similarly to a Makefile or Rakefile, Grunt allows us to define a couple of tasks
and run them from the shell. In Grunt the tasks are defined in a
Gruntfile.js, mine looks as follows.
grunt on the commandline will now perform the following
- Compile a less file in
assets/_less/application.lessthat makes use of the bootstrap less files and finally minify© it to
- Copy the jquery sources and minify them to
- Copy the bootstrap glyph icons to
exec:servetask that can be used for generating the website and hosting it locally.
exec:deploytask that copies your website to a remote server using rsync over ssh.
comments powered by Disqus