Using Live Reload with Jekyll
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?
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.
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>
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