2023年1月10日

Hugoで新しいブログを作成した - おみつ雑記

あなたが今開いてるこのブログを作成した。

新年の何かやりたい勢いにまかせて、とにかく早くブログを用意したかったので、使い慣れた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 &quot;theme = \&quot;paper\&quot;&quot; &gt;&gt; config.toml

contentDir を設定

記事を置くディレクトリを設定する


$ echo &quot;contentDir = \&quot;articles/\&quot;&quot; &gt;&gt; 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


{
  ..., // 既存設定
  &quot;git-submodules&quot;: {
    &quot;enabled&quot;: true
  }
}