VSCodeRemoteContainersForJekyll
このリポジトリについて
Visual Studio Code の Remote - Containers 拡張機能を利用して、 Jekyll をうごかすサンプルです。 本サンプルでできることについては、以下のブログをご覧ください。
ツナ缶雑記 ｜ VSCode の Remote - Containers で Jekyll の開発環境を作る
環境構築方法
Docket Desktop をインストールします。
WSL2 Linux カーネル更新プログラムをインストールします。
Visual Studio Code をインストールします。
https://azure.microsoft.com/ja-jp/products/visual-studio-code/
Visual Studio Code の Remote - Containers 拡張機能をインストールします。
https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-containers
基本的な使い方
Docker Desktop を起動します（Windowsの起動時に同時起動する設定もあります）。
このリポジトリ一式を取得（フォークするなりリリースページから Zip ファイルでダウンロードするなりお好きにどうぞ）します。
https://github.com/tsuna-can-se/VSCodeRemoteContainersForJekyll/releases
Visual Studio Code でルートディレクトリを開きます。
Visual Studio Code 左下のアイコンを押下します。
[Reopen in Container] を選択します。
コンテナーが起動するまでしばらく待機します。 左下のアイコンが以下のようになると、コンテナーの実行ができている状態です。
その間ブラウザーが自動的に立ち上がります。 コンテナー起動後、静的サイトのビルドや関連パッケージのダウンロードが行われます。 初回起動時は起動するまでそれなりにかかるので、気長に待ちましょう。
[docs] ディレクトリ内に [_site] ディレクトリが生成されたら、静的サイトの生成は完了しています。 起動したブラウザー画面をリロードすると、以下のような画面が表示されます。
[docs] ディレクトリ内に Jekyll のファイル群を作成していってください。 編集したファイルを保存すると、ブラウザー画面もリロードされます。
再起動
設定ファイルや Gemfile の修正を行った場合は、コンテナーの再起動を行ってください。 画面左下の [Dev Container] ボタンを押下して、[Rebuild container] を選択します。
検証環境
README に記載している環境構築方法、基本的な使い方は、以下の環境で検証を行っています。 環境の差異によって手順等とこなる場合がありますので、適宜読み替えてください。
- 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ではタグ未指定、今回の検証に使用したバージョン）
