Windows10/VSCode/WSL2/Docker/Hugoでblogを書いています

bitter*smooth と言う音楽レビューサイトを作っています。

この環境、サーバーサイドはNetlify/Hugo、ローカルではVSCodeでMarkdownを書く、と言う環境で構築しているのですが、あれ？そもそもVSCodeを使うなら、WSL2/DockerDesktop/Remote-Containersでローカル確認もすれば良いんじゃない？と思って、やったらサクッと出来ました！

• Windows Terminalインストール

• WSL2インストール

  • Windows Terminal を管理者権限で起動

wsl --install
wsl --set-default-version 2
wsl --install -d Ubuntu

• VSCodeインストール

• Windows に Docker Desktop をインストール

まぁ、ここら辺までは、Windows10で開発している人ならフツーに出来るんでないでしょうか？

で、プロジェクトのトップで、 .devcontainer ディレクトリを作り、その配下に、 Dockerfile devcontainer.json の2つのファイルを作ります。

• .devcontainer/Dockerfile ¹

FROM klakegg/hugo:0.88.0-alpine
RUN apk update && apk --no-cache add git

• .devcontainer/devcontainer.json ²

{
	"name": "bittersmooth",
	"build": {
		"dockerfile": "Dockerfile",
	},
	"extensions": [
		"mhutchie.git-graph"
	]
}

• Visual Studio Code を使用して Docker コンテナーを開発環境として使用する - Learn | Microsoft Docs

簡単に Hugo の環境が手に入るのですが、コレひとつだけ落とし穴があって、 hugo server -w でライブローディングが効かないんですね。 まぁ、VSCodeだとMarkdownのプレビューも簡単ですし、最終確認だけ hugo server -w で確認すれば良いのかな？と言う感じでやっています。