以前までブログのコンテンツ管理システムとしてWordPressを使用していましたが、2023年の8月にHugoに移行しました。
その際に選択したテーマはClarityでしたが、 別のテーマも試してみたいと思い、いろいろなテーマを探してみたところBlowfishが良さそうだったので変更しました。
テーマの変更方法
Blowfishのインストール
Hugoはインストール済みなので、Blowfishのインストールから始めています。
Blowfish ToolsというBlowfish管理専用のCLIも提供されていましたが、Git submoduleでインストールしました。
https://blowfish.page/docs/installation/#install-using-git
tomlの設定
config/_default/内のファイルは一旦バックアップを取って、Blowfishのthemes/blowfish/config/_defaultのファイルをconfig/_default/にコピーしました。
Getting Startedに従いhugo.tomlの設定を行いました。
https://blowfish.page/docs/getting-started/
config.toml、params.tomlなどの設定は下記を参考にしました。
https://blowfish.page/docs/configuration/
また、各種tomlファイルの設定は下記のサイトも参考にしました。
https://zenn.dev/ziaensochan/articles/0520c9f645835e
Shortcodesの修正
ClarityのShortcodesは削除し、BlowfishのShortcodesを追加しました。
https://blowfish.page/docs/shortcodes/
外部サイトへのリンクカードについてはBlowfishのShortcodesに存在しないようなので、
下記のHugo公式サイトのCreate your own shortcodesを参考にlayouts/shortcodes/linkcard.htmlを作成し、
その中に外部サイトへのリンクカードを表示するShortcodesを記述しました。
https://gohugo.io/templates/shortcode/
https://rkd3.dev/post/linkcard/
ただし、hugo_v0.141.0以降だとresources.GetRemoteの戻り値の挙動が変わったのでビルド時にエラーが発生するようになりました。
そのため、tryを使用した書き方に変更しています。
全体データ取得部分の変更前
{{- with $result := resources.GetRemote $url -}}
{{- with $result.Err -}}
{{- $title = (print $url "にアクセスできませんでした") -}}
{{- else -}}
<!-- headを取得 -->
{{- $head := index (findRE "<head[^>]*?>(.|\n)*?</head>" $result.Content) 0 -}}
全体データ取得部分の変更後
{{- with try (resources.GetRemote $url) -}}
{{- with .Err -}}
{{- $title = (print $url "にアクセスできませんでした") -}}
{{- else with .Value -}}
<!-- headを取得 -->
{{- $head := index (findRE "<head[^>]*?>(.|\n)*?</head>" .Content) 0 -}}
faviconの取得部分の変更前
<!-- /favicon.icoを取得 -->
{{- if not $favicon_url -}}
{{- range $favicon_ext := (slice ".ico" ".png" ".gif") -}}
{{- $root_favicon_path := print $target_url.Scheme "://" $target_url.Hostname "/favicon" $favicon_ext -}}
{{- $favicon := resources.GetRemote $root_favicon_path -}}
{{- if not $favicon -}}
{{- continue -}}
{{- else -}}
{{- $favicon_url = $root_favicon_path -}}
{{- break -}}
{{- end -}}
{{- end -}}
{{- end -}}
faviconの取得部分の変更後
<!-- /favicon.icoを取得 -->
{{- if not $favicon_url -}}
{{- range $favicon_ext := (slice ".ico" ".png" ".gif") -}}
{{- $root_favicon_path := print $target_url.Scheme "://" $target_url.Hostname "/favicon" $favicon_ext -}}
{{- with try (resources.GetRemote $root_favicon_path) -}}
{{- with .Err -}}
{{- continue -}}
{{- else -}}
{{- $favicon_url = $root_favicon_path -}}
{{- break -}}
{{- end -}}
{{- end -}}
{{- end -}}
{{- end -}}
移行でエラーが発生したところ
ShortcodesのArticleで循環参照が発生し、ビルドが終わらない
BlowfishのShortcodesのArticleを使用すると、内部サイトへのリンクを下記のように表示することができます。
ただし、相互のページにArticleのShrtcodesを使用してリンクを張ると循環参照が発生し、ビルドが完了せず、タイムアウトでエラーが発生します。 どちらかのArticleのShortcodesを削除するか、リンクを直接貼るなどの対応が必要です。
faviconが表示されない
Blowfishで独自のfaviconを表示したいときは、staticに置けば表示されるはずなのですが、ファイルを置いても表示されず、デフォルトのフグのアイコンが表示されてしまいました。
この場合、ブラウザのキャッシュが残っているようなので、強制リロード(Edgeの場合Ctrl+F5)行うと独自のfaviconが表示されました。
https://github.com/nunocoracao/blowfish/discussions/963
Cloudflareのデプロイでエラーが発生
GithubのリポジトリにHugoのファイルをプッシュするとCloudflareのPagesにデプロイされるように設定しています。 ローカル上でのビルドは問題なかったのですが、Cloudflareのデプロイで下記のエラーが表示され、デプロイが出来なくなってしまいました。
ERROR render of "page" failed:
"/opt/buildhome/repo/themes/blowfish/layouts/_default/baseof.html:8:4":
execute of template failed: template: _default/single.html:8:4:
executing "_default/single.html" at <partial "head.html" .>:
error calling partial:
"/opt/buildhome/repo/themes/blowfish/layouts/partials/head.html:48:48":
execute of template failed: template: partials/head.html:48:48
: executing "partials/head.html" at <resources.Concat>:
error calling Concat: slice []interface {} not supported in concat
Blowfishのpartials/head.htmlの48行目でエラーが発生しているようなのですが、どう修正すればいいか分かりませんでした。
色々試してみたところHugoのバージョンをv0.117.0からv0.135.0にアップデートしたら、Cloudflareにデプロイできるようになりました。v0.136.0以上だとローカルのビルドでエラーが発生するのでv0.135.0を使用してます。
バージョンアップしたことにより、ローカルのビルド時間はそれほど変わらなかったですが、Cloudflareのデプロイ時間がかなり長くなるようになってしまいました。
バージョンアップ前は1分程度でデプロイされていたのが、バージョンアップ後は10分程度かかるようになってしまいました。
ビルド時間が長くなってしまったのは残念ですが、このまま使用したいと思います。
番外:コメント機能(giscus)の導入
Blowfishとは関係ないですが、問い合わせ関連の機能も変更しました。
WordpressからHugoに移行したときに、Googleフォームを使用して問い合わせフォームを作成しましたが、
GithubのDiscuss機能を利用して各ページにコメントを残せるgiscusに移行しました。
各ページの一番下にGithubアカウントを利用してコメントを残すことができます。
下記を参考にGithubのPublicリポジトリを作成します。
Githubのリポジトリを作成したら、下記のサイトを参考にgiscusを導入します。
Blowfishのコメント機能設定は公式サイトの下記のページを参考にしました。
https://blowfish.page/docs/partials/#comments
https://blowfish.page/docs/configuration/#theme-parameters
参考サイト
https://zenn.dev/ziaensochan/articles/0520c9f645835e