使用Jekyll的Live Reload

我开始使用Jekyll静态网站生成器 ,我想使用Live Reload 。 我知道Jekyll有一个生成器和服务器命令,Live Reload可以运行各种编译器和自定义命令。 我如何configuration这些一起工作?

我发现最简单的方法是使用两个terminal窗口:一个用于jekyll serve --watch和一个用于guard

我尝试了Nobu提出的guard-jekyll-plus的方法,但是我有一堆错误。

Shumushin指出 ,Jekyll可以处理自动重build过程,只需使用jekyll serve --watch

现在让LiveReload在第二个terminal窗口中使用guard-livereload工作。 这与Jan Segre的回答基本相同,但没有guard-jekyll

我的Guardfile看起来像这样:

 guard 'livereload' do watch(/^_site/) end 

和我的Gemfile

 gem 'jekyll' gem 'guard' gem 'guard-livereload' 

注意 :您仍然需要在您的index.html页面中包含livereload脚本; 将guard-livereload和浏览器绑定在一起的“胶水”。

 <script src="http://localhost:35729/livereload.js"></script> 

对于jekyll 1.0+使用:

 jekyll serve --watch 

查看Jekyll:基本用法了解更多细节和选项。

有guard-livereload ,你可以使用guard-jekyll ,然后集中监视进程,一个例子是(我没有testing过):

  • 通过gem或捆绑器安装guard-jekyll
  • 安装guard-livereload,通过gem或捆绑器

初级警卫 – 杰基尔

 guard init jekyll 

添加到你的Guardfile:

 guard 'livereload' do watch(%r{_site/.+}) end 

您可以调整上述内容以更好地适应您的项目,并且您可能已经知道必须在页面上包含livereload脚本:

 <script src="http://localhost:35729/livereload.js"></script> 

哦,并开始整个看着一塌糊涂:

 guard 

更新:这不再适用于最新版本的Jekyll

 cd your/site/folder jekyll --server --auto 

这篇文章解释了一个更清洁的方法 – 与Jekyllbuild立LiveReload

的Gemfile:

 gem 'jekyll' gem 'guard' gem 'guard-jekyll-plus' gem 'guard-livereload' 

Guardfile:

 guard 'jekyll-plus', :serve => true do watch /.*/ ignore /^_site/ end guard 'livereload' do watch /.*/ end 

安装任何LiveReload浏览器扩展 。 然后跑guard

我写了一个叫做Hawkins的Jekyll插件,它将LiveReload整合到Jekyll的watch过程中。 它与Jekyll 3.1和以上的作品。

只需添加

 group :jekyll_plugins do gem 'hawkins' end 

到您的Gemfile(然后bundle install一个bundle install )。 从那里你可以运行jekyll liveserve 。 霍金斯将修改你的页面的head以包含LiveReload的必要组件,当Jekyll检测到页面变化时,霍金斯将通过WebSockets将消息推送到你的浏览器。 请注意,您将需要一个支持WebSockets的浏览器。 对于非常快的重新加载,您可以使用Jekyll的新的--incremental选项,只会重新生成更改的页面。

通常在您的站点文件夹中运行jekyll:

 cd your/site/folder jekyll 

默认情况下,Jekyll _site在里面生成一个名为_site的文件夹( your/site/folder/_site )。

告诉LiveReload观看_site文件夹。

我今天刚刚开始使用GitHub Pages,并希望能够使用Jekyll进行实时重新加载。 得到它的工作和写我的第一篇文章创buildGitHub页与Jekyll和LiveReload 。

它使用Grunt的grunt-contrib-watch插件而不是Jekyll的serve命令 – 对我很好。 希望它也适用于你。

你可以使用jekyll serve -w ,我喜欢懒惰的选项。