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?

Motherwell

Answer 1

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>

Huck

Simple and works. While using with Pow, I replaced jekyll serve -w with jekyll build -w. Though it gives a duplicate watched notice now, maybe because Pow is also watching for changes? – Rotunda

I'm getting a 403 Forbidden. Any idea? Using bundle exec guard – Westleigh

The --livereload parameter was introduced on Jekyll 3.70. From now on you just need to type: jekyll s -l. – Escharotic

Answer 2

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.

Hyoscyamine

Answer 3

For jekyll 1.0+ use:

jekyll serve --watch

See Jekyll: Basic Usage for more details and options.

Betteanne

This question is relatively old compared to the latest improvements to Jekyll. Thanks for following up with an answer for newer versions. – Motherwell

This doesn't notify LiveReload though, does it? – Chain

LiveReload is not needed. Jekyll will reload the page automatically on changes to watched folders. – Quagmire

This is not correct. Jekyll will recompile everything, but it doesn't handle any live reloading/refreshing with the actual browser, unfortunately. – Classicist

Why is this answer up-voted so much? The question was asking about LiveReload not auto-regenerating through the --watch flag. – Southwester

I downvoted this answer; it does not answer the original question. – Pragmatist

This is not the answer – Branson

Answer 4

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

Decamp

Cool, thanks! I tried this once before, but later realized I had another livereload server running that I didn't know about. I'll give it another try. – Motherwell

There's an option to change the port, it can get messy sometimes always using the same port. – Decamp

Hey man, there's an extra paren at livereload watch(%r{_site/.+)}), should be watch(%r{_site/.+}). – Antihero

inserting the <script src="http://localhost:35729/livereload.js"></script> is not so good as this pieces probably don't need to be committed to git. – Mayda

@Mayda that's true, though it's very reasonable to add some conditional to render it on the template, like {{#dev}}<script ...></script>{{/dev}} – Decamp

I use ` <!-- live reload --> {% if jekyll.environment != "production" %} <script src="localhost:35729/livereload.js"></script> {% endif %} ` to load it condictionally. – Shandashandee

Why is this needed: group :development do gem 'guard-livereload', '~> 2.5', require: false end as seen here? – Bannasch

Answer 5

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

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

Antediluvian

cf. @shumushin's answer for recent versions of Jekyll. – Ned

Question is about LiveReload, this does not address the question. – Allaallah

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.

Whiplash

This worked for me. kikito's, balexand's, shumushin's answers do not cause the browser to reload, and the accepted answer did not work for me (outdated, I suspect) – Rubbish

I had issues with this on Windows, as it lacks fork() – Flodden

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.

Treacherous

I have checked and Hawkins is only compatible with Jekyll 3.1 and up. – Treacherous

Fantastic, no stuff with this guard etc, indeed just works. Might want to add "bundle init" but people could just figure that out :-) – Westleigh

Answer 8

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.

Recruitment

Answer 9

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.

Fab

will the jekyll command watch for file changes and regenerate them automatically? – Motherwell

Yes, if the "auto" variable is set to true in the config file or the command line. See it here: github.com/mojombo/jekyll/wiki/Configuration – Fab

The purpose of LiveReload in this situation is to reload the page dynamically so you don't have to. It's still useful, you just don't happen to need half of LiveReload's features for jekyll's generators anyway. – Preparedness

This is the easiest way to make this happen - you don't need to mess with guard files at all – Lummox

Answer 10

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.

Nicosia

Answer 11

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

Quagmire

Answer 12

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

Manageable

Answer 13

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.

Glomerate