GitHub Pages では、マークダウンから HTML への変換に Jekyll という Ruby ベースのツールを利用します。
単純に GitHub リポジトリと連携する場合、ローカル開発環境は特に気にしなくてもよいのですが、 Windows のローカル環境で Jekyll の動作確認しようとすると割とめんどくさいことになります。 Windows 環境だと公式サポートもなくて、実際に動かしてみても動作不安定な感じでした。
そんな時はコンテナー使えばいいじゃない、ということで、 Visual Studio Code の Remote - Containers extension を使って、 Jekyll のローカルビルド環境を作ってみました。
やりたいこと
私の場合はこんなことを考えていました。
- Jekyll のローカルビルド、ローカル確認環境を Windows 上に作りたい
- できる限りローカルの環境を汚したくない
- ローカル環境のブラウザーで作成したサイトの確認を行いたい
- マークダウンの保存をしたら即時サイトの確認をしたい
- VS Code の Remote - Containers 上で Git リポジトリと連携したい
動作確認環境
- Windows 10 21H1
- Visual Studio Code 1.60.0
- Remote - Containers extension v0.194.0
- Docket Desktop 4.0.0
- Jekyll 4.2.0(docker composeではタグ未指定、今回の検証に使用したバージョン)
このサンプルでできること
VS Code を立ち上げて数クリックで Jekyll の開発ができる
起動するときは GUI 上でポチポチするだけです。
Visual Studio Code がコンテナーに接続する
Docker コンテナーの起動と接続は Remote - Containers の拡張機能が docker compose 経由でやってくれます。 起動するとターミナルがコンテナーに接続してくれます。
ブラウザーが立ち上がる
先ほどの GUI ポチポチをやると、ローカルマシンのブラウザーが開きます。 そして起動した Jekyll の開発サーバーに接続してくれます。
初回起動時やキャッシュが効いていないときなど、開発サーバーの起動まではそれなりに時間を要します。 それなりに高スペックなマシンでも、最初は 1 分くらいかかると思います。 ブランクページに飛んでしまったときは、サーバーが立ち上がるのを待ってから、画面をリロードしてみてください。
マークダウンを保存すると即画面に反映
Jekyll はブラウザーをオートリロードするための仕組みがあります。 今回のサンプルではそのあたりも組み込んでみました。 以下のように、マークダウンファイルを保存するとブラウザー画面もオートリロードされます。
コンテナーに接続しながら VSCode 上から Git リポジトリも操作可能
2 枚 Visual Studio Code を立ち上げたり、コマンドラインで操作しなくても、普通に開発を進めることができます。
サンプルコード
このポストで解説しているサンプルコードは以下で公開しています。 環境構築手順等は README を参照してください。