Grunt Watch and Livereload (Using BrowserSync) in Jekyll
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
- Node and npm
- There are multiple ways to install Node and npm, my preffered way is nvm.
- 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.
- Anaconda Proxy Repository in Nexus OSS 3
- Node Command Line Interface Tool in TypeScript.
- Continuous Deployment for Jekyll using Bitbucket Pipeline to deploy in Github
- Grunt Watch and Livereload (Using BrowserSync) in Jekyll
- Java Thick Client with Kerberos for RESTful Service
- Install Gradle in Cloud9 IDE
- Localhost Authentication for Spring Kerberos
- JasperReport with Gradle
- Jasper Reports Font Extension
- JDK Folder from Installation EXE