Question

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

Answer 1

对于jekyll 1.0+使用：

jekyll serve --watch

有关详细信息和选项，请参阅Jekyll: Basic Usage。

Answer 2

guard-livereload可以使用guard-jekyll并使用guard集中观看流程，例如（我还没有测试过）：

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

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。

我尝试了guard-jekyll-plus approach suggested by Nobu，但我遇到了一堆错误。

作为shumushin pointed out，Jekyll可以处理自动重建过程，您只需使用jekyll serve --watch启动它

现在让LiveReload在第二个终端窗口中使用guard-livereload运行防护。这基本上与Jan Segre's answer相同，但没有guard-jekyll。

我的Guardfile看起来像这样：

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

我的Gemfile：

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

注意：您仍需要在index.html页面中添加livereload脚本;它是＆＃34;胶水＆＃34;将guard-livereload和浏览器绑定在一起。

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

Answer 4

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

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

Answer 5

这篇文章解释了一种更清洁的方式 - Setting Up LiveReload With Jekyll

的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

安装any LiveReload browser extension。然后运行guard。

Answer 6

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

只需添加

group :jekyll_plugins do
  gem 'hawkins'
end

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

Answer 7

LiveReload内置于Jekyll 3.7 +。

jekyll serve --livereload

您还可以设置LiveReload的端口，延迟和忽略的文件。请参阅jekyll help serve。

Answer 8

首先在您的站点文件夹中正常运行jekyll：

cd your/site/folder
jekyll

默认情况下，Jekyll会在其中生成一个名为_site的文件夹（your/site/folder/_site）。

告诉LiveReload观看_site文件夹。

Answer 9

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

bundle exec jekyll serve -l -o

您需要最新的jekyll版本。

Answer 10

我今天刚开始使用GitHub页面，希望能够使用Jekyll进行实时重新加载。得到它的工作＆amp;写了我在Creating GitHub Pages with Jekyll & LiveReload的第一篇文章。

它使用Grunt和grunt-contrib-watch插件而不是Jekyll的serve命令 - 对我来说效果很好。希望它也适合你。

Answer 11

你可以只使用jekyll serve -w，我喜欢这个选项，因为我很懒。

Answer 12

对于Live Reload，从项目根目录中的 Gemfile 中删除 Jekyll Admin ，它就像魅力一样。

Answer 13

如果您经常运行它，则Repla macOS应用程序可轻松启动Jekyll，从而自动刷新。安装Repla之后，您可以从Jekyll博客的根目录中运行它，并将其传递给jekyll serve命令。例如：

repla server "bundle exec jekyll serve --watch --drafts" -r "...done"

将Repla配置为每次在控制台中打印...done时刷新一次，Jekyll在完成站点编译时将打印该刷新。

Repla在显示您的网站的浏览器拆分下的拆分中运行Jekyll服务器进程：

Jekyll在Repla中运行之后，您还可以使用⌘S将配置保存到文件中，通过关闭窗口将其关闭，然后双击该文件再次运行。换句话说，您下次只需打开该文件即可再次启动您的Jekyll博客，而完全不需要终端。

披露：我维护Repla应用。

使用Live Reload和Jekyll

13 个答案: