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?

score 53 · Answer 1 · answered Jan 28 '18 at 06:41

53

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.

answered Jan 28 '18 at 06:41

Bluu

5,226
4
29
34

score 35 · Accepted Answer · edited Feb 17 '21 at 15:09

35

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>

edited Feb 17 '21 at 15:09

Mario Olivio Flores

2,395
1
20
19

answered Apr 02 '15 at 20:19

aboy021

2,096
2
23
23

Simple and works. While using with [Pow](http://pow.cx), 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? – Rahul Thakur Jun 23 '15 at 10:02
I'm getting a `403 Forbidden`. Any idea? Using `bundle exec guard` – PascalVKooten Oct 02 '16 at 18:51
3

The `--livereload` parameter was introduced on Jekyll 3.70. From now on you just need to type: `jekyll s -l`. – bcfurtado Dec 25 '18 at 00:21

score 23 · Answer 3 · edited May 01 '14 at 17:29

23

For jekyll 1.0+ use:

jekyll serve --watch

See Jekyll: Basic Usage for more details and options.

edited May 01 '14 at 17:29

dgeske

616
4
11

answered May 16 '13 at 21:33

aleksey.tk

1,049
1
9
7

2

This question is relatively old compared to the latest improvements to Jekyll. Thanks for following up with an answer for newer versions. – Andrew May 17 '13 at 01:51
7

This doesn't notify LiveReload though, does it? – Sam Selikoff Mar 01 '14 at 16:28
LiveReload is not needed. Jekyll will reload the page automatically on changes to watched folders. – Seth Warburton May 13 '14 at 09:04
48

This is not correct. Jekyll will recompile everything, but it doesn't handle any live reloading/refreshing with the actual browser, unfortunately. – JCraine Jun 04 '14 at 15:01
12

Why is this answer up-voted so much? The question was asking about LiveReload not auto-regenerating through the `--watch` flag. – hal Jan 18 '15 at 01:30
2

I downvoted this answer; it *does not* answer the original question. – Per Lundberg Nov 06 '15 at 21:42
1

This is not the answer – James Parker Mar 17 '16 at 17:04

Jan Segre · Answer 4 · 2014-02-18T13:40:19.427

23

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

edited Feb 18 '14 at 13:40

answered Oct 04 '13 at 04:23

Jan Segre

574
5
12

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. – Andrew Oct 05 '13 at 06:04
There's an [option](https://github.com/guard/guard-livereload#options) to change the port, it can get messy sometimes always using the same port. – Jan Segre Oct 07 '13 at 22:51
Hey man, there's an extra paren at `livereload watch(%r{_site/.+)})`, should be `watch(%r{_site/.+})`. – Daryll Santos Feb 13 '14 at 00:39
inserting the `` is not so good as this pieces probably don't need to be committed to git. – zyxue Apr 21 '17 at 16:07
1

@zyxue that's true, though it's very reasonable to add some conditional to render it on the template, like `{{#dev}}{{/dev}}` – Jan Segre Apr 24 '17 at 19:02
I use ` {% if jekyll.environment != "production" %} {% endif %} ` to load it condictionally. – Fangxing Nov 22 '17 at 13:59
Why is this needed: `group :development do gem 'guard-livereload', '~> 2.5', require: false end` as seen [here](https://github.com/guard/guard-livereload)? – Timo Feb 10 '21 at 19:57

balexand · Answer 5 · 2014-11-26T22:59:23.417

15

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

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

edited Nov 26 '14 at 22:59

answered Dec 25 '11 at 04:50

balexand

9,549
7
41
36

4

cf. @shumushin's answer for recent versions of Jekyll. – Mick F May 20 '13 at 12:35
1

Question is about LiveReload, this does not address the question. – MetaSkills Sep 23 '14 at 13:12

score 13 · Answer 6 · answered Mar 26 '14 at 01:01

13

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.

answered Mar 26 '14 at 01:01

Nobu

9,965
4
40
47

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) – Blake Miller Nov 25 '14 at 02:17
1

I had issues with this on Windows, as it lacks fork() – edallme Sep 30 '16 at 20:36

Alex · Answer 7 · 2016-10-10T20:24:50.820

11

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.

edited Oct 10 '16 at 20:24

answered Mar 28 '16 at 15:11

Alex

111
1
6

I have checked and Hawkins is only compatible with Jekyll 3.1 and up. – Alex May 10 '16 at 19:32
2

Fantastic, no stuff with this guard etc, indeed just works. Might want to add "bundle init" but people could just figure that out :-) – PascalVKooten Oct 02 '16 at 18:54

score 5 · Answer 8 · answered Jul 03 '20 at 17:16

5

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.

answered Jul 03 '20 at 17:16

M. Inam

301
3
7

score 4 · Answer 9 · answered Dec 09 '11 at 08:19

4

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.

answered Dec 09 '11 at 08:19

kikito

51,734
32
149
189

will the `jekyll` command watch for file changes and regenerate them automatically? – Andrew Dec 12 '11 at 17:46
4

Yes, if the "auto" variable is set to true in the config file or the command line. See it here: https://github.com/mojombo/jekyll/wiki/Configuration – kikito Dec 22 '11 at 18:22
1

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. – zelk Dec 25 '12 at 11:31
This is the easiest way to make this happen - you don't need to mess with guard files at all – Neal Jan 10 '18 at 15:46

score 1 · Answer 10 · answered Jan 25 '14 at 14:46

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.

Seth Warburton · Answer 11 · 2014-05-13T09:11:50.077

0

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

edited May 13 '14 at 09:11

answered May 13 '14 at 09:06

Seth Warburton

2,234
1
16
17

score 0 · Answer 12 · answered Feb 16 '18 at 05:46

0

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

answered Feb 16 '18 at 05:46

Yash Agrawal

51
2

robenkleene · Answer 13 · 2020-03-21T21:57:59.803

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.

Using Live Reload with Jekyll

13 Answers13

For older versions:

Linked