winds.from.oz 技術メモ

Tag: Hugo

Google Analytics MCPでGA4を見る

Posted:   |   Categories: hugo   |   Tags: ga4, google-analytics, hugo, mcp

Google Analytics MCPでGA4を見る

目的

Hugo site に GA4 tag を入れた後、Google Analytics の画面を毎回開かず、LLM から自然文で GA4 の傾向を読む。

Google Analytics MCP server は、Google Analytics Admin API と Google Analytics Data API を使うローカル MCP server である。 Google 公式ドキュメントでは read requests 専用とされており、Analytics の設定変更や削除はできない。

家庭向け個人サイトでは、最初から自動通知を作り込むより、次の順で使うのが軽い。

  1. GA4 標準 UI / scheduled email で週次のざっくり確認
  2. 気になった時に Google Analytics MCP で自然文確認
  3. 定期 Slack 通知が必要になったら Data API を直接呼ぶ小さい script を作る

MCP は対話的な探索に向く。定期実行や確実な通知は、MCP より Data API 直叩きの方が構成を単純に保ちやすい。

できること

公式 README で公開されている tool は次の通り。

Read more...

Hugo アーキタイプをもっと活用する

Posted:   |   Tags: archetype, go-template, hugo, static-site-generator

目次

  1. はじめに
  2. 日付フォーマットを自由に変える
  3. .Site 変数で共通情報を自動入力
  4. サンプル archetypes/default.md

はじめに

Hugo には hugo new コマンドで Markdown 雛形を生成する仕組みがあります。 そのテンプレート（アーキタイプ）は Go テンプレート構文を使えるため、

  • 日付を好きなフォーマットで書き出す
  • サイト設定ファイル（hugo.toml など）の値を差し込む

といった“ちょっとした自動化”が簡単に実現できます。 この記事では実際のテンプレート例を交えながら手順を解説します。

日付フォーマットを自由に変える

基本

date: '{{ time.Now.Format "2006-01-02" }}'
  • time.Now: 生成時点の日時
  • Format の引数は Go 固有の書式 (2006-01-02 が YYYY-MM-DD 相当)

よく使うパターン

目的書式出力例
時分まで入れたいtime.Now.Format "2006-01-02 15:04"2025-04-23 13:15
ISO 8601 (JST)(time.Now.In "Asia/Tokyo").Format "2006-01-02T15:04:05+09:00"2025-04-23T13:15:00+09:00
人が読む日付time.Now | time.Format ":date_medium"2025/04/23

.Site 変数で共通情報を自動入力

archetypes/ でも .Site オブジェクトにアクセスできます。 まずサイト設定ファイルに共通値を持たせましょう。

Read more...

hugoでカテゴリによって背景を変える

Posted:   |   Categories: hugo   |   Tags: hugo

背景

カテゴリごとに背景を変えられたら、今見ている記事の分野が少し分かりやすくなる。 また、背景に軽いアニメーションを加えると、技術メモの見た目にも変化を付けられる。

このサイトでは、Markdownのフロントマターにある categories を使い、カテゴリごとにCSSと背景用HTMLを切り替えている。

現在は次の3種類を設定している。

categoriesの値背景
docker海の背景と揺れるDockerのクジラ
AWSClient、CloudFront、ALB、ECS、RDS、ElastiCacheの構成図
bashtcpdump風のログが流れる黒い画面

カテゴリ名は大文字・小文字を区別するため、AWSの記事では aws ではなく AWS と記述する。

Hugoでの分岐

Hugoでは .Params を経由して、ページのフロントマターに設定した値を参照できる。

今回使用するのは .Params.categories である。

参考: Page variables | Hugo

処理は次の2か所に分けている。

  1. layouts/partials/head.html でカテゴリ別のCSSとJavaScriptを読み込む
  2. layouts/_default/single.html で背景表示に必要なHTMLを生成する

背景画像やアイコンは static/images/、カテゴリ別CSSは static/css/ に配置している。

変更箇所

現在の主な関連ファイルは次のとおり。

ファイル役割
layouts/partials/head.htmlカテゴリ別CSSとJavaScriptの読み込み
layouts/_default/single.html背景用HTMLの生成
static/css/docker.cssDocker背景
static/css/aws.cssAWS構成図の基本レイアウト
static/css/aws-icons.cssAWSアイコンとスケールアニメーション
static/css/aws-flow.css接続線とアイコンだけの表示調整
static/css/aws-article.cssAWS記事本文と構成図の最終的な見た目
static/js/aws-flow.jsオブジェクト間の線と光点の描画
static/css/bash.csstcpdump風背景
assets/css/userstyles.cssサイト全体の共通スタイル

layouts/partials/head.html

<head> 内で、Markdownの categories に応じて読み込むファイルを切り替える。

{{ if in .Params.categories "docker" }}
<link rel="stylesheet" href="/css/docker.css">
{{ else if in .Params.categories "AWS" }}
<link rel="stylesheet" href="/css/aws.css">
<link rel="stylesheet" href="/css/aws-icons.css">
<link rel="stylesheet" href="/css/aws-flow.css">
<link rel="stylesheet" href="/css/aws-article.css">
<script defer src="/js/aws-flow.js"></script>
{{ else if in .Params.categories "bash" }}
<link rel="stylesheet" href="/css/bash.css">
{{ end }}

カテゴリ別のファイルは共通CSSより後に読み込む。 こうすると、背景を持つ記事だけに追加スタイルを適用でき、カテゴリ固有の設定で共通スタイルを上書きできる。

Read more...

Hugoでサイトを作る

Posted:   |   Categories: hugo   |   Tags: hugo, netlify

Netlify

Netlifyでのデプロイ。Netlify自身がかなり手厚いサポートをしており、かなり楽にデプロイできました。 参考 Host on Netlify

テーマの変更

現在使っているテーマは gevhaz/hugo-theme-notrack

hugoの場合、テーマによってCSS上書きの方法が違うらしくテーマの説明を見ます。

gevhaz/hugo-theme-notrackの説明を見ると

You can add your own CSS by creating a file assets/css/userstyles.css.
The theme will automatically pick it up.

とあります。このファイルを作成します。 ( このファイルは themes/hugo-theme-notrack/layouts/partials/head.html から参照されていました ) 私の希望としては、まずサイトの横幅を広げたいので、そのためのCSSを作成しました。

@media (min-width: 48em) {
  main {
    margin: 0 2%; /* from 15% to 10% */
  }
}
@media (min-width: 64em) {
  main {
    margin: 0 4%; /* from 17% to 12% */
  }
}
@media (min-width: 85.375em) {
  main {
    margin: 0 6%; /* from 21% to 16% */
  }
}
@media (min-width: 120em) {
  main {
    margin: 0 6%; /* from 24% to 18% */
  }
}
@media (min-width: 160em) {
  main {
    margin: 0 5%; /* from 27% to 20% */
  }
}

フォント指定

テーマのデフォルトのフォントが硬い印象だったので変えてみました。

Read more...