Using Live Reload with Jekyll

Question

I'm getting started with Jekyll static site generator and I would like to use Live Reload with it. I know Jekyll has a generator and server commands, and Live Reload can run various compilers and custom commands. How do I configure these to work together?

Answer 1

The simplest approach I've found that works is to use two terminal windows: One for jekyll serve --watch and one for guard.

I tried the guard-jekyll-plus approach suggested by Nobu but I had a bunch of errors.

As shumushin pointed out, Jekyll can handle the automatic rebuilding process, you simply launch it using jekyll serve --watch

Now to get LiveReload working run guard with guard-livereload in a second terminal window. This is basically the same as Jan Segre's answer, but without guard-jekyll.

My Guardfile looks like this:

guard 'livereload' do
  watch(/^_site/)
end

And my Gemfile:

gem 'jekyll'
gem 'guard'
gem 'guard-livereload'

Note: You still need to include the livereload script in your index.html page; it is the "glue" that binds guard-livereload and the browser together.

<script src="http://localhost:35729/livereload.js"></script>

Answer 2

For jekyll 1.0+ use:

jekyll serve --watch

See Jekyll: Basic Usage for more details and options.

Answer 3

There's guard-livereload which you can use with guard-jekyll and centralize the watching process with guard, an example would be (I haven't tested it):

• Install guard-jekyll, either through gem or bundler
• Install guard-livereload, either through gem or bundler

Init guard-jekyll

guard init jekyll

Add this to your Guardfile:

guard 'livereload' do
  watch(%r{_site/.+})
end

You can adapt the above to suit better your project, and you probably already know you have to include the livereload script on your page:

<script src="http://localhost:35729/livereload.js"></script>

Oh, and to start the whole watching mess:

guard

Answer 4

LiveReload is built into Jekyll 3.7+.

jekyll serve --livereload

You can also set LiveReload's port, delay, and ignored files. See jekyll help serve.

Answer 5

UPDATE: this no longer works with the latest version of Jekyll

cd your/site/folder
jekyll --server --auto

Answer 6

This post explains a cleaner way - Setting Up LiveReload With Jekyll

Gemfile:

gem 'jekyll'
gem 'guard'
gem 'guard-jekyll-plus'
gem 'guard-livereload'

Guardfile:

guard 'jekyll-plus', :serve => true do
  watch /.*/
  ignore /^_site/
end

guard 'livereload' do
  watch /.*/
end

Install any LiveReload browser extension. Then run guard.

Answer 7

I wrote a Jekyll plugin called Hawkins that incorporates LiveReload into the Jekyll watch process. It works with Jekyll 3.1 and up.

Simply add

group :jekyll_plugins do
  gem 'hawkins'
end

to your Gemfile (and then a bundle install). From there you can run jekyll liveserve. Hawkins will modify the head sections of your pages to include the necessary components for LiveReload, and when Jekyll detects a page change, Hawkins will push a message to your browser via WebSockets. Please note that you will need a browser that supports WebSockets. For very fast reloads, you can use Jekyll's new --incremental option that will only regenerate the changed pages.

Answer 8

Start by running jekyll normally in your site folder:

cd your/site/folder
jekyll

By default Jekyll generates a folder called _site inside it (your/site/folder/_site).

Tell LiveReload to watch that _site folder.

Answer 9

I just started using GitHub Pages today, and wanted to be able to use live reload with Jekyll. Got it working & written my first post on Creating GitHub Pages with Jekyll & LiveReload.

It uses Grunt with the grunt-contrib-watch plugin instead of Jekyll's serve command - works well for me. Hope it works for you as well.

Answer 10

You can use just jekyll serve -w, an option I prefer as I am lazy.

Answer 11

For Live Reload, Remove Jekyll Admin from Gemfile in the root directory of your project and it works like charm.