我开始使用Jekyll 静态站点生成器，我想使用Live Reload。我知道 Jekyll 有一个生成器和服务器命令，Live Reload 可以运行各种编译器和自定义命令。如何配置这些以协同工作？
问问题
28551 次
13 回答
47
LiveReload 内置在 Jekyll 3.7+ 中。
jekyll serve --livereload
您还可以设置 LiveReload 的端口、延迟和忽略文件。见jekyll help serve。
于 2018-01-28T06:41:03.800 回答
30
更新：正如其他答案中所指出的，LiveReload 内置于 Jekyll 3.7+ 中。
jekyll serve --livereload
对于旧版本：
我发现最简单的方法是使用两个终端窗口：一个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>
于 2015-04-02T20:19:07.663 回答
23
于 2013-05-16T21:33:39.903 回答
23
有guard-livereload，您可以将其与guard -jekyll一起使用，并使用guard集中监视过程，例如（我还没有测试过）：
- 通过 gem 或 bundler 安装guard-jekyll
- 通过 gem 或 bundler 安装 guard-livereload
初始化guard-jekyll
guard init jekyll
将此添加到您的 Guardfile 中：
guard 'livereload' do
watch(%r{_site/.+})
end
您可以调整以上内容以更好地适应您的项目，并且您可能已经知道必须在页面上包含 livereload 脚本：
<script src="http://localhost:35729/livereload.js"></script>
哦，开始整个观看混乱：
guard
于 2013-10-04T04:23:41.460 回答
15
更新：这不再适用于最新版本的 Jekyll
cd your/site/folder
jekyll --server --auto
于 2011-12-25T04:50:25.947 回答
13
这篇文章解释了一种更简洁的方法 -使用 Jekyll 设置 LiveReload
宝石文件：
gem 'jekyll'
gem 'guard'
gem 'guard-jekyll-plus'
gem 'guard-livereload'
保护文件：
guard 'jekyll-plus', :serve => true do
watch /.*/
ignore /^_site/
end
guard 'livereload' do
watch /.*/
end
安装任何 LiveReload 浏览器扩展。然后运行guard。
于 2014-03-26T01:01:36.057 回答
11
我编写了一个名为Hawkins的 Jekyll 插件，它将 LiveReload 合并到 Jekyllwatch进程中。它适用于 Jekyll 3.1 及更高版本。
只需添加
group :jekyll_plugins do
gem 'hawkins'
end
到您的 Gemfile （然后是bundle install）。从那里你可以运行jekyll liveserve。Hawkins 会修改head你的页面部分以包含 LiveReload 的必要组件，当 Jekyll 检测到页面更改时，Hawkins 会通过 WebSockets 将消息推送到你的浏览器。请注意，您需要一个支持WebSockets的浏览器。对于非常快速的重新加载，您可以使用 Jekyll 的新--incremental选项，它只会重新生成更改的页面。
于 2016-03-28T15:11:30.043 回答
4
首先在您的站点文件夹中正常运行 jekyll：
cd your/site/folder
jekyll
默认情况下，Jekyll_site会在其中生成一个名为 ( your/site/folder/_site) 的文件夹。
告诉 LiveReload 观看该_site文件夹。
于 2011-12-09T08:19:35.590 回答
4
此命令将在浏览器中打开您的网站并使用 jekyll 内置的 livereload 服务器。
bundle exec jekyll serve -l -o
你需要一个最新的 jekyll 版本。
于 2020-07-03T17:16:28.080 回答
1
我今天刚开始使用 GitHub Pages，希望能够使用 Jekyll 进行实时重新加载。让它工作并写了我的第一篇关于使用 Jekyll 和 LiveReload 创建 GitHub 页面的文章。
它使用带有grunt-contrib-watch插件的 Grunt 而不是 Jekyll 的serve命令 - 对我来说效果很好。希望它也适用于你。
于 2014-01-25T14:46:13.587 回答
0
你可以使用 just jekyll serve -w，我比较喜欢这个选项，因为我很懒。
于 2014-05-13T09:06:32.117 回答
0
对于 Live Reload，从项目根目录中的 Gemfile 中删除Jekyll Admin，它就像魅力一样工作。
于 2018-02-16T05:46:57.533 回答
0
如果您经常运行它，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 应用程序。
于 2020-03-21T21:11:22.027 回答