Introduction

I have been using Jekyll for this site for more than two years. Jekyll is a great tool for static site creation, and the Jekyll sites can be hosted on Github.

I had one tiny problem I have to use jekyll serve --watch and reload the page mannually. This is not a show stopper but it helps when the page reloads automatically. So in search for the solution I stumble up on Creating GitHub Pages With Jekyll & LiveReload.

Using Creating GitHub Pages With Jekyll & LiveReload as my starting point I added some improvements. In the original post there is a need for livereload browser plugin, so I want to eliminate this dependency.

Pre-Requisites

  1. Node and npm
    • There are multiple ways to install Node and npm, my preffered way is nvm.
  2. Jekyll

Steps

Most of the steps are same as the original post, only change is the Gruntfile.js. For convinence I will lists those steps also.

1. New jekyll site

To create a new jekyll site use jekyll new <folder name>.

$ jekyll new .
New jekyll site installed in .

2. Grunt plugins (Node packages)

Create a file named package.json to add our grunt modules. The file content should be as follows,

{
  "name": "sitename",
  "version": "0.0.1",
  "private": "true",
  "devDependencies": {
    "grunt": "^1.0.1",
    "grunt-browser-sync": "^2.2.0",
    "grunt-contrib-watch": "^1.0.0",
    "grunt-shell": "^1.3.1"
  }
}

3. Gruntfile.js

Create a file named Gruntfile.js with following content.

module.exports = function (grunt) {

    var log = function (err, stdout, stderr, cb) {
        if(stdout) {
            grunt.log.writeln(stdout);
        }
        if(stderr) {
            grunt.log.error(stderr);
        }
        cb();
    };

    grunt.initConfig({
        shell: {
            jekyllClean: {
                command: 'jekyll clean',
                options: {
                    callback: log
                }
            },
            jekyllBuild: {
                command: 'jekyll build --draft --incremental JEKYLL_ENV=dev',
                options: {
                    callback: log
                }
            }
        },
        watch: {
            posts:{
                files:[
                    '_config.yml',
                    '*.html',
                    '*.md',
                    '_layouts/**',
                    '_posts/**',
                    '_drafts/**',
                    '_includes/**',
                    'assets/**/*.*',
                    '_sass/**/*.*',
                    'css/**/*.*'
                ],
                tasks: ['shell:jekyllBuild']
            }
        },
        browserSync: {
            dev: {
                bsFiles: {
                    src : [
                        '_site/**/*.*'
                    ]
                },
                options: {
                    watchTask: true,
                    server: './_site'
                }
            }
        }

    });

    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.loadNpmTasks('grunt-shell');
    grunt.loadNpmTasks('grunt-browser-sync');
    grunt.registerTask('build',['shell:jekyllBuild']);
    grunt.registerTask('default', ['build', 'browserSync', 'watch']);
    grunt.registerTask('clean',['shell:jekyllClean']);
};

4. Running the site

First step is installing the node modules for that use npm install then to run the site use grunt this will build the site and open it in your default browser.

$ grunt
Running "shell:jekyllClean" (shell) task
Configuration file: /Users/jekyll/newsite/_config.yml
Cleaning /Users/jekyll/newsite/_site...
                    done.
Removing /Users/jekyll/newsite/.jekyll-metadata...
                    done.


Running "shell:jekyllBuild" (shell) task
Configuration file: /Users/jekyll/newsite/_config.yml
            Source: /Users/jekyll/newsite
       Destination: /Users/jekyll/newsite/_site
 Incremental build: enabled
      Generating...
                    done in 1.343 seconds.
 Auto-regeneration: disabled. Use --watch to enable.

 Running "browserSync:dev" (browserSync) task
 [BS] Access URLs:
  --------------------------------------
        Local: http://localhost:3000
     External: http://10.38.220.177:3000
  --------------------------------------
           UI: http://localhost:3001
  UI External: http://10.38.220.177:3001
  --------------------------------------
 [BS] Serving files from: ./_site
 [BS] Watching files...

 Running "watch" task
 Waiting...

When ever there is a change in a file the change will reflect in the browser.

Credits.

Creating GitHub Pages With Jekyll & LiveReload.