メインコンテンツへスキップ

ブログのGA4対応、ディレクトリ構成とデプロイ方法変更

blog hugo GA4 GitHub Actions
目次

GA4の対応をずっと放置していてようやく対応した。そして久しぶりにブログを弄ったらcontent/posts/配下に全postがあって見ずらいなとかCIが動かなくなったり等あったので諸々修正した。

ディレクトリ構成の変更
#

content/posts/配下に溜まっていたmdファイルをこのタイミングで年毎のディレクトリに変更した。

before

content/posts/
├── post1.md
├── post2.md
├── post3.md
...snip...
├── post-a.md
├── post-b.md
└── hoge-post
    ├── index.md
    └── hoge.png

after

content/posts/
...snip...
├── 2020
│   ├── post1.md
│   ├── post2.md
│   ├── post3.md
│   └── hoge-post
│       ├── index.md
│       └── hoge.png
...snip...
└── 2023
    ├── post-a.md
    └── post-b.md

今回は現状の更新頻度から月毎のディレクトリは無くても良いかなと判断した。

これで変更をpushしたところデプロイがコケた。

The ubuntu-18.04 environment is deprecated, consider switching to ubuntu-20.04(ubuntu-latest), or ubuntu-22.04 instead. For more details see https://github.com/actions/virtual-environments/issues/6002

暫くメンテしていなかったのでrunner imageはubuntu-18.04のままだった。そして2023/04/03でunsupportedになっていた。
https://github.com/actions/virtual-environments/issues/6002

おそらくimageのバージョンを更新すれば動くようになったがこれを機にデプロイ方法を見直すことにした。

デプロイ方法の変更
#

これまでMediumからHugoに移行したで書いた様にpeaceiris/actions-gh-pagesを使ってgh-pagesブランチにファイルを配置してデプロイする方式だった。

2022年の7月からはGithub Actionsにて直接デプロイする方式も選べるようになっていた1ので、これにする。

ざっくりな内容としてはactions/upload-pages-artifactでデプロイしたいファイルをartifactとして一度uploadし、ブランチにファイルを配置せずにactions/deploy-pagesで直接GitHub Pagesにデプロイする。

設定の仕方はHugoのドキュメントにあるのでこれの通りに設定した。
Host on GitHub

GA4の対応
#

かなり前からアナウンスされていたのでHugoのInternal Templatesでも対応している。
Internal Templates - Google Analytics

theme側で以下のinternal templateを利用するように変更する。

{{ template "_internal/google_analytics.html" .  }}

そしてconfig.tomlでUA-xxx形式のIDをG-xxx形式のIDに変更する。

googleAnalytics = 'G-MEASUREMENT_ID'

GA4のタグIDは以下から確認。
[GA4] Google タグ ID を確認する

著者
suy0n9
Software Engineer

Related

HugoのRSS FeedをFull-textにする
blog hugo rss
Hugoのundraftコマンドを再現する
blog hugo
MediumからHugoに移行した
blog hugo