全4回にわたってお送りしてきたブログ構築シリーズも今回が最終回です。今回は、サイトの顔となる各種ページ（Home、Profile、Contact）の作成方法と、日々の執筆やアフィリエイト広告管理に役立つ「運用チートシート」をご紹介します[cite: 1]。

1. サイトの顔となるページの作成

プロフィール（Profile）ページのカスタマイズ

Astroのルーティングは非常に直感的で、src/pages/profile.astroを作成・編集するだけでページが完成します[cite: 1]。 アフィリエイトサイトの運営上、プロフィールやお問い合わせページには広告や免責事項（PR表記）を出さないのがベストプラクティスです。そのため、レイアウトファイルに hideDisclaimer={true} というフラグを渡し、表示を制御する仕組みを取り入れています[cite: 1]。

お問い合わせ（Contact）フォームのサーバーレス化

読者やASP担当者からの連絡窓口となるお問い合わせフォームですが、バックエンド（PHP等）を自前で構築するのはセキュリティリスクや管理の手間を伴います[cite: 1]。 そこで当ブログでは「Web3Forms」という無料APIを採用しました[cite: 1]。HTMLの <form> タグを記述するだけで、指定したメールアドレスへ安全に内容を転送してくれます[cite: 1]。

<!-- src/pages/contact.astro -->
<form action="[https://api.web3forms.com/submit](https://api.web3forms.com/submit)" method="POST">
    <!-- 取得したアクセスキーを埋め込む -->
    <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY_HERE">
    <!-- フォームの各種入力項目 -->
</form>

2. 日々のブログ運用チートシート

インフラエンジニアとしての強みを活かし、執筆環境もシンプルかつ効率的に最適化しています[cite: 1]。

VSCode Remote SSHによる執筆環境

ローカルPCからサーバー（Ubuntu）へVSCodeの「Remote - SSH」拡張機能を使って直接接続し、Markdownファイルを編集・プレビューする手法を採用しています[cite: 1]。これにより、複雑なヘッドレスCMSを導入しなくても、手元のエディタで極めて快適に記事が書けます[cite: 1]。

記事の基本フォーマット（フロントマター）

記事を投稿する際は、src/content/blog/ ディレクトリにMarkdownファイル（.md）を作成し、ファイルの上部に以下のようなメタ情報を記述します[cite: 1]。ここで設定したタグは、自動的にタグ一覧ページと連携します[cite: 1]。

---
title: '記事のタイトル'
description: '検索エンジン向けの説明文'
pubDate: '2026-05-13'
heroImage: '../../assets/blog-placeholder.jpg'
tags: ["Astro", "インフラ", "運用ノウハウ"]
---
本文をここから書きます。

3. アフィリエイト広告の最適な配置方法

ASPの審査に通過した後の、Astro環境における広告配置のベストプラクティスです[cite: 1]。

パターンA：バナー画像リンク（推奨）

ASPから提供される「画像（<img>）＋リンク（<a>）」のシンプルなタグは、Markdownファイル内の見出し直下や、記事の最下部（タグ一覧の上など）に貼り付けるだけで安全に動作し、サイトの爆速な表示速度も犠牲にしません[cite: 1]。

パターンB：AdSense等の動的スクリプト（要注意）

Google AdSenseなどの「自動で中身が変わる広告（JavaScript）」を貼る場合、そのままではAstroの描画サイクルと競合して表示されないことがあります[cite: 1]。 必ず <script> タグに is:inline を付与し、Astroの処理プロセスをバイパスさせてブラウザに直接実行させます[cite: 1]。

<script async src="[https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js](https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js)" crossorigin="anonymous" is:inline></script>

まとめ

4回にわたり、Docker、Nginx、Astro、Umami、Cusdisを組み合わせたモダンで堅牢なブログ環境の構築記録をお届けしました[cite: 1]。 フルスクラッチで環境を構築することで、インフラ技術の学習になるだけでなく、表示速度の最適化や完全なデータ所有権の確保など、多くのメリットを得ることができました[cite: 1]。

この環境をベースに、今後は技術的な備忘録や日々の検証結果などをマイペースに発信していきます！