Hexoにホットリロードを設定

投稿日 編集日 カテゴリ 、 Coauthor：Yuto Uehara 単語数： 419 読書の時間 ≈ 2 分

こんにちは！ ROOXIM株式会社COO 上原です。
今回は記事を書く際に便利な機能を紹介させていただきます。
具体的にはHexoでのホットリロードの方法をご紹介します。

ホットリロードとは

まずはホットリロードの概念です。
ホットリロードについて検索すると以下の様に書かれています。

ホットリロード（Hot Reload）とは、開発中にコードを変更してもアプリを再起動することなく、リアルタイムなプレビューが可能な機能です。
「ホット」は「実行中の／アクティブな」という意味で、「リロード」には「再読み込み」という意味があります。

とのことで簡単に言ってしまうと、マークダウンを編集すると自動でブラウザを更新してくれるものとなります。

どうなるの？

  1. サーバを起動
    サーバを起動します。
1
hexo s --draft

起動すると画像の様に裏でBrowsersyncが起動します。
img

記事を更新すると以下のようになります。
img

編集して保存するだけなので、ブラウザにフォーカスする必要が無いので楽に編集ができます。

セットアップ方法

では実際にホットリロードができるようにhexo-browsersyncをインストールしてみましょう。

hexo-browsersyncをインストール

以下のコマンドでhexo-browsersyncをインストールします。

1
npm i hexo-browsersync --save

hexo-browsersyncを設定

以下の設定を_config.ymlに追加します。

_config.yml
1
2
3
4
browsersync:
  logLevel: "warn"
  ghostMode:
    scroll: true

その他のオプションは https://browsersync.io/docs/options/ を参照してください。

以上で設定完了です。
ホットリロードで楽しく記事を書いてください！