hugo-theme-terminal でOGPに任意の画像を設定する方法

Fri, 09 Jun 2023 17:02:33 +0000

hugo-theme-terminal でOGPの設定に少し詰まったのでやったことを書いておく。

前提

hugo version: hugo v0.112.5+extended darwin/arm64

困り

筆者はカバー画像を記事一覧・記事詳細画面に表示したくない、かつOGPは全共通の画像を使いたい
hugo-theme-terminalでは任意の画像をOGPだけに設定できない。（カバー画像をOGPとすることはできる）

やったこと

多少ハッキーな方法ではあるが以下の方法で実現した。

各記事のFront Matterにcover: "${OGP_URL}"指定(archetypesにテンプレートとして書いておくと便利)
以下のCSSを追加

.post-cover {
  display: none;
}

このブログをhugoで作り直した

Wed, 07 Jun 2023 13:25:41 +0000

もともとこのブログはNext.js + Vercelの構成で作られていたが色々と辛くなってしまったのでお手軽にブログが作れそうなhugo + GitHub Pagesの構成に移行した。

動機

もともとNext.jsを触ってみたかったのでNext.jsで書いたでブログを運営していた。

このときのディレクトリ構成が以下のような感じになっていて、画像はrepositoryにアップロードして(PRのコメント欄とかに画像を貼って取得したhttps://user-images.githubusercontent.com/xxxxxのようなURLを使って)それをマークダウンから呼び出していた。

root/
  ├ posts/
  │　├ post1.md
  │　├ post2.md
  │　└ post3.md
  └ ...

ところがGitHubのrepositoryにアップした画像まわりの仕様が変わり¹、それ以降private repositoryにアップした画像は認証付きになったため画像のホスト方法の変更が必要になった。

そこで管理のしやすさから以下のようにマークダウンと同一ディレクトリに画像を配置する方法にすることにした。

root/
  ├ posts/
  │  ├ post1.md/
  │  │  ├ index.md
  │  │  └ image.png
  │  ├ post2.md/
  │  │  ├ index.md
  │  │  └ image.png
  │  └ post3.md/
  │     ├ index.md
  │     └ image.png
  └ ...

で、それをやろうとしたがどうにもうまく画像を読み込むことができなかった。(当然悪いのはNext.jsではなく1000億%自分の技術力のNASAです)

ちゃんとNext.js(やJSのツールチェイン周り)のお勉強をすればNextでもできたと思うが当面JS関連の技術を触る予定もないしブログの管理にそこまで時間をかけたい気持ちもなかったので諦めてhugoに移行することにした。

やったこと

テーマ選定(panr/hugo-theme-terminalを選択した)
フォントなどスタイルの調整
ファビコンの設定
デプロイの自動化
カスタムドメインの設定
GA4導入

以下部分的に補足する。

デプロイの自動化

以下のようなyamlを.github/workflows/deploy.yamlとして配置するとmainへのpush時に自動でデプロイが行われる。

カスタムドメインに指定したい場合はcnameを指定しないとデプロイのたびにカスタムドメインが404になってしまうので注意。

name: deploy

on:
  push:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-latest # サポートされていないバージョンを指定するとGitHub Actionsがずっとrunningになるので注意
    steps:
      - uses: actions/checkout@v2
        with:
          submodules: true
          fetch-depth: 0

      - name: Setup Hugo
        uses: peaceiris/actions-hugo@v2
        with:
          hugo-version: "0.112.5"
          extended: true

      - name: Build
        run: hugo

      - name: Deploy
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./public
          cname: blog.kyu08.com # カスタムドメインの設定をしていない場合は不要

GA4の導入

こちらの記事を参考に進めたらできた。

1点だけ注意が必要なのはpartialsの扱いがthemeによって異なる(っぽい)こと。

panr/hugo-theme-terminalでは

<!--
To add an extended head section, please create
`layouts/partials/extended_head.html` in your Hugo directory.
-->

とのことだった²のでlayouts/partials/extended_head.htmlにタグの設定を記述した。

着手 ~ 公開まででかかった時間

たぶん6hくらい。

数箇所詰まったがドキュメントや先人のブログのおかげですぐに解決できた。

おそらくミニマムな状態(カスタムドメイン設定なし, テーマのデザインをそのまま利用, GA4なしなどなど)なら1hもかからずに公開までできると思う。

hugoのいいところ

既存のテーマを利用すると手軽に色々できる(TOC, シンタックスハイライト, 脚注などなど)。とにかくお手軽なのが最高。基本的にはテーマを選んで記事を書いてデプロイすればブログが公開できてしまうのですごい。
ドキュメント・themeのソースコードを読めば大抵解決する
watchオプションがあるのでhugo serve -wを実行するとホットリロードが有効になるので捗る

ハマったところ

~~長くなりそうなので別途記事にする予定~~

それぞれ記事にした。

実際の運用はこんな感じ

記事作成用のブランチを作成
記事を作成
PRを作成してmainにマージ
GitHub Actionsでビルド・デプロイが走る

2.記事を作成だけ軽く補足すると、Makefileに以下のようなターゲットを定義したので

.PHONY: new
new:
	@read -p "post id: " id; \
	hugo new "posts/$${id}/index.md"

こんな感じで動く。地味に楽。

ちなみにデプロイは1分くらいで完了するのでサクサク反映できて嬉しい。

おわりに

色々追加したい機能はあるけどとりあえず最低限の機能はできたのでヨシ！とする。

ブログたくさん書くぞ〜

感想はtwitterとかで呟いたりリプしてくれたりすると跳んで喜びます。

hugo on blog.kyu08.com

hugo-theme-terminal でOGPに任意の画像を設定する方法

前提

困り

やったこと

このブログをhugoで作り直した

動機

やったこと

デプロイの自動化

GA4の導入

着手 ~ 公開まででかかった時間

hugoのいいところ

ハマったところ

実際の運用はこんな感じ

おわりに