Add live reloading to Jekyll with Gulp and Browsersync

Live reloading is a very useful feature and it’s very popular in web development, but why don’t use it for writing blog articles and seeing changes in the real time?

I use Jekyll for this blog, and I already familiar with Gulp and Browsersync, so I decided to use them.

First of all, init a new package and install all dependencies:

npm init
sudo npm install -g gulp
npm install --save-dev gulp-shell lodash gulp browser-sync

And create a gulpfile.js with:

var gulp = require('gulp');
var shell = require('gulp-shell');
var browserSync = require('browser-sync').create();

// Task for building blog when something changed:
gulp.task('build', shell.task(['bundle exec jekyll serve']));
// If you don't use bundle:
// gulp.task('build', shell.task(['jekyll serve']));
// If you use  Windows Subsystem for Linux (thanks @SamuliAlajarvela):
// gulp.task('build', shell.task(['bundle exec jekyll serve --force_polling']));

// Task for serving blog with Browsersync
gulp.task('serve', function () {
    browserSync.init({server: {baseDir: '_site/'}});
    // Reloads page when some of the already built files changed:
    gulp.watch('_site/**/*.*').on('change', browserSync.reload);
});

gulp.task('default', ['build', 'serve']);

Then add created files and folders to Jekyll exclude, otherwise gulp will found more than one task with the same name. In _config.yml:

exclude: [node_modules, gulpfile.js]

And that’s all! For running it:

gulp

In action: