Using Live Reload with Jekyll
RubyJekyllRuby Problem Overview
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?
Ruby Solutions
Solution 1 - Ruby
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
.
Solution 2 - Ruby
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>
Solution 3 - Ruby
Solution 4 - Ruby
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
Solution 5 - Ruby
UPDATE: this no longer works with the latest version of Jekyll
cd your/site/folder
jekyll --server --auto
Solution 6 - Ruby
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
.
Solution 7 - Ruby
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.
Solution 8 - Ruby
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.
Solution 9 - Ruby
This command will open your website in the browser and uses jekyll built-in livereload server.
bundle exec jekyll serve -l -o
You need a latest jekyll version.
Solution 10 - Ruby
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.
Solution 11 - Ruby
You can use just jekyll serve -w
, an option I prefer as I am lazy.
Solution 12 - Ruby
For Live Reload, Remove Jekyll Admin from Gemfile in the root directory of your project and it works like charm.
Solution 13 - Ruby
If you're running it frequently, the Repla macOS app makes it easy to startup Jekyll so it automatically refreshes. After Repla is installed, you run it from the Jekyll blog's root directory and pass it the jekyll serve
command. For example:
repla server "bundle exec jekyll serve --watch --drafts" -r "...done"
Repla will be configured to refresh each time ...done
is printed in the console, which Jekyll prints when it finishes compiling your site.
Repla runs the Jekyll server process in a split below a browser split showing your site:
After Jekyll is running in Repla, you can also save the configuration to a file with ⌘S
, shut it down by closing the window, and run it again just by double-clicking the file. In other words, you can start your Jekyll blog again next time just by opening the file, without involving the terminal at all.
Disclosure: I maintain the Repla app.