ブログ記述環境としてのDev Container

このブログの生成には、Hugoを利用しています。ブログ移行日記（その1）に書いてありますが、当時はbrewでインストールしていました。また、Windowsに移行したタイミングで、WSL2のUbuntuにaptでhugoをインストールして利用していました。 WSL2の環境が壊れなければこのままでもいいのですが、最近Dev Containerを触っていたので、このブログを書く環境（おもにHugo）もDev Containerにできるのでは？と気づきました。

ということで、Hugo＋αの環境をDev Container化したので、そのメモです。

必要なもの

ブログを書いて、記事を構築して、公開するところまでに利用するのは次のようなものです。

git
Hugo
node
atomic-algolia

GitHubのプライベートリポジトリでHugoのプロジェクトを管理しています。また、GitHub Pagesで公開しており、生成したHTMLもgitコマンドを利用してGitHubにpushしています。このため、gitコマンドが必要です。

コンテンツの生成はHugoコマンドを利用します（テーマの適用とかいろいろ）。

あと、Algoliaでブログを検索できるようにしており（ブログ移行日記（その4）参照）、Algoliaへドキュメントのデータをアップロードするために、atomic-algoliaを利用しています。こちらは、nodeのモジュールであるので、nodeの環境も必要です。

ベースにするイメージ

Dev Container Templatesというリポジトリが公開されています。こちらを探すと、元となるdevcontainer.jsonが見つかることがあります。 Hugoのものがあるか探してみましたが、残念ながら見つかったのはJekyllのテンプレートでした。今回は、nodeの環境が必要なのでjavascript-nodeを元に編集していきます。

手元のUbuntuのnodeのバージョンが16だったので、バージョン16のイメージを指定します(devcontainer.jsonは後述)。

Hugoの追加

Hugoのテンプレートはなかったのですが、Dev Container FeaturesにHugoのfeatureが用意されていました。 featuresに1行追加するだけでコンテナにHugoをインストールしてくれる便利ものです。

Markdownの環境

Dev Container Templatesを探索していて見つけたMarkdownのテンプレートも参考にしてみました。 VS CodeのMarkdown向けの拡張機能がいくつかリストアップされていたので、ついでに追加です。 markdown-all-in-oneやmarkdownlintはこれまでも利用していたので、他のものも便利だろうということで。他の物はどんなものかを後で調べてみる予定です。

作った.devcontainerの設定はこちら

ということで、出来上がった設定は以下の通りです。

devcontainer.json

{
    "name": "Hugo - blog generator",
    "image": "mcr.microsoft.com/devcontainers/javascript-node:16",
    "postCreateCommand": "/bin/sh ./.devcontainer/postCreateCommand.sh",
    "features": {
        "ghcr.io/devcontainers/features/hugo:1": {}
    },
    "customizations": {
		"vscode": {
			"extensions": [
				"yzhang.markdown-all-in-one",
				"streetsidesoftware.code-spell-checker",
				"DavidAnson.vscode-markdownlint",
				"shd101wyy.markdown-preview-enhanced",
				"bierner.github-markdown-preview"
			]
		}

    }
}

postCreateCommand.shでは、npm installで、必要なモジュールのインストールをコンテナビルド後に実行できるようにしました。（apt updateはなくてもいいな）

postCreateCommand.sh

#!/bin/sh
# postCreateCommand.sh

echo "START Install"

sudo apt update
sudo chown -R vscode:vscode .

npm install

echo "FINISH Install"

まとめ

ということで、ここ最近Dev Containerについて色々調べていたのでサクッとDev Container化ができました。まぁ、HugoのFeatureが用意されていて、他に大したことをやっていないというのが大きいのですが。このブログは今回構築したDev Containerで生成して公開した記事になります。