Hugo で当ブログを作り直しました（Gatsbyから移行）

しばらくサイトの更新ができてませんでした。。。が、心機一転新しいツールを使って作り直しました。

前まで、Gatsby を使ってたり、 JamStack な構成にしてたりしたのですが、以下の点でちょっと辛くなってきました：

Gatsby やその周辺テーマのライブラリ更新を何も考えずにやるとサイトが動かなくなってしまう
テーマを色々更新していたのですが、維持するのが面倒になってきた
- 自由度が高かったのですが、色々やろうと思うと結構手間だった
JamStack な構成もオーバースペックになってきた
- もう Markdown でサクッと記事を書ける方が良いということで、大体のツールを色々探していたのですが、 Go 製の静的サイトジェネレータ Hugo を使うのが無理なく維持管理できそうと思ったので、作り直してみました。

サイトの作成から設定まで
#

Hugo のインストール
#

Hugo の公式ドキュメントの Installation を参考に各環境に応じてインストールできます。当方の環境は mac なので、 brew 経由でインストールできました：

1$ brew install hugo
2$ hugo version
3hugo v0.127.0+extended darwin/arm64 BuildDate=2024-06-05T10:27:59Z VendorInfo=brew

サイトの作成
#

hugo コマンドですぐに作成できます：

1$ hugo new site hugo_website_example

すると、次のような構成のファイルが自動作成されます：

 1hugo_website_example
 2|-- archetypes
 3|   `-- default.md
 4|-- assets
 5|-- content
 6|-- data
 7|-- hugo.toml
 8|-- i18n
 9|-- layouts
10|-- static
11`-- themes

hugo コマンドの使い方
#

基本的に使うのは以下の3つです：

hugo server -D: ローカルでサイト立ち上げ
hugo --minify: サイトをビルド
hugo new [ディレクトリ名]/[ファイル名].md: 記事のファイルの新規作成

テーマの導入
#

Hugo 向けのさまざまなテーマが公開されてます。今回は Blowfish を使用しました。こちらもドキュメントの Installation を参考に作成できます。推奨されているのは blowfish-tools をインストールして Hugo のサイトを作るところからテーマのツールにやってもらう方法ですが、今回は先に Hugo のサイトを作成したので、 git のサブモジュールを用いる方法でテーマを導入します：

1$ cd hugo_website_example
2$ git init
3$ git submodule add -b main https://github.com/nunocoracao/blowfish.git themes/blowfish

設定ファイルの作成
#

カスタマイズをしようと思うと、色々な設定はありますが、テーマを導入して日本語のサイトを作るための最低限の設定は以下の通りです: （この辺りの設定は、 Blowfish のテーマの中身の設定ファイルの内容などをそのまま持ってきてよしなに変更すれば適用されます。テーマの中身の設定ファイルを直接編集することはしなくて OK です）

`config/_default/config.toml`
#

1theme = "blowfish"
2baseURL = "https://hogehoge.com/"
3languageCode = "ja"
4defaultContentLanguage = "ja"

`config/_default/language.ja.toml`
#

 1languageCode = "ja"
 2languageName = "日本語"
 3weight = 1
 4title = "OKAZAKI Shogo's Website"
 5
 6[params]
 7  displayName = "JA"
 8  isoCode = "ja"
 9  rtl = false
