电脑本地运行 Jekyll 时让浏览器实时预览构建结果(修改文件自动刷新)

一般在修改内容或者主题模板(layout)时会在电脑本地运行 Jekyll 服务命令: bundle exec jekyll server。修改后就可以在浏览器打开http://localhost:4000/查看我们的修改效果,如果有问题就及时修正,而不要提交到 github 或者其他静态网站托管服务后反复提交。

但是直接使用 server 命令会一个问题,就是你每次修改后需要手动去刷新浏览器呈现的本地 Jekyll 站点,修改次数多了刷新也很累。以前会搞web前端的一般都会有一些第三方工具可以实现实时刷新和预览。但是实际上 Jekyll 不用这么麻烦,只要在运行服务命令时在后面带上 --livereload 参数即可,完整的终端命令如下:

bundle exec jekyll serve --livereload

发现带上--livereload参数还有个好处,之前手动刷新或者搭配 browser-sync 实现自动刷新都会有一个问题:刷新以后不是最新构建的内容,需要刷新多次。而使用--livereload就不会有这个问题,每次自动刷新呈现的都是你修改 Jekyll 源文件后的内容。

细心的小伙伴可能会发现,前面用的是 server 而这里用的是 serve,其实 Jekyll 兼容性优化的特别好,这两个词都可以正常运行 Jekyll 服务。

Relay Tips: 一极乐https://yijile.com/log/476/