HugoのテーマをBlowfishに変更しました

以前までブログのコンテンツ管理システムとしてWordPressを使用していましたが、2023年の8月にHugoに移行しました。

WordPressからHugoに移行しました

その際に選択したテーマはClarityでしたが、 別のテーマも試してみたいと思い、いろいろなテーマを探してみたところBlowfishが良さそうだったので変更しました。

https://blowfish.page/

テーマの変更方法

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.tomlparams.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を使用すると、内部サイトへのリンクを下記のように表示することができます。

WordPressからHugoに移行しました

ただし、相互のページに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リポジトリを作成します。

https://k-kaz-git.github.io/p/hugo%E3%81%AB%E3%82%B3%E3%83%A1%E3%83%B3%E3%83%88%E6%A9%9F%E8%83%BD%E3%82%92%E4%BB%98%E3%81%91%E3%82%8B/

Githubのリポジトリを作成したら、下記のサイトを参考にgiscusを導入します。

https://k-kaz-git.github.io/p/hugo%E3%81%AB%E3%82%B3%E3%83%A1%E3%83%B3%E3%83%88%E6%A9%9F%E8%83%BD%E3%82%92%E4%BB%98%E3%81%91%E3%82%8Bgiscus%E7%B7%A8/

https://giscus.app/ja

Blowfishのコメント機能設定は公式サイトの下記のページを参考にしました。

https://blowfish.page/docs/partials/#comments

https://blowfish.page/docs/configuration/#theme-parameters

参考サイト

https://blowfish.page/

https://zenn.dev/ziaensochan/articles/0520c9f645835e

https://rakuichi4817.github.io/posts/2023/new-theme/

https://rkd3.dev/post/linkcard/

Licensed under CC BY-NC-SA 4.0
最終更新 2025年7月10日 15:00
Hugo で構築されています。
テーマ StackJimmy によって設計されています。