使用Live Reload和Jekyll

11 回答

• 18

  我发现最简单的方法是使用两个终端窗口：一个用于 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'
  

  Note ：您仍然需要在 index.html 页面中包含livereload脚本;它是"glue"将 guard-livereload 和浏览器绑定在一起 .

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

  回复于 2024-04-29T23:10:37+08:00
• 1

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

  • 通过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
  

  回复于 2024-04-29T23:10:37+08:00
• 15

  对于jekyll 1.0使用：

  jekyll serve --watch
  

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

  回复于 2024-04-29T23:10:37+08:00
• 13

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

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

  回复于 2024-04-29T23:10:37+08:00
• 4

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

  回复于 2024-04-29T23:10:37+08:00
• 0

  我写了一个名为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 选项，该选项仅重新生成已更改的页面 .

  回复于 2024-04-29T23:10:37+08:00
• 23

  LiveReload内置于Jekyll 3.7 .

  jekyll serve --livereload
  

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

  回复于 2024-04-29T23:10:37+08:00
• 11

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

  cd your/site/folder
  jekyll
  

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

  告诉LiveReload观看 _site 文件夹 .

  回复于 2024-04-29T23:10:37+08:00
• 9

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

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

  回复于 2024-04-29T23:10:37+08:00
• 0

  您可以使用 jekyll serve -w ，我更喜欢这个选项，因为我很懒 .

  回复于 2024-04-29T23:10:37+08:00
• 24

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

  回复于 2024-04-29T23:10:37+08:00