HugoブログをDockerで構築する

はじめに

Hugo を 現状では Windowsで環境を構築している。
しかし、他の OS (例: Linux, Mac)でもブログを書きたい時があるので、 Docker で構築できるようにする。

環境

Server: Docker Desktop 4.20.1 (110738)
Docker version 24.0.2
Docker Compose version v2.18.1

手順

  1. ブログで使用しているプロジェクトの直下に、 compose.yml を作成する。
  2. コンテナを立ち上げる。
  3. Makefile を作成し、エイリアスを定義する。

compose.ymlの作成

compose.yml

# https://gohugo.io/installation/linux/#docker
services:
  hugo:
    image: klakegg/hugo:0.110.0-ext-ubuntu
    entrypoint: tail -f /dev/null
    volumes:
      - .:/src
    ports:
      - "1313:1313"

これだけでOK.

コマンドだけ使用したいので、 entrypointtail コマンドで /dev/null を監視するのみ。
volumes は、ブログをすべて、 /src 以下にマウントする。
ports は、 1313 ポートが hugo server -D をした際のポートなので ホスト側で確認できるようにしておく。

コンテナ立ち上げ

docker compose up -d --build

コンテナを立ち上げる。

Makefile作成する

build:
	docker compose build
up :
	docker compose up -d
serve:
	make up
	docker compose exec hugo hugo server -D

#Usage: make new file=post/tech/tips/aaa.md
new:
	make up
	docker compose exec hugo hugo new $(file)

.PHONY: build up serve new

これで、 make serve で コンテナのhugo server -Dが起動される。
また、 make new file=[ファイルパス/ファイル名.md] で新規にファイルが作成される。

ここまでで環境構築はOK!

追記

上記の Makefile だと、WSL2で動かしたときに、VSCode などのエディタで修正をする際に、 Permission denied になってしまう。
これは、root ユーザでファイルが作られるため。
なので、下記のように修正を行った。

new:
	make up
-	docker compose exec hugo hugo new $(file)
+	docker compose exec --user=ubuntu hugo hugo new $(file)

WSL2Ubuntu(22.04 LTS) なので、使用しているubuntu ユーザを指定した。
これによって、新しいファイルは ubuntu ユーザで作成されるため所有者, 権限の問題は解消された。

また、serve の方は、 root ユーザでないと、 .hugo_build.lock ファイルが作成できずにサーバが起動できないのでこのままとしている。
全体像は下記になる。↓

build:
	docker compose build
up :
	docker compose up -d
serve:
	make up
	docker compose exec hugo hugo server -D

#Usage: make new file=post/tech/tips/aaa.md
new:
	make up
	docker compose exec --user=ubuntu hugo hugo new $(file)

bash:
	make up
	docker compose exec --user=ubuntu hugo bash

.PHONY: build up serve new

WSL2 で環境を作ったのは、 WindowsDocker環境だと、Docker でボリュームマウントした際に、 hugo serverで起動するサーバのファイル変更検知が異様に遅いため。

参考

おわりに

Windows 環境に作っていたのが管理が辛かったので、(バージョンどうやってあげてたか?とか環境変数どうなっているか?とか)
これで、環境+ブログが一体化されたので楽になった気がする。
今回追加したのも、 compose.yml, Makefile のみなので、ブログ本体とはいつでも分離できそう。

Hugo で構築されています。
テーマ StackJimmy によって設計されています。