Using Live Reload with Jekyll

Question

I start with the Jekyll static site generator and I would like to use Live Reload . I know that Jekyll has generator and server commands, and Live Reload can run various compilers and custom commands. How to configure them for collaboration?

Answer 1

The simplest approach I found is to use two terminal windows: one for jekyll serve --watch and one for guard .

I tried the guard-jekyll-plus approach proposed by Nobu , but I had a lot of errors.

As Shumushin pointed out , Jekyll can handle the automatic rebuilding process, you just start it with jekyll serve --watch

Now, to start the LiveReload operating mode with the guard-livereload function in the second terminal window. This is basically the same as Jan Segre's answer , but without guard-jekyll .

My Guardfile as follows:

 guard 'livereload' do watch(/^_site/) end 

And my Gemfile :

 gem 'jekyll' gem 'guard' gem 'guard-livereload' 

Note You still need to enable the script download function on the index.html page; this is the “glue” that ties guard-livereload and the browser together.

 <script src="http://localhost:35729/livereload.js"></script> 

Answer 2

For jekyll 1.0+ use:

 jekyll serve --watch 

See Jekyll: Main Use for more details.

Answer 3

Here's guard-livereload , which you can use with guard-jekyll and centralize the process of viewing guard , an example could be (I haven't tested it):

• Install a protective sheath, either through a gem or using a bundle
• Install a protective shroud, either through the pearl or in the scope of delivery

Init guard-jekyll

 guard init jekyll 

Add this to your Guard file:

 guard 'livereload' do watch(%r{_site/.+}) end 

You can adapt the above to better suit your project, and you probably already know that you need to include a script on your page:

 <script src="http://localhost:35729/livereload.js"></script> 

Oh, and start the whole looking mess:

 guard 

Answer 4

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

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

Answer 5

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 .

Answer 6

I wrote a Jekyll plugin called Hawkins that includes LiveReload in the Jekyll watch process. It works with Jekyll 3.1 and higher.

Just add

 group :jekyll_plugins do gem 'hawkins' end 

into your Gemfile (and then a bundle install ). From there you can run jekyll liveserve . Hawkins will change the head sections of your pages to include the necessary components for LiveReload, and when Jekyll detects a page change, Hawkins will push the message to your browser via WebSockets. Please note that you will need a browser that supports WebSockets . For a very fast reload, you can use the new function --incremental Jekyll, which will only restore modified pages.

Answer 7

Start by launching jekyll, usually in your site’s folder:

 cd your/site/folder jekyll 

By default, Jekyll creates a folder inside it called _site ( your/site/folder/_site ).

Tell LiveReload to see what the _site folder is.

Answer 8

I just started using GitHub Pages today and wanted to be able to use live reboot with Jekyll. Got his job and wrote his first post on Creating GitHub Pages with Jekyll and LiveReload .

It uses Grunt with the grunt-contrib-watch plugin instead of the Jekyll serve command - works well for me. Hope this works for you too.

Answer 9

You can only use jekyll serve -w , which option I prefer as I am lazy.