Using Live Reload with Jekyll

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

UPDATE: As pointed out in other answers, LiveReload is built into Jekyll 3.7+.

jekyll serve --livereload

---

For older versions:

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>

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.