HugoのAnankeでGoogle Analytics4を設定する方法

Hugoに慣れてきた

Hugoを使い始めて数週間、だいぶいい感じにブログをカスタマイズできてきました。
前の記事でも書きましたが、私はAnankeという標準的な最低限のテーマを使っているのでその前提で話していきます。

まずhtmlをカスタマイズしたい時はthemes/ananke配下のどのファイルが使われているか特定し、layouts配下にコピーします。その上で変更を加えてHTMLを好きに変更することができます。

このオーバライドの方法を覚えたらあとは簡単で、少しずつ拡張することができます。最近はChatGPT等の生成AIを使って適宜質問しながらHTML, CSS, JSを書いていくことができるので、数年前よりもサイトのカスタマイズが格段に楽になりました。

慣れるとHugoも意外と悪くないなと思えてきました。管理画面がないのでコマンドラインを使って色々操作しないと記事を書き始められないのは相変わらず辛いですが、まだ記事を書きたくなくなるほどではありません。

さらに楽しいブログにしていくために、色々設定を進めていきたいと思います。

GA4を設定する

ブログを構築するにあたってGoogle Analyticsの導入は是非しておきたいです。訪問者数などが詳細に見れるので、ともすれば放置してしまいがちなブログを書くモチベになります。

anankeでは簡単にGA4を設定できるようになっています。
GA4のコンソールでIDを払い出したら、hugo.tomlに以下のように追記しましょう。そうすると自動的にサイトにGAのタグが埋め込まれて分析を開始することができます。

[services]
  [services.googleAnalytics]
    ID = 'G-XXXXX'

もう少し正確に深掘りすると、これはanankeの機能というわけではありません。hugoにはたくさんのHTMLがテンプレートとして前もって用意されていて、anankeのHTMLでもそれを使っています。

base.html

{{ if eq (getenv "HUGO_ENV") "production" | or (eq .Site.Params.env "production")  }}
    {{ template "_internal/google_analytics.html" . }}
{{ end }}

気になった方はhugoのソースコードをのぞいてみてください。たくさんの便利なテンプレートが見つけられます。

終わりに

NetlifyでHugoデプロイしていますが、簡単に小綺麗で高速なサイトが作れていい感じです。どんどんブログカスタマイズするぞー。
次やりたいのはこの辺ですね

コメント欄の追加
記事以外のページ要素を追加
トップページのサムネのサイズ調整(widthを100%にして最大のheight以上は切り抜きたい)
文字のサイズをもっと小さくする
行間のスペースを開ける対応
PC版の本文領域のwidthが狭すぎるので調整。余ったサイドバーにコンポーネントを追加

また何かいい設定終えたら記事にしようと思います。では短いですが今日はこの辺で。