使用Live Reload和Jekyll

Question

我开始使用Jekyll静态站点生成器,我想使用Live Reload.我知道Jekyll有一个生成器和服务器命令,Live Reload可以运行各种编译器和自定义命令.如何配置这些协同工作？

Answer 1

对于jekyll 1.0+使用:

jekyll serve --watch

有关更多详细信息和选项,请参阅Jekyll:基本用法.

Answer 2

有护livereload您可以与使用护哲基尔和集中收看过程中与后卫,一个例子是(我没有测试):

• 通过gem或bundler安装guard-jekyll
• 通过gem或bundler安装guard-livereload

Init guard-jekyll

guard init jekyll

将其添加到Guardfile:

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

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

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

哦,并开始整个观看的混乱:

guard

Answer 3

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

我尝试了Nobu提出的guard-jekyll-plus方法,但我遇到了一堆错误.

正如shumushin指出的那样,Jekyll可以处理自动重建过程,您只需使用它即可启动它jekyll serve --watch

现在让LiveReload在第二个终端窗口中使用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>

Answer 4

LiveReload内置于Jekyll 3.7+.

jekyll serve --livereload

您还可以设置LiveReload的端口,延迟和忽略的文件.见jekyll help serve.

Answer 5

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

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

Answer 6

这篇文章解释了一种更清洁的方式 - 使用Jekyll设置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.

Answer 7

我写了一个名为Hawkins的Jekyll插件,它将LiveReload整合到了Jekyll watch进程中.它适用于Jekyll 3.1及更高版本.

只需添加

group :jekyll_plugins do
  gem 'hawkins'
end

到您的Gemfile(然后是a bundle install).从那里你可以跑jekyll liveserve.Hawkins将修改head页面的各个部分以包含LiveReload的必要组件,当Jekyll检测到页面更改时,Hawkins将通过WebSockets将消息推送到您的浏览器.请注意,您需要一个支持WebSockets的浏览器.对于非常快速的重新加载,您可以使用Jekyll的新--incremental选项,该选项仅重新生成已更改的页面.

Answer 8

此命令将在浏览器中打开您的网站并使用 jekyll 内置的 livereload 服务器。

bundle exec jekyll serve -l -o

您需要最新的 jekyll 版本。