Jekyll auto reload client side?

Question

Here's a question about Jekyll auto reload, but it's only for "reloading" on the file generation side of things.

I also want my browser to automatically refresh the page after I update a Jekyll file, just like e.g. Meteor (out of the box) and DocPad (docpad install livereload). How can I do live reloading with Jekyll?

Answer 1

The other answers are outdated since PR #5142 was merged to master.

Invoke using jekyll serve --livereload.

Answer 2

Introduction

I've reused the old but efficient shakyShane/jekyll-gulp-sass-browser-sync code.

As Jekyll now includes native sass/scss processing, I've only left commands necessary to use browsersync in a Gulp task

Prerequisits

You need to have Jekyll, Node and Npm installed.

NB: This is only tested on Ubuntu 14.04. Apple and Windows user may have to adapt this howto or maybe not, constructive feedback is welcome.

Jekyll

This browser sync install can be made on existing Jekyll sources.

You can also start from a new source : jekyll new folderName && cd folderName. This creates a new jekyll and goes in the working folder folderName.

Nodes modules

In order to install necessary node modules, create a package.json at the root of your working folder.

{
  "devDependencies": {
    "browser-sync": "^2.2.0",
    "gulp": "^3.7"
  }
}

Install dependencies with : npm install from your working folder (sudo npm install if it didn't work)

Gulp setup

Create a gulpfile.js at the root of your working folder :

var gulp        = require('gulp');
var browserSync = require('browser-sync');
var cp          = require('child_process');

var messages = {
    jekyllBuild: '<span style="color: grey">Running:</span> $ jekyll build'
};

/**
 * Build the Jekyll Site
 */
gulp.task('jekyll-build', function (done) {
    browserSync.notify(messages.jekyllBuild);
    return cp.spawn('jekyll', ['build'], {stdio: 'inherit'})
        .on('close', done);
});

/**
 * Rebuild Jekyll & do page reload
 */
gulp.task('jekyll-rebuild', ['jekyll-build'], function () {
    browserSync.reload();
});

/**
 * Wait for jekyll-build, then launch the Server
 */
gulp.task('browser-sync', ['jekyll-build'], function() {
    browserSync({
        server: {
            baseDir: '_site'
        }
    });
});

/**
 * Watch html/md files, run jekyll & reload BrowserSync
 * if you add folder for pages, collection or datas, add them to this list
 */
gulp.task('watch', function () {
    gulp.watch(['./*', '_layouts/*', '_includes/*', '_posts/*', '_sass/*', 'css/*'], ['jekyll-rebuild']);
});

/**
 * Default task, running just `gulp` will compile the sass,
 * compile the jekyll site, launch BrowserSync & watch files.
 */
gulp.task('default', ['browser-sync', 'watch']);

Now just run gulp at the root of your working folder, it will start a server, load the page in your default browser, and each time you update a Jekyll file, it fires a jekyll build and then an automatic browser reload. Note: Depending on Jekyll build time, it can take a few second to reload the browser.

For more information take a look at Browsersync.

Note to censors (see answer #2)

That's what I call a constructive action. I run a business and I do what I can for the community. Sometimes I have only a little time to give, but I give it in a constructive way, trying to find solutions for others, not trolling the interwooz! trying to demonstrate that I can be evil. You're part of the system, and you make the evil side of the system, cutting knowledge because you think you own the truth. (oups nearly a Godwin point for me)

My answer #2 will still be ok in two year, this one will be obsolete in one year. Module version, node.js dying in favor of io.js and so on.

And yes stupidity is really stackoverflowing me !

Answer 3

You can give a try to browsersync

Edit: This answer is a copy of my previous answer, deleted by Eran, martin clayton and Soner Gönül on 20th feb.

Here is my point of view on this :

Some SO sensors think that my previous answer was so obviously useless that they decided to close it. Unbelievable ! They just want to make their point of view prevail, even if they are destructing knowledge.

I gave a link to browsersync.io, thinking that it's useless to copy any example code because the up to date documentation is on browsersync.io.

The link-only answer argument is ok when you talk about a link to a personal blog. A link to a software webpage is supposed to be durable, mainly if it's a wide adopted one.

My answer was useful. Only a little, maybe, but useful. And I think that a clever reaction can be to edit and complete this answer not to close it, just because you feel empowered.