web-dev-qa-db-ja.com

JekyllでLive Reloadを使用する

私は Jekyll static site generator で始めていますが、 Live Reload を使用したいと思います。 Jekyllにはジェネレーターとサーバーコマンドがあり、Live Reloadはさまざまなコンパイラーとカスタムコマンドを実行できることを知っています。これらが連携するように設定するにはどうすればよいですか？

rubyjekyll
55
Andrew

私が見つけた最も簡単なアプローチは、2つのターミナルウィンドウを使用することです。1つはjekyll serve --watch用、もう1つはguard用です。

Nobuが提案したguard-jekyll-plusアプローチ を試しましたが、エラーがたくさんありました。

shumushinが指摘した のように、Jekyllは自動再構築プロセスを処理できます。jekyll serve --watchを使用して起動するだけです。

次に、LiveReloadを動作させるために、2番目のターミナルウィンドウで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>
20
aboy021

Jekyll 1.0+の場合：

jekyll serve --watch

詳細とオプションについては Jekyll：Basic Usage をご覧ください。

25
shumushin

guard-livereload があり、これを guard-jekyll で使用し、監視プロセスを 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
24
Jan Segre

LiveReloadはJekyll 3.7+に組み込まれています。

jekyll serve --livereload

LiveReloadのポート、遅延、および無視されたファイルを設定することもできます。見る jekyll help serve。

16
Bluu

更新：これはJekyllの最新バージョンでは動作しなくなりました

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

この投稿では、よりクリーンな方法について説明します- JekyllによるLiveReloadのセットアップ

Gemfile：

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を実行します。

13
Nobu

LiveReloadをJekyll watchプロセスに組み込む Hawkins というJekyllプラグインを作成しました。 Jekyll 3.1以降で動作します。

単に追加する

group :jekyll_plugins do
  gem 'hawkins'
end

gemfile（およびbundle install）に。そこからjekyll liveserveを実行できます。 Hawkinsはページのheadセクションを変更してLiveReloadに必要なコンポーネントを含め、Jekyllがページの変更を検出すると、HawkinsはWebSocketsを介してブラウザにメッセージをプッシュします。 WebSockets をサポートするブラウザが必要になることに注意してください。再読み込みを非常に高速にするには、変更されたページのみを再生成するJekyllの新しい--incrementalオプションを使用できます。

11
Alex

通常、サイトフォルダーでjekyllを実行します。

cd your/site/folder
jekyll

デフォルトでは、Jekyllは_siteというフォルダーをその中に生成します（your/site/folder/_site）。

_siteフォルダーを監視するようにLiveReloadに指示します。

4
kikito

今日、GitHub Pagesの使用を開始したばかりで、Jekyllでライブリロードを使用できるようにしたいと考えました。 JekyllとLiveReloadを使用したGitHubページの作成 で最初の投稿を作成しました。

Jekyllのserveコマンドの代わりにgrunt-contrib-watchプラグインを使用してGruntを使用します。それがあなたにも役立つことを願っています。

1
kctang

ライブリロードの場合、プロジェクトとそのルートディレクトリのGemfileからJekyll Adminを削除します魅力のように機能します。

0
Yash Agrawal

jekyll serve -wだけを使用できます。これは、私が怠け者であるために私が好むオプションです。

0
Seth Warburton