🚀 Hugo × GA4(Google Analytics)連携完全ガイド|初心者でもできるアクセス解析の導入と設定手順

🎯 この記事で得られること このガイドを読めば、次のことができるようになります。 GA4(Google Analytics 4)の仕組みと役割が理解できる GA4 の初期設定(プロパティ作成〜Measurement ID取得)ができる Hugo(特に PaperMod)と GA4 を正しく連携できる GitHub Pages で公開したブログのアクセス解析を開始できる 重要:PaperMod は GA4 の measurement_id を自動で読み込まないため、 extend_head.html に GA4 スニペットを追加する方法が最も確実です。 📘 1. GA4(Google Analytics 4)とは? GA4 は Google が提供するアクセス解析ツールで、 Web サイトのユーザー行動を可視化できます。 GA4 で分かること アクセス数(PV) ユーザー数 滞在時間 流入元(検索・SNS など) ページごとの閲覧数 スマホ / PC の割合 国・地域別アクセス 補足:GA4 は旧 Google Analytics(UA)とは仕組みが異なり、 計測には Measurement ID(G-XXXXXXX) を使用します。 🌐 2. GA4 プロパティを作成する 🪜 手順 Google Analytics にアクセス https://analytics.google.com/ 左下の 管理(Admin) を開く ...

🚀 Hugo初心者入門書|最速で理解する静的サイトジェネレーターの基本と魅力

📘 Hugoとは?(まずは全体像を理解する) Hugo は Go言語で作られた静的サイトジェネレーター(SSG) です。 Markdownで書いた記事を HTML に変換し、高速に Web サイトを生成できます。 Hugoの特徴 とにかくビルドが速い(数百記事でも一瞬) サーバー不要(静的ファイルなのでどこでもホスティング可能) Markdownで記事を書くだけ テーマが豊富(PaperMod、Stack、LoveIt など) GitHub Pages / Netlify / Cloudflare Pages と相性抜群 補足:Hugo は CMS ではありません。WordPress のように管理画面はなく、ファイルベースで管理します。 ⚡ Hugoで何ができるのか? Hugo はブログだけでなく、以下のようなサイトにも向いています。 🔹 ブログ・技術メモ Markdownで書けるため、エンジニアやクリエイターに人気。 🔹 企業サイト・LP 高速でセキュアなため、企業サイトにも採用例多数。 🔹 ドキュメントサイト Hugo公式テーマ「Docsy」など、ドキュメント向けテーマも豊富。 🔹 ポートフォリオサイト 画像や作品をまとめるサイトも簡単に構築できます。 🆚 Hugoと他のツールの違い(WordPress / Jekyll / Next.js) 初心者がつまずきやすいポイントを比較しながら整理します。 🔸 Hugo vs WordPress(CMS) 項目 Hugo WordPress サイト生成 静的 動的 セキュリティ 高い 低め 速度 爆速 遅くなりがち 管理画面 なし あり 運用コスト ほぼ無料 サーバー代が必要 注意:管理画面が欲しい人は WordPress の方が向いています。 ...