As you may have noticed, the website looks different to how it was previously. I decided it was time for a refresh and I wanted to make the design a little more interesting.

While Jekyllexternal link & Githubexternal link pages use SASSexternal link the Bootstrap theme I settled for uses LESSexternal link . This meant that I needed to compile all of my CSS outside of Jekyll. Most of the articles I found say use either Gulpexternal link or Gruntexternal link , looking at the syntax of the two I preferred Grunt as it didn’t look like code.

Installation was straight forward enough;

brew install node
npm install -g grunt-cli

So now what? I needed something which would do the following …

  1. Compile the LESS files
  2. Combine all of the CSS files into one
  3. Minify the resulting CSS files
  4. Run Jekyll to build the files

After a lot of trial and error I managed to get all of the above plus the ability to have the browser automatically refresh when I change a file, which was nice 😄

You can see what happens when I run grunt server or grunt css in the following asciicastexternal link  ….

Grunt Exampleexternal link

My configuration currently looks like ….


 “name”: “mediaglasses”,
 “version”: “0.0.1”,
 “description”: “The Media Glasses Jekyll site”,
 “author”: “Russ McKendrick <[email protected]>”,
 “homepage”: “",
 “license”: “”,
 “devDependencies”: {
 “grunt”: “~0.4.5”,
 “grunt-contrib-concat”: “*”,
 “grunt-contrib-cssmin” : “*”,
 “grunt-contrib-watch” : “*”,
 “grunt-contrib-less”: “*”,
 “grunt-jekyll”: “*”,
 “grunt-contrib-connect”: “*”,
 “load-grunt-tasks”: “*”


module.exports = function(grunt) {
 pkg: grunt.file.readJSON(‘package.json’),

less: {
 development: {
 options: {
 compress: true,
 yuicompress: true,
 optimization: 2
 files: {
 “_css/main.css”: “_less/main.less”
 concat: {
 css: {
 src: [
 dest: ‘css/main.css’
 cssmin: {
 css: {
 src: ‘css/main.css’,
 dest: ‘css/main.min.css’
 jekyll: {
 options: { 
 src: ‘.’
 dist: {
 options: {
 dest: ‘./_site’,
 config: ‘_config-dev.yml’
 watch: {
 options: {
 livereload: true,
 css: {
 files: [‘_css/*’, ‘_less/*’],
 tasks: [‘less’, ‘concat:css’, ‘cssmin:css’]
 html: {
 files: [‘*.html’, ‘_includes/*.html’, ‘_layouts/*.html’, ‘_posts/*’],
 tasks: [‘jekyll’],
 options: {
 spawn: false,
 connect: {
 server: {
 options: {
 port: 8000,
 base: ‘./_site’

grunt.registerTask(‘default’, [‘less’, ‘concat:css’, ‘cssmin:css’, ‘jekyll’]);
grunt.registerTask(‘css’, [‘less’, ‘concat:css’, ‘cssmin:css’]);
grunt.registerTask(‘server’, [‘connect’, ‘watch’]);

The following posts helped me get to where I am at the moment;

I plan on adding a few more options to optimise the images and also compile the Javascript into something a little more discrete, eventually you can read it here.