ruby 在 Jekyll 中使用 Live Reload

Using Live Reload with Jekyll

提问by Andrew

I'm getting started with Jekyll static site generatorand I would like to use Live Reloadwith it. I know Jekyll has a generator and server commands, and Live Reload can run various compilers and custom commands. How do I configure these to work together?

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

采纳答案by aboy021

The simplest approach I've found that works is to use two terminal windows: One for jekyll serve --watchand one for guard.

我发现有效的最简单方法是使用两个终端窗口：一个 forjekyll serve --watch和一个 for guard。

I tried the guard-jekyll-plus approach suggested by Nobubut I had a bunch of errors.

我尝试了Nobu 建议的guard-jekyll-plus 方法，但我有一堆错误。

As shumushin pointed out, Jekyll can handle the automatic rebuilding process, you simply launch it using jekyll serve --watch

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

Now to get LiveReload working run guard with guard-livereload in a second terminal window. This is basically the same as Jan Segre's answer, but without guard-jekyll.

现在让 LiveReload 在第二个终端窗口中使用 guard-livereload 运行保护。这与Jan Segre 的回答基本相同，但没有guard-jekyll.

My Guardfilelooks like this:

我的Guardfile看起来像这样：

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

And my Gemfile:

而我的Gemfile：

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

Note: You still need to include the livereload script in your index.htmlpage; it is the "glue" that binds guard-livereloadand the browser together.

注意：您仍然需要在index.html页面中包含 livereload 脚本；它是将guard-livereload浏览器和浏览器结合在一起的“胶水” 。

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

回答by Bluu

LiveReload is built into Jekyll 3.7+.

LiveReload 内置于 Jekyll 3.7+ 中。

jekyll serve --livereload

You can also set LiveReload's port, delay, and ignored files. See jekyll help serve.

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

回答by shumushin

For jekyll 1.0+ use:

对于 jekyll 1.0+ 使用：

jekyll serve --watch

See Jekyll: Basic Usagefor more details and options.

有关更多详细信息和选项，请参阅Jekyll：基本用法。

回答by Jan Segre

There's guard-livereloadwhich you can use with guard-jekylland centralize the watching process with guard, an example would be (I haven't tested it):

有护livereload您可以与使用护哲基尔和集中收看过程中与后卫，一个例子是（我没有测试）：

• Install guard-jekyll, either through gem or bundler
• Install guard-livereload, either through gem or bundler

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

Init guard-jekyll

初始化守卫-jekyll

guard init jekyll

Add this to your Guardfile:

将此添加到您的 Guardfile：

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

You can adapt the above to suit better your project, and you probably already know you have to include the livereload script on your page:

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

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

Oh, and to start the whole watching mess:

哦，开始整个观看混乱：

guard

回答by balexand

UPDATE: this no longer works with the latest version of Jekyll

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

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

回答by Nobu

This post explains a cleaner way - Setting Up LiveReload With Jekyll

这篇文章解释了一种更简洁的方法 -使用 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

Install any LiveReload browser extension. Then run guard.

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

回答by Alex

I wrote a Jekyll plugin called Hawkinsthat incorporates LiveReload into the Jekyll watchprocess. It works with Jekyll 3.1 and up.

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

Simply add

只需添加

group :jekyll_plugins do
  gem 'hawkins'
end

to your Gemfile (and then a bundle install). From there you can run jekyll liveserve. Hawkins will modify the headsections of your pages to include the necessary components for LiveReload, and when Jekyll detects a page change, Hawkins will push a message to your browser via WebSockets. Please note that you will need a browser that supports WebSockets. For very fast reloads, you can use Jekyll's new --incrementaloption that will only regenerate the changed pages.

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

回答by kikito

Start by running jekyll normally in your site folder:

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

cd your/site/folder
jekyll

By default Jekyll generates a folder called _siteinside it (your/site/folder/_site).

默认情况下，Jekyll 会生成一个_site在其中调用的文件夹( your/site/folder/_site)。

Tell LiveReload to watch that _sitefolder.

告诉 LiveReload 观看该_site文件夹。

回答by kctang

I just started using GitHub Pages today, and wanted to be able to use live reload with Jekyll. Got it working & written my first post on Creating GitHub Pages with Jekyll & LiveReload.

我今天刚开始使用 GitHub Pages，并希望能够通过 Jekyll 使用实时重新加载。让它工作并写了我关于用 Jekyll 和 LiveReload 创建 GitHub 页面的第一篇文章。

It uses Grunt with the grunt-contrib-watchplugin instead of Jekyll's servecommand - works well for me. Hope it works for you as well.

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

回答by Seth Warburton

You can use just jekyll serve -w, an option I prefer as I am lazy.

您可以使用 just jekyll serve -w，这是我比较喜欢的一个选项，因为我很懒。