Using Live Reload with Jekyll

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>

Possible to run jekyll serve --livereload on two different directories with two different ports at the same time?

You need to set 2 different ports. One for Jekyll and second for LiveReload.

bundle exec jekyll serve --livereload --livereload-port 8080 --port 4001

You will see the options that interest you by calling the command jekyll help serve:

-P, --port [PORT]  Port to listen on
--livereload-port [PORT]  Port for LiveReload to listen on

How can I trigger a script when local jekyll file changes?

In short words, run Jekyll with the --livereload parameter.
The command will look like this:

bundle exec jekyll serve --livereload

For more information, call help command:

jekyll help serve

Here are the parameters that may be useful:

-l, --livereload   Use LiveReload to automatically refresh browsers
    --livereload-ignore ignore GLOB1[,GLOB2[,...]]  Files for LiveReload to ignore. Remember to quote the values so your shell won't expand them
    --livereload-min-delay [SECONDS]  Minimum reload delay
    --livereload-max-delay [SECONDS]  Maximum reload delay
    --livereload-port [PORT]  Port for LiveReload to listen on

You can of course combine options.

For example:
To run second project with Jekyll at the same time you need to set other port and another port for LiveReload.

bundle exec jekyll serve --livereload --livereload-port 8080 --port 4001

And now in your browser you can see the second project at http://localhost:4001/ or http://0.0.0.0:4001/

Jekyll livereload browser not connecting

I know this is old, but I was facing the same issue, so I thought I'd share the solution that worked for me.

You just need to add front matter to the top of your html file, that's two triple-dashed lines, so your html file should look like this:

---
---
<!DOCTYPE html>
<html lang="en">

Grunt, Live Reload with Jekyll Serve

Here is how I got this to work:

The problem is that both jekyll serve and grunt watch need to run in parallel. What I did was to create two grunt tasks and run them in two separate terminal windows.
I have the following setup:

a _src directory where I edit the raw source files
an asset directory where I have images and such
a build directory that gets populated by grunt and inside which jekyll is run

First, I run the grunt dev task. This taskfirst deletes the build directory, then copies the necessary source files and finally cds into my build directory and calls jekyll:

cd build && jekyll serve --livereload

This task is configured as follows:

grunt.registerTask(
  'assembledev',
  [
    'copy:src',
    'copy:assets'
  ]
);
grunt.registerTask(
  'dev',
  [
    'clean',
    'assembledev',
    'exec:serve'
  ]
);

Then, in a separate terminal, I run grunt watch. Watch is configured as follows:

watch {
  src: {
    files: ['{_src,assets}/**/*.{js,css,html,php}'],
    tasks: ['assembledev']
  }
}

Now, whenever I change a source file, the updated file gets copied to the build directory and then recognized by jekyll as a changed file.

The two terminal windows feel like a bit of a hack but that way, I can see the output of both grunt watch and jekyll serve. Also, I can easily quit either process with Ctrl+c.

In principle, you could get away with one terminal window by adding an & to the end of the jekyll serve command in order to run jekyll in the background (cd build && jekyll serve --livereload &) and run watch within the same grunt task like this:

grunt.registerTask(
  'dev',
  [
    'clean',
    'assembledev',
    'exec:servebg',
    'watch'
  ]
);

Jekyll auto reloading

As of version 3.7 run jekyll serve --livereload.

hot reload in jekyll not working

Jekyll auto-generation future(Using jekyll server) automatically change/modify the files on _site folder only, it does not refresh browser windows automatically, you have to use grunt for that. There are already many of NPM packages and Repo for that.

Using Live Reload with Jekyll