10  dateFormat = "2006年1月2日"
11  logo = "img/logo.png"
12
13[author]
14  name = "OKAZAKI Shogo"
15  image = "img/profile.png"
16  links = [
17    { email = "mailto:[メールアドレス]" },
18    { github = "https://github.com/[GitHub のアカウント名]" },

ここでロゴやプロファイルの画像を指定していますが、画像ファイルなどは assets のディレクトリの下に置いておくと読んでくれます。

CSS の設定
#

assets ディレクトリの配下に配置すれば OK です。テーマが読まれたあと、上書いて適用してくれます。ここで、フォントを指定したい場合は、ファビコンと同じく static 配下に置いておきます。

firebase の設定
#

CLI ツールで設定します。今回は、既存のサイトの置き換えだったので、以下のように設定していきました：

 1$ firebase init
 2# 以下、質問項目と回答
 3? Which Firebase features do you want to set up for this directory? Press Space to select features, then Enter to confirm your choices. Hosting: Configure files for Firebase Hosting and 
 4(optionally) set up GitHub Action deploys, Hosting: Set up GitHub Action deploys
 5
 6=== Project Setup
 7
 8? Please select an option: Use an existing project
 9? Select a default Firebase project for this directory: [すでにあるプロジェクト名]
10i  Using project [すでにあるプロジェクト名]
11
12=== Hosting Setup
13
14? What do you want to use as your public directory? public
15? Configure as a single-page app (rewrite all urls to /index.html)? No
16? Set up automatic builds and deploys with GitHub? Yes
17? File public/404.html already exists. Overwrite? No
18i  Skipping write of public/404.html
19? File public/index.html already exists. Overwrite? No
20i  Skipping write of public/index.html
21
22Visit this URL on this device to log in:
23https://github.com/login/oauth/authorize?client_id=xxx&state=xxx&redirect_uri=xxx&scope=read%3Auser%20repo%20public_repo
24
25Waiting for authentication...
26
27✔  Success! Logged into GitHub as hogehoge
28
29? For which GitHub repository would you like to set up a GitHub workflow? (format: user/repository) [リポジトリ名]
30
31? Set up the workflow to run a build script before every deploy? No
32
33? Set up automatic deployment to your site's live channel when a PR is merged? Yes
34? What is the name of the GitHub branch associated with your site's live channel? main
35
36✔  Firebase initialization complete!

Firebase の設定のみならず、 GitHub Actions でデプロイするワークフローの設定も入れてしまいました。GitHub Actions から Firebase にデプロイするために必要なトークンなどの情報は、自動的にシークレットに設定してくれます。楽ちんですね。

GitHub Actions の設定
#

自動で作成されるワークフローですが、 Hugo で生成されたサイトをビルドするためのステップは入っていないので、以下のように修正しました：

 1# This file was auto-generated by the Firebase CLI
 2# https://github.com/firebase/firebase-tools
 3
 4name: Deploy to Firebase Hosting on merge
 5on:
 6  push:
 7    branches:
 8      - main
 9jobs:
10  build_and_deploy:
11    runs-on: ubuntu-latest
12    steps:
13      - name: Checkout Repo
14        uses: actions/checkout@v4
15        with:
16          submodules: recursive
17      - name: Setup Hugo
18        uses: peaceiris/actions-hugo@v3
19        with:
20          hugo-version: 'latest'
21      - name: Build
22        run: hugo --minify
23      - name: Deploy
24        uses: FirebaseExtended/action-hosting-deploy@v0
25        with:
26          repoToken: ${{ secrets.GITHUB_TOKEN }}
27          firebaseServiceAccount: ${{ secrets.FIREBASE_SERVICE_ACCOUNT_XXX }}
28          channelId: live
29          projectId: XXX

ポイントは、

チェックアウトのステップで submodules: recursive を指定
- そうしないと、ビルドした public のディレクトリをうまく見つけてくれません
peaceiris/actions-hugo のアクションを利用して、 Hugo のセッティング
ビルドのコマンドは hugo --minify といったところです。

これで、 main に push すれば Hugo のサイトをビルドし、 Firebase にデプロイしてくれるようになりました。

まとめ
#

過去の記事の移行など、作業としては少し手間な部分はありましたが、比較的簡単にサイトを作ることができました。また、維持管理もしやすそうです。テーマなど、自分でバリバリデザインするのでなければ、これくらいの方が扱いやすいなとも思いました。

サイトの作成から設定まで#

Hugo のインストール#

サイトの作成#

hugo コマンドの使い方#

テーマの導入#

設定ファイルの作成#

config/_default/config.toml#

config/_default/language.ja.toml#

CSS の設定#

firebase の設定#

GitHub Actions の設定#

まとめ#