Jekyllにライブリロード機能を追加する「Hawkins」

Jekyllにライブリロード機能を追加する「Hawkins」

どうも、イソップです。

Jekyllでは serve コマンドを使用することで、ファイル編集の度にサイトデータを構築しなおす監視機能がありますが、
できればブラウザの更新もしたいのです。

ファイルが生成される度に手動でリロードしているようでは、すぐに日が暮れてしまいます。

そこで、ブラウザの自動リロード(ライブリロード)機能のJekyllプラグインはいくつかありますが、
実際に試してよかった「Hawkins」を紹介します。

Hawkinsをインストールする

Hawkinsは、Jekyllにブラウザのライブリロード機能を追加するプラグインです。

Jekyllのバージョン 3.1 以上で利用可能です。
今回はbundlerでのインストール方法を紹介します。

Gemfileには次のコードを追記します。

group :jekyll_plugins do
  gem 'hawkins'
end

ターミナルで、 bundle install コマンドを入力します。

$ bundle install

ライブリロード機能の使用方法

ライブリロードの使用は非常にカンタンです。

インストールが完了すると、jekyll liveserve コマンドが追加されます。
jekyll serve コマンドにライブリロード機能が追加されたものになります。

さっそくターミナルで次のコマンドを入力すると、ローカルサーバーが立ち上がります。

$ jekyll liveserve

その他のオプションについては、ヘルプオプションを付けてコマンドを実行してみてください。

$ jekyll liveserve --help

liveserveオプション一覧

ぼくのオススメは、limit_posts オプションを 2 など小さい数字にすると、生成されるページが少なくなって、
ビルド時間を短縮できるので、サクサクページが作れてストレスフリーです。

ぜひ試してみてください。

五十川 洋平(Yohei Isokawa)

五十川 洋平(Yohei Isokawa)

フロントエンドエンジニア/面白法人カヤックなどのWeb制作会社に勤務したのち、故郷の新潟に戻り独立。JSフレームワークAngularやFirebase、Google Cloud Platformを使ったWebアプリ開発が得意。 また、Udemyのプログラミング解説の講師、writer.appの自主開発や上越TechMeetupの主催などを行っています。

プロフィール

©Copyright 2022 Yohei Isokawa All Rights Reserved.