devcontainerでHugoの環境を整えてみる

# はじめに

無料の静的ファイルのホスティングサービスに気軽に投稿できるブログ的なものを作りたくGemini先生に訊いてみると[Hugo](https://gohugo.io/)なるものを教えていただいたので、とりあえず環境を作ってみようとした手順のメモです。

# 環境

- Windows11 Home (24H2) ※不具合が発生しないかヒヤヒヤしています…。
- WSL2 (Ubuntu)
- VSCode

# 手順メモ

## devcontainer.jsonの作成

とりあえず設定ファイルを作成します。
任意のディレクトリでVSCodeの左下のリモート？のボタンから `開発コンテナー構成ファイルを追加`を選択します。
テンプレートとして`Ubuntu(jammy)`を利用します。
次に追加機能を聞かれるので`Hugo`を選択します。
次にオプションの構成で`extended`を選択しておきます。
作成された設定内容は以下となりました。

```:devcontainer.json
// For format details, see https://aka.ms/devcontainer.json. For config options, see the
// README at: https://github.com/devcontainers/templates/tree/main/src/ubuntu
{
	"name": "Ubuntu",
	// Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile
	"image": "mcr.microsoft.com/devcontainers/base:jammy",
	"features": {
		"ghcr.io/devcontainers/features/hugo:1": {
			"extended": true,
			"version": "latest"
		}
	}

	// Features to add to the dev container. More info: https://containers.dev/features.
	// "features": {},

	// Use 'forwardPorts' to make a list of ports inside the container available locally.
	// "forwardPorts": [],

	// Use 'postCreateCommand' to run commands after the container is created.
	// "postCreateCommand": "uname -a",

	// Configure tool-specific properties.
	// "customizations": {},

	// Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root.
	// "remoteUser": "root"
}
```

:::note warn
`extended=true`にしてしておかないと拡張版Hugoがインストールされずテーマを利用した際にエラーが発生します。
:::

これをもう少し編集します。

```diff:devcontainer.json
// For format details, see https://aka.ms/devcontainer.json. For config options, see the
// README at: https://github.com/devcontainers/templates/tree/main/src/ubuntu
{
	"name": "Ubuntu",
	// Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile
	"image": "mcr.microsoft.com/devcontainers/base:jammy",
	"features": {
		"ghcr.io/devcontainers/features/hugo:1": {
			"extended": true,
			"version": "latest"
		}
	},
+   "workspaceFolder": "/workspace",
+   "workspaceMount": "source=${localWorkspaceFolder},target=/workspace,type=bind,consistency=cached",

	// Features to add to the dev container. More info: https://containers.dev/features.
	// "features": {},

	// Use 'forwardPorts' to make a list of ports inside the container available locally.
	// "forwardPorts": [],

	// Use 'postCreateCommand' to run commands after the container is created.
	// "postCreateCommand": "uname -a",

	// Configure tool-specific properties.
-	// "customizations": {},
+	"customizations": {
+		"vscode": {
+			"extensions": [
+				"yzhang.markdown-all-in-one"
+			]
+		}
+	},

	// Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root.
-	"remoteUser": "root"
+	"remoteUser": "vscode"
}
```

## コンテナ作成＆接続

作成した設定でコンテナを作成します。
VSCodeの左下のリモート？のボタンから `コンテナーを再度開く`を選択します。
しばらくするとコンテナが立ち上がり接続された状態になります。
ターミナルでHugoのバージョンを確認してみます。

```
vscode ➜ /workspace $ hugo version
hugo v0.143.1-0270364a347b2ece97e0321782b21904db515ecc+extended linux/amd64 BuildDate=2025-02-04T08:57:38Z VendorInfo=gohugoio
```

おそらく大丈夫です。

## Hugoのプロジェクト作成～サーバー立ち上げ

とりあえず[公式ドキュメント](https://gohugo.io/getting-started/quick-start/)を参考にしつつ進めます。

### プロジェクト作成

```sh
# プロジェクト作成
vscode ➜ /workspace $ hugo new site blog
Congratulations! Your new Hugo site was created in /workspace/blog.

Just a few more steps...

1. Change the current directory to /workspace/blog.
2. Create or install a theme:
   - Create a new theme with the command "hugo new theme <THEMENAME>"
   - Or, install a theme from https://themes.gohugo.io/
3. Edit hugo.toml, setting the "theme" property to the theme name.
4. Create new content with the command "hugo new content <SECTIONNAME>/<FILENAME>.<FORMAT>".
5. Start the embedded web server with the command "hugo server --buildDrafts".

See documentation at https://gohugo.io/.

# ディレクトリを移動してGit初期化
vscode ➜ /workspace $ cd blog
vscode ➜ /workspace/blog $ git init
hint: Using 'master' as the name for the initial branch. This default branch name
hint: is subject to change. To configure the initial branch name to use in all
hint: of your new repositories, which will suppress this warning, call:
hint:
hint:   git config --global init.defaultBranch <name>
hint:
hint: Names commonly chosen instead of 'master' are 'main', 'trunk' and
hint: 'development'. The just-created branch can be renamed via this command:
hint:
hint:   git branch -m <name>
Initialized empty Git repository in /workspace/blog/.git/

# ご丁寧に教えてくれたのでとりあえずブランチ名を main に変更
vscode ➜ /workspace/blog (master) $ git branch -m main

# テーマを追加
vscode ➜ /workspace/blog (main) $ git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke
Cloning into '/workspace/blog/themes/ananke'...
remote: Enumerating objects: 3895, done.
remote: Counting objects: 100% (424/424), done.
remote: Compressing objects: 100% (187/187), done.
remote: Total 3895 (delta 342), reused 261 (delta 235), pack-reused 3471 (from 3)
Receiving objects: 100% (3895/3895), 6.00 MiB | 14.04 MiB/s, done.
Resolving deltas: 100% (1810/1810), done.

# 追加したテーマを利用するように設定追加
vscode ➜ /workspace/blog (main) $ echo "theme = 'ananke'" >> hugo.toml
```

### サーバー立ち上げ

```
vscode ➜ /workspace/blog (main) $ hugo server
```

特にエラーメッセージなどが表示されていなければ http://localhost:1313/ に接続して画面が表示されればOKです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/83831/9ab5bd5a-30ff-9d4f-2a80-8f444f188b08.png)

サーバーを停止したい時は`Ctrl + c`です。

## 記事作成

とりあえず記事を作成してみます。

```
vscode ➜ /workspace/blog (main) $ hugo new content content/posts/my-first-post.md
Content "/workspace/blog/content/posts/my-first-post.md" created
```

以下のファイルが作成されます。

```md
+++
date = '2025-02-09T13:35:08Z'
draft = true
title = 'My First Post'
+++
```

`draft = true`の場合、下書きと判断され先ほどの`hugo server`では表示対象となりません。
オプションをつけてサーバーを起動することで表示されます。

```
vscode ➜ /workspace/blog (main) $ hugo server -D
```

# おわりに

とりあえずローカルのdevcontainer環境で記事を作成してサーバーを立ち上げて表示を確認できました。
公式ドキュメントの手順で設定したテーマは個人的にイマイチ好きになれないので、次はテーマを選んでカスタマイズとかもしてみたいと思います。