This blog is built with Jekyll, a static site generator. That means that raw HTML files are generated and so no database is required like for a WordPress blog. That gives your website a considerable performance boost.

One of the other advantages of using Jekyll is that you can write your posts in your favorite text editor and then push your changes via GIT for deployment.

Before developping my new blog with Jekyll, I started with the HTML / CSS / Javascript slicing of my design. I used Sass with Compass in combination with Gulp.

For more information about Gulp and how it works, I recommend this article.

I made different Gulp tasks, one for CSS, another for Javascript and finally one for Jekyll and HTML.

The CSS task

I used this task for converting the SASS files and minify the generated CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
gulp.task('compass', function() {
    gulp.src(srcStylesheets + '*.scss')
        .pipe(compass({
            css     : distStylesheets,
            sass    : srcStylesheets,
            image   : distImages,
            logging : true
        }))
            .on('error', function(err) {
                console.log(err);
            })
        .pipe(minifyCSS())
        .pipe(gulp.dest(distStylesheets))
        .pipe(browserSync.reload({stream:true}));
});

The last “Gulp pipe” will reload the browser window when the CSS has been generated. The magic behind this is browserSync. This plugin will reload all your devices, no matter if its a desktop, tablet or smartphone.

BrowserSync makes your workflow faster by synchronising URLs, interactions and code changes across multiple devices. It’s wicked-fast and totally free.

You can read more about BrowserSync and how to install it on the blog of its developer.

The Javascript task

The Javascript Gulp task is similar to the CSS task:

1
2
3
4
5
6
7
8
9
10
gulp.task('js', function () {
    gulp.src([srcJavascripts + 'plugins.js', srcJavascripts + 'main.js'])
        .pipe(concat(pkg.name + '.js'))
        .pipe(gulp.dest(distJavascripts))
        .pipe(rename(pkg.name + '.min.js'))
        .pipe(uglify())
        .pipe(size())
        .pipe(gulp.dest(distJavascripts))
        .pipe(browserSync.reload({stream:true, once: true}));
});

This task will combine & minify all the Javascript files and reload the open browser(s) when a Javascript file changed.

The HTML & Jekyll task

And now the most interesting part: the HTML & Jekyll tasks. The HTML task will be triggered after Jekyll’s task to minify the generated HTML files:

1
2
3
4
5
6
gulp.task('html', ['jekyll'], function() {
    gulp.src([path.join(deploy, '*.html'),path.join(deploy, '*/*/*/*.html')]/*'*.html'*/)
        .pipe(htmlmin({collapseWhitespace: true}))
        .pipe(gulp.dest(deploy))
        .pipe(browserSync.reload({stream:true, once: true}));
});

The “Jekyll” task is based on multiple StackOverflow answers. It will run the build command of Jekyll.

1
2
3
4
5
6
7
8
gulp.task('jekyll', function (gulpCallBack){
    var spawn = require('child_process').spawn;
    var jekyll = spawn('jekyll', ['build'], {stdio: 'inherit'});

    jekyll.on('exit', function(code) {
        gulpCallBack(code === 0 ? null : 'ERROR: Jekyll process exited with code: '+code);
    });
});

Conclusion

Now I can update my blog and see the updates on all my connected devices immediately with one single “gulp” command. No need to worry about SASS compiling or Jekyll builds. Isn’t that easy?

Do you have suggestions on how I could improve those tasks? Your feedback is very welcome in the comment section below!