Hexoでプレビュー表示のブラウザを自動更新する方法

静的サイトジェネレーターのHexoを使ってブログ記事を書いていますが、執筆中にブラウザでプレビューすると、デフォルト機能では自動更新できません。

記事を更新した際にプレビュー表示しているブラウザを自動更新されると効率的です。

自動更新の機能はプラグインを追加することで追加可能です。

プラグインhexo-browsersyncのインストール

VSCodeを起動します。

起動すると前回開いていたフォルダ・ファイルが開くはずです。

起動時のフォルダがHexoをインストールしたフォルダでなければ、「Ctrl+k」、「Ctrl+o」で目的のフォルダに移動します。

ターミナルで次のコードを実行します。

1	npm install hexo-browsersync --save

以上で、インストール完了です。

Hexoで記事を書いて、ターミナルで「hexo s」を実行すると、下記のアドレスでプレビューが表示されます。

「hexo s」実行中のまま、かつプレビューを開いたままで、記事を更新し保存すると、プレビューも自動更新されます。

プラグインの公式サイトには、オプション設定なども記載されています。