winds.from.oz 技術メモ

Category: 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:   |   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...