One of the features that I’ve grown quite fond in Middleman is their LiveReload Extension. All one needs to do is add
activate :livereload to the
config.rb file and Middleman will automatically reload the browser when a file change is detected – it’s really slick!
Unfortunately, LiveReload is not available as an out-of-the-box feature for Jekyll. However, the good news is that the same feature can be implemented by using the
guard-livereload gem in combination with some simple configuration.
Bundler & Gemfile Setup
We start out by ensuring that a
Gemfile exists in the Jekyll project’s root directory. Run
bundle init to create the Gemfile, open it in an editor, and then add the following gems…
gem 'jekyll' gem 'guard' gem 'guard-jekyll-plus' gem 'guard-livereload'
Install the gems via Bundler and try building your site using the commands below…
$ bundler install $ jekyll build
It’s very possible that an error will occur after running these commands – don’t worry!
- The last line of the error should look like this:
Missing dependency: xxxxxxxxx.
- Add the missing dependency to the
Gemfileand repeat the last two commands.
- Continue these steps until your site builds successfully.
guard 'jekyll-plus', :serve => true do watch /.*/ ignore /^_site/ end guard 'livereload' do watch /.*/ end
Lastly you’ll need to download and install the Live Reload Extension for your browser – Chrome, Firefox and Safari are supported. This extension automatically refreshes your browser when a change is detected.
:serve => true specified in the
jekyll-plus guard options we can now start the Jekyll Web Server + LiveReload by using one simple command…
guard is executed some output will appear that looks something like this…
Configuration file: _config.yml 22:46:55 - INFO - Guard is using to send notifications. 22:46:55 - INFO - Jekyll building... Server address: http://0.0.0.0:4000 Server running... press ctrl-c to stop. 22:46:56 - INFO - Jekyll build complete ./ → _site 22:46:56 - INFO - Jekyll watching and serving at 0.0.0.0:4000/ 22:46:56 - INFO - LiveReload is waiting for a browser to connect. 22:46:56 - INFO - Guard is now watching at '/Users/daniel/projects/my-blog'  guard(main)>
Now, switch to the browser, make sure the LiveReload extension is turned on, and navigate to a blog post. If everything is configured correctly the line below will appear in the terminal…
22:46:58 - INFO - Browser connected.
Open up the blog post in an editor, modify it and save the changes. When you switch back to the browser you should find that the page has automatically reloaded.
This post was written for, and tested under, the following technologies…
- Jekyll (1.4.3)
- Guard (1.8.3)
- Guard-Jekyll-Plus (1.4.10)
- Guard-LiveReload (1.4.0)
- Bundler (1.3.5)
- Ruby (1.9.3)
Since implementing Guard-LiveReload in Jekyll I’ve found the process of writing and editing blog posts to be a much more enjoyable experience.
If you’ve found the post useful, or run into any unexpected issues, please feel free to contact me or leave a comment below.