仕事にちょっと余裕ができたので、森ソフトのサイトをアップデートしてみました。ついでに、事例紹介をいうページを追加してみたので、その際 hugo でつまずいたところなどをメモっておきます。
hugo および テーマのアップデート
まずは、ずいぶんと放っておきっぱなしだったので、 hugo と テーマ (universal) を新しくしておきます。
hugo のアップデート
まずは、 hugo から。
mor@DESKTOP-DE7IL4F:~/tmp$ wget https://github.com/gohugoio/hugo/releases/download/v0.108.0/hugo_0.108.0_linux-amd64.deb mor@DESKTOP-DE7IL4F:~/tmp$ sudo apt purge hugo mor@DESKTOP-DE7IL4F:~/tmp$ sudo apt install ./hugo_0.108.0_linux-amd64.deb mor@DESKTOP-DE7IL4F:~/tmp$ hugo version hugo v0.108.0-a0d64a46e36dd2f503bfd5ba1a5807b900df231d linux/amd64 BuildDate=2022-12-06T13:37:56Z VendorInfo=gohugoio mor@DESKTOP-DE7IL4F:~/tmp$
hugo のプロジェクトのディレクトリに移動して、今のサイトを表示させてみます。
mor@DESKTOP-DE7IL4F:/mnt/d/work/own_app/mywebsite$ hugo server Start building sites … hugo v0.108.0-a0d64a46e36dd2f503bfd5ba1a5807b900df231d linux/amd64 BuildDate=2022-12-06T13:37:56Z VendorInfo=gohugoio （中略） Built in 2445 ms Watching for changes in /mnt/d/work/own_app/mywebsite/{archetypes,content,data,i18n,layouts,static,themes} Watching for config changes in /mnt/d/work/own_app/mywebsite/config.toml Environment: "development" Serving pages from memory Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender Web Server is available at http://localhost:1313/ (bind address 127.0.0.1) Press Ctrl+C to stop
特に問題なく動作してますね。
テーマをアップデート
テーマも随分と更新されていますので、追いつきます。
mor@DESKTOP-DE7IL4F:/mnt/d/work/own_app/mywebsite/themes/hugo-universal-theme$ git tag 1.0.0 1.0.1 （中略） 1.2.5 1.3 1.3.1 mor@DESKTOP-DE7IL4F:/mnt/d/work/own_app/mywebsite/themes/hugo-universal-theme$
1.3.1 までしか表示されません。が、Github を見ると1.4までリリース済みのようです。なので、タグを更新します。
mor@DESKTOP-DE7IL4F:/mnt/d/work/own_app/mywebsite/themes/hugo-universal-theme$ git fetch --tags From https://github.com/devcows/hugo-universal-theme * [new tag] 1.3.2 -> 1.3.2 * [new tag] 1.4 -> 1.4 mor@DESKTOP-DE7IL4F:/mnt/d/work/own_app/mywebsite/themes/hugo-universal-theme$ git tag 1.0.0 1.0.1 （中略） 1.2.5 1.3 1.3.1 1.3.2 1.4 mor@DESKTOP-DE7IL4F:/mnt/d/work/own_app/mywebsite/themes/hugo-universal-theme$
1.4 まで表示されるようになりましたね。
テーマを更新します。
mor@DESKTOP-DE7IL4F:/mnt/d/work/own_app/mywebsite/themes/hugo-universal-theme$ git checkout tags/1.4 Previous HEAD position was 00e1f20 Bump ansi_regex (#337) HEAD is now at 1af54bd Not fail when folders doesn't exist. (#371) mor@DESKTOP-DE7IL4F:/mnt/d/work/own_app/mywebsite/themes/hugo-universal-theme$
あれ？更新されませんね。
で、ここで更新したいと思って、あれこれ試しているうちに、 submodule の更新がうまくできなくなってしまいました。なので、一度テーマのディレクトリを削除してから、再度 git submodule update してやり直したら、問題なく更新できました。
テーマの一部をカスタマイズしているので、最新のテーマのファイルを対象に、カスタマイズを反映します。やりかたはこちらの記事と同じです。
ここまでできたら、ローカルで表示して問題ないことを確認しておきます。
事例紹介の追加
元々の universal は、ブログの記事（recent_post）から最新の４つをトップページに表示する構成になっています。森ソフトのサイトでは、ブログははてなブログを利用しているため、この部分を変更して『新着情報』としてニュースなどの告知に使っています。
そのほかにも、もともとのテーマだと、 testimonials （お客様の声）とか clients （顧客）とかも表示できるようになっています。これらを変更して事例紹介を作ろうかとも思ったのですが、トップページに表示する部分と詳細記事の部分から構成される形になるので、やはり前述のブログの部分（新着情報）を改良するのが手っ取り早そうです。
トップページ内で新着情報を表示する部分は、 layout/partials/recent_posts.html にまとまっているので、これを case_stydies.html の名前でコピーして、トップページに表示可能とします。
（前略）
{{ partial "top.html" . }}
{{ partial "nav.html" . }}
{{ partial "carousel.html" . }}
<!-- ここに移動 -->
{{ partial "recent_posts.html" . }}
{{ partial "features.html" . }}
（中略）
{{ partial "see_more.html" . }}
<!-- 位置を移動
{{ partial "recent_posts.html" . }}
-->
<!-- 開発事例を追加 -->
{{ partial "case_studies.html" . }}
{{ partial "clients.html" . }}
{{ partial "footer.html" . }}
</div>
<!-- /#all -->
{{ partial "scripts.html" . }}
</body>
</html>
（元々のテーマと表示する順番を少し変えています。）
recent_posts.html のファイルを見ると、最新の記事を取得する部分は、
{{ $posts := .Paginate (where site.RegularPages "Type" "in" site.Params.mainSections) }}
{{ range first 4 $posts.Pages }}
<div class="col-md-3 col-sm-6">
となっているので、case_studies.html ではこの部分を content 以下に事例紹介記事を保存するフォルダ名である case_study を使って、
{{ $posts := .Paginate (where site.RegularPages "Type" "case_study") }}
{{ range first 3 $posts.Pages }}
<div class="col-md-4 col-sm-6">
としておきます（表示する記事数も変更してます）。繰り返しになりますが、実際の事例紹介の記事は、 content/case_study/ 以下に追加するようにします。
これで、表示できるはずです。試してみると、
あれ？事例紹介にも新着記事が表示されます。
これはいったい、どうなってるんだ？
原因：同一ページ内で paginator を複数持てない
いろいろと調べまくったのですが、なかなか原因がわかりません。ふとその時、新着情報の部分を隠しても、表示がおかしいのだろうか？と思いついて、試してみると、ちゃんと表示されます。
ん？最初に取得したデータがキャッシュされてるようだぞ。で、調べてみると、ありました。
こちらの記事に、
If you call .Paginator or .Paginate multiple times on the same page, you should ensure all the calls are identical. Once either .Paginator or .Paginate is called while generating a page, its result is cached, and any subsequent similar call will reuse the cached result. This means that any such calls which do not match the first one will not behave as written.
としっかりと、２回呼び出しても最初のものが使われるよ、とあります。これですね。
なんでこんな仕様なんだろうかとよくよく考えてみると、異なる記事のセットに対して、ページネーションを行うということは、当然ページ数とかも違うわけだから、前のページの記事群や次のページの記事群を取ろうと思ったとき、ページが同一じゃないと困る、ということなんでしょうね、きっと。
本来はこの部分は、対象とする一連の記事群から、最新の記事を固定数分だけ取り出すだけでよく、ページ制御（移動）自体は不要なので、わざわざこれを使う必要もないはずです。
まあ、テーマの作者の意図まではわからないので、 recent_posts.html の部分はそのままにしておいて、コピーした事例紹介の部分（case_studies.html）については、
{{ range first 3 (where .Site.RegularPages "Type" "case_study") }}
<div class="col-md-4 col-sm-6">
のようにしておきます。
これで試してみると、正しく表示できました。
追加した記事が表示されない
さて、これで、事例紹介の機能を追加できたので、いくつかの記事を追加していきます。
すると、 hugo server でローカルで表示する際に、なぜか表示されない記事があります。記事の front matter に draft がないにも関わらず、表示されません。
こちらもかなり悩みましたが、わかってみれば簡単で、記事の日時が未来の日付になっていると、デフォルトでは公開されない、という仕様でした。
上記を読むと、
- draft が true
- 未来の日付
- 期限切れの記事
はデフォルトでは公開されないとのことです。
で、これらを表示したければ、 hugo server を実行するときにオプションを指定する必要があるとのことです。例えば、
hugo server -D -F
ということですね。 こうすると、無事に記事が表示されました。
GA4 に対応
hugo および hugo-univesal-theme はすでに Google Analytics の GA4 にも対応済みのようで、 トラッキングコードを GA4 のものに変更すれば、そのまま使えます。
終わりに
たまにしか hugo を触らないので、これなんだっけな？となってしまいがちです。そんなおり、下記の記事
静的サイトジェネレータ「Hugo」と技術文書公開向けテーマ「Docsy」でOSSサイトを作る | さくらのナレッジ
が一通りまとまっていて、思い出すのに重宝したので、載せておきます。ご参考までに。
