あなたが今開いてるこのブログを作成した。
新年の何かやりたい勢いにまかせて、とにかく早くブログを用意したかったので、使い慣れたGitHub Pages + 日本語ドキュメントも多いHugoでクイックスタートしつつ、継続的にデプロイできる最低限の足回りの整備を意識しました。
リポジトリはこちら
https://github.com/nasustim/blog.nasustim.com
Hugo のセットアップ
Hugo は Homebrew などのパッケージ管理ツールでもインストールできるが、自分は普段使いの macOS の他に windows(WSL)を利用することもあるので、プラットフォーム間での執筆環境の可搬性を確保するために Docker で利用することにした。
Renovate を導入するでも説明するが、ベースイメージを Dockerfile のFROM句で指定しておくことで、Renovate でのバージョン管理対象となる。
# Dockerfile
FROM klakegg/hugo:0.107.0-alpine
WORKDIR /work
# hugo
#!/bin/bash
IMAGE_NAME="blog"
image_builded=$(docker image ls | grep "$IMAGE_NAME")
if [ -z "$image_builded" ]; then
echo "image building..."
docker build -t "$IMAGE_NAME" .
fi
docker run --rm -v $(pwd):/work -it -p 1313:1313 "$IMAGE_NAME" $*
以下のコマンドでブログのスケルトンを作成
$ chmod 777 hugo
$ ./hugo new site --force ./
config.toml が作成されるので、自分のブログ用の設定に書き換える
# config.toml
baseURL = "https://blog.nasustim.com/"
languageCode = "ja-jp"
title = "nasustim's weblog"
テーマをインストールする
Hugo のデザインテーマはthemes/直下にテーマのリポジトリをダウンロードすることでインストールできる。
https://themes.gohugo.io に主要なテーマが一覧されている。paperのシンプルなスタイルに惹かれたのでこれをインストールする。
$ git submodule add https://github.com/nanxiaobei/hugo-paper themes/paper
$ echo "theme = \"paper\"" >> config.toml
contentDir を設定
記事を置くディレクトリを設定する
$ echo "contentDir = \"articles/\"" >> config.toml
GitHub リポジトリをセットアップする
デプロイスクリプトの作成
Host on GitHub | Hugo に GitHub Actions で使えるデプロイスクリプトがあるのでこれを利用する。
上記ページのコードスニペットを.github/workflows/以下に YAML ファイルとして保存してセットアップ完了。mainブランチにコードが push されるとビルドが実行され、その出力結果がgh-pagesブランチに commit される。
上記デプロイスクリプトは mainブランチ以外ではビルドのみ実行されるため、記事のテストとしても活用できる。
Renovate を導入する
https://github.com/apps/renovate より。 このリポジトリの依存パッケージのアップデートを自動で管理してくれる。
Hugo のセットアップにて Hugo のベースイメージを Dockerfile のFROM句で指定することでこちらも管理対象となる。
また、submodule でインストールした Hugo テーマもrenovate.jsonに以下の設定を追加するとバージョン管理の対象となる。
https://docs.renovatebot.com/modules/manager/git-submodules/
renovate.json
{
..., // 既存設定
"git-submodules": {
"enabled": true
}
}