Hugo

はしがき 1つ前の記事でGoogle Analyticsを仕込みたいと言いましたが、早速導入しました。 自分のGoogle Analyticsを導入する目的は、単純に閲覧数が知りたいってだけです。 おそらく他にも色んな情報が取れると思いますが、それらをどう利用するかは全く考えていません。 （今後何かしらの参考にする可能性はあります） 導入方法 この記事で説明している内容のGitHub上のコミットはこちらを参照ください。 Google Analytics 4を利用する前提で記載します。サイトに埋め込む測定IDはG-XXXXXXXXXXの形式のものになります。 Google Analyticsから測定IDを取得するまでの手順は省略します。 導入に当たって、セキュリティや誤使用防止の観点から測定IDをコードに直接書くのを避けています。 測定IDは、ビルド&デプロイのワークフローの手順の中で埋め込むようにしました。 追加した設定 今回、追加または更新したファイルは以下です。 hugo.yaml layouts/_internal/google_analytics.html .github/workflows/deploy-hugo.yaml hugo.yaml Hugoの設定例を参考に、Analyticsの設定を追加します。 services: googleAnalytics: id: __GA_MEASUREMENT_ID__ ここで、キーidの値に測定IDをベタ書き(ハードコード)せず、変数みたいな値を入れ込んでいます。使い方は後述します。 layouts/_internal/google_analytics.html このファイルには、Google Analyticsで測定IDを発行した後に「このコードをあなたのサイトに埋め込んでください」と示されるコードを貼り付けます。 そして、測定IDを埋め込む部分を{{ site.Config.Services.GoogleAnalytics.ID }}に置き換えます。 <script async src="https://www.googletagmanager.com/gtag/js?id={{ site.Config.Services.GoogleAnalytics.ID }}"></script> <script> window.dataLayer = window.dataLayer || []; function gtag() { dataLayer.push(arguments); } gtag("js", new Date()); gtag("config", "{{ site.Config.Services.GoogleAnalytics.ID }}"); </script> {{ site.Config.Services.GoogleAnalytics.ID }}はHugoのサイト変数と呼ばれるものです。この変数はhugo.yamlに対応しています。 変数を使うことで、測定IDを色んな場所にハードコードしなくてもいいようにしています。 .github/workflows/deploy-hugo.yaml GitHub Pagesへデプロイするためのワークフローに、測定IDを埋め込むための処理を加えています。 追記した部分を抜粋: jobs: build: steps: ... - name: Replace Google Analytics Measurement ID run: | if [ -f hugo.yaml ]; then sed -i "s/__GA_MEASUREMENT_ID__/${{ vars.GA_MEASUREMENT_ID }}/g" hugo.yaml fi ... ここで、先ほどhugo.yamlに入れ込んだ値__GA_MEASUREMENT_ID__を、GitHubリポジトリ側で設定してある変数に置き換えるようにしています。 ...

はしがき 学んだことをメモできる環境が欲しいと思い、HugoとGitHub Pagesを使ってサイトを構築しました。 大体こういうサイトって最初の投稿は、このサイトをどう構築したのかっていうものになりますよね。 なのでそれを書き残します。 まず、ツール選定に当たってはChatGPTに力を借りました。 今まで静的サイトジェネレーターのようなツールには触れてこなかったので、どんなツールがあるか知らないということもあり。 要望は以下 内容はMarkdownで書きたい できればブログサービスを使うのではなく、自分でツールを使い管理したい そう聞くとGhostやJekyllやHugoがあるよって教えてもらい、軽量さや扱いやすさを加味してHugoにしました。 Hugoで作った静的サイトのホスト先はNetlifyがメジャーなようですが、無料といえど利用するサービスを増やしたくなかったので、 GitHub Pagesにホストしてもらうことにしました。 構成 GitHubにコード一式（Hugoでビルドした後のpublic/配下のファイルではありません）を置いておき、 mainブランチの変更をトリガーとしてワークフローを回しビルド、そのままPagesにデプロイします。 図にすると以下のような感じ。非常にシンプル。 この構成で使っているサービスはすべて無料で使えます。ありがたい。 静的サイトジェネレータ+ホスティングサービスでサイトを作る場合、通常であれば開発環境などで一度ビルドし、 生成物をホスト先にアップロードするという方法になると思います。 ですが今回の構成では、ビルドとアップロードをワークフローが担ってくれるので、手元でビルドする手間が省かれているところも大きなポイントです。 構築、公開 具体的なコマンドや構築手順については既に様々な記事があるので、ここでは省略します。 おおよそ、以下のことをすれば構築は完了します。 GitHubにリポジトリを作り、開発環境にクローン 開発環境にHugoをインストール、ローカルリポジトリでサイトを作成 テーマを適用 Hugoを設定 GitHubリポジトリでPagesを有効化、デプロイ方法はGitHub Actionsにする デプロイ用のワークフローを作成 コードをPush なお、GitHubのリポジトリはPublicにする必要があるので、そこを気にする人は注意してください。 Hugoのテーマ Hugoはテーマと呼ばれるデザインのテンプレートが用意されており、適用させるテーマによってサイトの外観を変えることができます。 自分は PaperMod を使うことにしました。 最初に参考にした記事で使っていたのがそれで、パッと見で良いなと感じたので特に深く考えず決めました。 ただ、ドキュメントを読む中で知ったのですが、PaperModはFuse.jsによるページの検索機能が標準でついており、 特に自分で設定しなくてもFuse.jsを使えます。検索はおいおい実装しようと思っていたので、これは嬉しい誤算でした。 参考URL 構築にあたっては以下の記事を参考にしました。 Hugo+Github Pagesでプロフィールページを作ってみた PaperMod’s wiki Hugo - Host on GitHub Pages 公式サイトに載っているGitHub PagesでデプロイするためのGitHub ActionsのワークフローのYAMLは、そのままコピペして使えます。 今後について 一旦、サイトを公開して記事を投稿できるようになったので、やりたいことはできるようになりました。 今後は記事を投稿する以外にも、このサイトの利便性を向上や内容を充実させるための取り組みもしていきたいと思います。 とりあえずぱっと思いつくものだと以下 Faviconを設定する Aboutページを作る 検索エンジンでこのサイトが表示されるようにする Google Analyticsでアクセス情報の分析をできるようにする そんな感じでよろしくお願いします。