日々の現場でのトラブル対応や、個人的な技術の備忘録を残す場所として、このブログ「TECH & ROOTS」を開設しました。
開設から約3週間。単に記事を書いていただけでなく、ブログ基盤そのものをエンジニアリングし続けた期間でもありました。この記事では、その技術的な記録をまとめます。
1. なぜ「Hugo + Cloudflare Pages」なのか
技術ブログを始めるにあたり、WordPressも検討しましたが、最終的に静的サイトジェネレーターのHugoとCloudflare Pagesの組み合わせを選びました。
| 観点 | Hugo + Cloudflare Pages | WordPress |
|---|---|---|
| 表示速度 | 静的HTMLの直接配信で高速 | サーバー側でページ生成が必要 |
| 運用コスト | 無料 | サーバー費用が発生 |
| デプロイ | git pushで自動化 | FTPや管理画面での手動操作 |
| セキュリティ | 動的処理がないため攻撃面が少ない | プラグイン脆弱性のリスクあり |
生産技術エンジニアとして「動くものをシンプルに保つ」という現場感覚が、この選択に自然と繋がりました。
2. Hugo移行：アーキテクチャの再定義（4月上旬）
最初から完成形だったわけではありません。当初はCloudflare Workersを触っていましたが、静的サイトの配信にはPagesが適していると知り、早々に切り替えました。その後、Hugoへの本格移行を完遂するまでに以下の整備を行いました。
ディレクトリ構造の整理
Hugoはarchetypes・layouts・contentの各ディレクトリが正しく構成されていないとビルドが通りません。テンプレートの継承関係を整理し、baseof.htmlを起点とした共通レイアウトを確立しました。
固定ページを記事一覧から除外する
Hugoのデフォルト設定では、プライバシーポリシーやお問い合わせページが通常の記事と一緒にトップ一覧に並んでしまいます。これを防ぐため、テンプレートに以下のフィルタリング処理を追加しました。
{{ range where .Site.RegularPages "Section" "posts" }}
content/posts/配下の記事だけが一覧に表示されるようになり、サイトの見た目が大きく整いました。
Front Matterの標準化
記事ごとのメタデータ（タイトル・日付・カテゴリ・タグ・サムネイル）をYAML形式で統一し、記事管理の一貫性を確保しました。
3. CI/CDパイプラインの確立（4月上旬）
GitHubとCloudflare Pagesを連携させ、git pushをトリガーとした自動ビルド・デプロイ環境を構築しました。
ローカルでMarkdown執筆
↓
git push → GitHubへ転送
↓
Cloudflare Pagesが自動検知
↓
hugo --minify でビルド実行
↓
公開（世界中からアクセス可能）
このフローが確立したことで、記事を書いてpushするだけで数分以内に公開される状態になりました。
構築中に詰まったポイント： Cloudflare Pages上のビルド環境でHugoのバージョン指定が必要でした。環境変数HUGO_VERSIONを明示しないと、古いバージョンでビルドされてテンプレートが正しく動作しないケースがありました。
4. Webパフォーマンス最適化：Core Web Vitals対策（4月中旬）
「読み手にストレスを与えない」ことを第一に、表示速度の最適化に取り組みました。特に**LCP（Largest Contentful Paint：最初に大きなコンテンツが表示されるまでの時間）**の改善にフォーカスしています。
全画像をWebP形式に変換
HugoのImage Processing機能を使い、アップロードした画像を自動的にWebP形式に変換・圧縮しています。
{{ $webp := $img.Resize "1200x webp q75" }}
JPEGやPNGと比較してファイルサイズが大幅に削減され、ページの読み込み速度が向上します。
画像の読み込み優先度を制御
全画像を同じ優先度で読み込むと、画面外の画像まで最初に読み込もうとして速度が落ちます。以下の使い分けで最適化しました。
- アイキャッチ画像（最初に目に入る）：
fetchpriority="high" loading="eager" - それ以外の画像：
loading="lazy"（スクロールして近づいたときに読み込む）
レイアウトシフトの抑制（CLS対策）
画像のwidthとheightを明示することで、読み込み前後でレイアウトがずれる現象（CLS）を防いでいます。
5. 技術的SEOの実装（4月中旬）
OGP（Open Graph Protocol）の動的生成
SNSでシェアされたときにタイトル・説明文・画像が正しく表示されるよう、head内にOGPメタタグを動的生成しています。
<meta property="og:title" content="{{ .Title }}">
<meta property="og:image" content="{{ $ogImg.Permalink }}">
画像URLはabsURLまたは.Permalinkで絶対URLを生成しています。相対パスのままだとSNSのクローラーが画像を取得できないため、ここは注意が必要です。
プライバシーポリシー・お問い合わせの整備
Google AdSenseの審査を通過するために必須のページです。content/privacy.mdとcontent/contact.mdとして作成し、ヘッダー・フッターのナビゲーションからいつでもアクセスできる導線を確保しました。
ads.txtの配置
AdSenseの不正広告防止のために必要なファイルです。Hugoではstatic/配下に置いたファイルはそのままサイトのルートに出力されます。
static/ads.txt → https://tkappy.com/ads.txt
6. UIの整備とスタイリング（4月下旬）
デザインの統一
サイト全体のベースカラーを「紺色（#2c3e50）」、アクセントを「オリーブグリーン（#6b8e23）」に統一しました。シンプルで硬派なエンジニアブログらしさを目指しています。
タグ・カテゴリのバッジ化
記事に紐づくカテゴリやタグをCSSでバッジ形式のUIとして実装し、視覚的に分かりやすくしました。
内部リンクカードの実装
記事内で他記事へのリンクをカード形式で表示するショートコードを作成しました。タイトルとサムネイルが自動取得されるため、記事執筆時は以下の1行を書くだけです。
{{< link "/posts/xxxx" >}}
まとめ：4月の技術的変遷
| 期間 | フェーズ | 主な作業 |
|---|---|---|
| 4月上旬 | Build | Hugo移行・CI/CD構築・固定ページ整理 |
| 4月中旬 | Optimize | Core Web Vitals対策・SEO実装・AdSense準備 |
| 4月下旬 | Refine | UI整備・内部リンク設計・記事品質向上 |
技術基盤が安定した今は、SEOやユーザビリティといったより上位のレイヤーに集中できる状態になっています。「動くシステムを作る」から「プロダクトとして磨き上げる」フェーズへの移行が完了しました。
このブログがどのように作られているかに興味を持った方は、PLCエンジニア向けの解説シリーズもあわせてどうぞ。
