zenn previewをホットリロードさせる

zenn-cliにホットリロード機能が実装されていなかったので、browser-syncを使ってホットリロードさせてみました。zenn-cliがホットリロード対応予定なので、それまでの繋ぎになると思います。

browser-syncのインストール

zenn-cliと同じgitリポジトリ内で次のようにしてbrowser-syncをインストールします。

npm install -S browser-sync

ホットリロードさせてみる

まずnpx zenn previewを実行します。次に別のターミナルで次のコマンドを実行します。

npx browser-sync start --proxy "localhost:8000" --files "articles/*.md"

するとlocalhost:3000が自動的に開きます。localhost:8000ではなく、localhost:3000上でプレビューを開けば、エディタで記事を保存するたびにプレビューが更新されるようになります。