方法一：用hexo-browsersync插件

按照官网的操作只有一行代码：

1
$ npm install hexo-browsersync --save

安装好后，不需任何设置，直接打开hexo s即可。

修改文章后，当你按下Ctrl+S保存时，页面自动刷新产生改变，同时右上角显示Connected to BrowserSync字样。

方法二：用hexo-livereload插件

1
$ npm install hexo-livereload --save

然后在站点的_config.yml中配置 livereload 的端口为35729：

1
2
livereload:
  port: 35729

即可。
经过测试，不设置端口也可以。

然后我们随便打开一篇博文，修改后保存，然后直接使用hexo s命令启动服务预览，在保持服务启动的状态下，再次修改该文章，记住要保存，然后刷新http://localhost:4000 即可看到变化。

优缺点

如果使用hexo-browsersync，在连接网络的情况下，启动服务hexo s能很快地打开；而在没有网络的情况下，输入hexo s后至少要过5分钟才能启动服务进行预览。但保存后不用刷新即可看到变化。
而hexo-livereload在无论离线还是有网时都能很快打开，但是保存后需要手动刷新才能看到变化。

另外，编辑主题的_config.yml可以实时预览。而编辑D:\hexo\_config.yml文件不能实时预览，需要重新生成后再预览：

1
hexo s -g

参考：