Search code examples
livereloadhexo

How to use hexo server --draft and Livereload

I am writing draft blog posts using hexo. I am running the hexo server as follows:

hexo server --draft

This watches for changes in the draft folder and generates the draft posts which can be viewed at http://0.0.0.0:4000

The problem is I can't work out how to use live-reload while writing drafts.

With livereload I call

live-reload --port 9091 public/

And use use the javascript implementation with the browser

<script type="text/javascript" src="//localhost:9091"></script>

I can see why this doesn't work, live-reload is looking for changes to the public folder. With the server running in draft mode, I don't know what folder the html generated drafts are being stored in. I've searched my project structure and can't seem to see anything obvious. Any ideas?

Solution

  • Hexo can offer live-reload-like functionality via the'Browsersync-based' plugin, 'hexo-browsersync'.

    There is actually also a hexo-livereload plugin, but the net, and hexo-browsersync's NPMJS rating, seem to favour the Browsersync Hexo plugin.

    Christopher Martin's blog post 'Getting Started with the Hexo Blogging Framework', outlines the plugin's installation and usage, as well as many other helpful tips:

    To install the hexo-browsersync plugin:

    $ npm install hexo-browsersync --save
    $ hexo server --draft --open #restart the server

    This might possibly suit the OP's original question better than the accepted answer.