https://docs.docker.com/desktop/install/windows-install/ に従い, Dockerをインストールします.
PowerShellを管理者権限で起動し, 以下のコマンドを実行します.
wsl --installhttps://docs.docker.com/desktop/release-notes/ から, Docker Desktop for Windows をダウンロードし, インストールします.
https://docs.docker.com/desktop/install/mac-install/ に従い, Dockerをインストールします.
https://code.visualstudio.com/ から, インストールします.
また, wingetもしくはHomebrewを用いてインストールすることもできます.
winget install vscodebrew install --cask visual-studio-codeインストールが終わったら, Visual Studio Codeを起動し, 拡張機能Dev Containersをインストールします.
左側の拡張機能タブを開き, Dev Containersを検索し, Installをクリックします.
F1キーを押し, Dev Containers: Clone Repository in Container Volume...を選択します.
リポジトリを尋ねられるので, technotut/technotut.netを入力します.
クローンが始まり, 自動で環境構築が完了します.
左下の main をクリックし, 新しいブランチを作成 を選択します.
ブランチ名を入力し, Enter を押します.
ターミナルで,
コンテナ起動時に自動実行されるようになったため, この手順は不要です.npm install を実行します.
ターミナルで, npm run dev を実行します.
ポートタブを開き, 転送されたアドレス を, Ctrlを押しながらクリック します.
/contentディレクトリに, ホームページのコンテンツが格納されています. Markdown形式で記述されており, 簡単に編集できます. /content/newsディレクトリを編集すると, https://technotut.net/news に記事を追加したり, 編集したりすることができます.
また, 画像などは画像URLをMarkdownファイルに記述することで, Web上の画像をそのまま貼り付けることもできますが, 画像をアップロードすることもできます. 画像をアップロードする場合は, /publicディレクトリに画像を追加し, 画像のパスをMarkdownファイルに記述します.なお, パスは/publicディレクトリからの相対パスで記述します.
編集して保存すると, プレビューに自動的に反映されます. プレビューを更新すると, 編集した内容が反映されているはずです.
左側の ソース管理 タブを開き, 変更したファイルの+ (stage changes)をクリックします.
コミットメッセージを入力 に, コミットメッセージを入力し, Ctrl + Enter を押します.
左側の ソース管理 タブにて, Branchの発行 をクリックします.
左側の GitHub タブを開き, PULL REQUESTS右横のプルリクエストの作成を選択します.
BASEを main に, MERGEを 最初に設定したブランチ名 に設定します.
TitleとDescriptionを入力し, Create をクリックします.
管理者によってレビューが行われます. 問題がなければ, プルリクエストがマージされ, 編集した内容が本番環境に反映されます.
コンテナランタイムにDockerではなく, Podmanを使用することができます. 以下にPodmanでの環境構築方法を記載します.
winget install RedHat.podmanbrew install podmanPodmanのインストールが完了したら, podman machine init を実行します.
その後, podman machine set --rootful を実行し, podman machine start を実行します.
2. の手順でVisual Studio Code本体と拡張機能をインストールした後, 拡張機能設定でdocker pathをpodmanに変更します.
3. の手順でリポジトリを開く際, Dev Containers: Open Folder in Container...を選択します.
以降の手順はDocker同様です.