Cannot get livereload to work at all


#1

Hi,

Totally confused about what magic I have to do in order to get livereload to actually work on jekyll 3.8.3. For some reason this information is not included in the documentation?

I am using jekyll 3.8.3 on an Ubuntu 18.04 VPS (Linode). I understand that I need to make a _layouts directory and then a default layout file of some sort but it would be great to find an example that works to reference, as I am not sure what needs to be in this layout in order to accomplish livereloading. All I see online are brief descriptions about fixing this that simply say “you have to put a head tag in a layout file.” Fine, but how? And that needs to somehow be connected to index.html presumably? How does that need to happen?

A possibly related problem: if I run the following command jekyll serve --livereload --host=PUBLICIPADDRESS or jekyll serve --host=PUBLICIPADDRESS --livereload I cannot actually load the example page…it just times out, making troubleshooting livereloading pretty difficult.

Any suggestions would be appreciated,

Casey


#2

Livereload should work alright right out-of-the-box of running jekyll new blah_blah
But if you’re going to build source files from a clean slate, then here are some pointers:

  • Your base layout should contain a <head>...</head> tag.
    A very minimal base layout (say, _layouts/default.html) would look like:

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>Under construction</title>
      </head>
      <body>{{ content }}</body>
    </html>
    
  • Any page using the above layout will support livereloading. There is no need for an explicit index.html for livereloading to work. For example, create an about.md
    page with the following content:

    ---
    layout: default
    permalink: /about/
    ---
    
    Hello World!!
    

Now fire up the default preview-server with jekyll serve --livereload. Navigate your browser to http://localhost:4000/about/ and you should see Hello World!! rendered.

Make any change to your about.md and you should see you browser updating the rendered content automatically.


#3

Ah great, this all works now, thank you!

Casey