LiveReload For Hexo

之前我在 Ruhoh 上使用 guard-livereload 来实现自动更新预览。这样，一旦我修改了网站中的内容，livereload 会立马检测到并且通知浏览器刷新页面，不需要自己手动按 F5 刷新了。完全符合本人热衷偷懒的口味。

迁移到 Hexo 后，我也希望能够用上这个功能。经过一番搜索，我发现在 node.js 平台要使用 Livereload 也非常容易。

方法一：使用 LiveReload

安装和使用

1. 首先是先安装 LiveReload 的 node.js 版本：

1

$ npm install -g node-livereload

2. 安装 livereload 的浏览器插件；

3. 完成后，到你的 Hexo 博客根目录下执行：附图 1 LiveReload

1

$ livereload -e ".md, .html, .png, .svg, .jpg, .gif, .css, .js, .json"

后面的一长串后缀名是 livereload 要监视的文件格式。一旦带有这类后缀名的文件内容发生变动，livereload 就会检测到，并向浏览器发出信号。

4. 最后一步是用浏览器预览你正在编辑的页面，并点击 LiveReload 的浏览器插件小图标。

大功告成。现在试试编辑你的 Markdown 源文件，保存一下。浏览器是不是就立即刷新了呢？

进一步偷懒

每次都要敲上面那串命令太繁琐。为了省事，可以把启动 hexo 服务器和 livereload 两条命令写成一个脚本，名为 hexo_run ，放在你的 bin 目录里。

1
2
3
4
5
6

#!/bin/bash

HEXO=<你的Hexo根目录地址>
cd $HEXO
hexo clean  # Clean cache
livereload -e ".md, .html, .png, .svg, .jpg, .gif, .css, .js, .json" | hexo server --debug

其中 $HEXO 是一个自定义的变量，用来保存你的 Hexo 根目录地址。

最后别忘了给 hexo_run 添加可执行权限：

1

$ sudo chmod +x hexo_run

方法二：使用 hexo-livereload

安装和使用

1. 先安装 hexo-liveReload：

1

$ npm install hexo-livereload --save

2. 安装 livereload 的浏览器插件；

之后像往常一样启动 hexo 的预览 hexo server ，这个插件就会自动启动。

配置端口

hexo-livereload 允许直接在 _config.yml 中配置 livereload 的端口，默认为 35729。如果没有遇到端口冲突，通常不必要对端口号进行设置。

1
2

livereload:
  port: 35729

两种方法对比

经过我的测试，我发现：

1. 第一种方案允许设定监测的文件类型，不过响应速度比较慢。问题出在那条 shell 命令：两个进程都是前台作业，可能存在抢夺资源的情况；
2. 第二种方案比较傻瓜，响应速度也比较快。因此推荐使用第二种方案。