前回のNginx設定に続き、今回はブログの心臓部である「Astro.js」の構築と、こだわりのカスタマイズ内容について共有します。 [cite: 31]

なぜAstro.jsを選んだのか

モダンなフロントエンドフレームワークが数多くある中で、Astroを採用した理由は以下の通りです。

• 圧倒的な表示速度: 必要な時だけJavaScriptを読み込む「アイランドアーキテクチャ」により、SEOに強い爆速サイトが作れます。 [cite: 31]
• Markdown/MDXのネイティブサポート: 記事執筆の体験が極めてスムーズです。 [cite: 14, 277]
• 柔軟なコンポーネント設計: 「特定のページだけ広告を消す」といったロジックがシンプルに実装できます。 [cite: 31, 260]

Dockerによるプロジェクト初期化

ホスト環境を汚さないよう、Dockerコンテナ内で最新のAstro v5（Node.js v22環境）を初期化しました。 [cite: 123, 134, 135]

# プロジェクトの初期化
sudo docker run --rm -v $(pwd):/app -w /app node:22-alpine sh -c "npm create astro@latest . -- --template blog --yes --install --typescript strict"

こだわりのUI/UXデザイン

1. インディゴブルー基調のダークモード

知的でスマートな印象を与える「インディゴブルー」をテーマカラーに設定しました。 [cite: 11, 274] また、ユーザーが「太陽/月」ボタンで自由に切り替えられ、その設定をブラウザに記憶するダークモードを実装しています。 [cite: 12, 198, 202, 206]

2. 読者のためのフォント最適化

日本語の長文を快適に読めるよう、OS標準の美しい和文フォントを適用し、PC版では文字サイズを18pxに拡大して視認性を高めています。 [cite: 219, 254, 255]

アフィリエイト運営に必須の「自動PR表記」

アフィリエイトプログラムを利用する場合、各記事に免責事項を載せることが推奨されます。 毎回手動で書くのは非効率なため、レイアウトファイル（BlogPost.astro）に**「H1タイトルの直下に自動で免責事項を挿入する」**ロジックを組み込みました。 [cite: 15, 191, 242, 243]

<h1>{title}</h1>
{ !hideDisclaimer && (
    <div class="affiliate-disclaimer">
        <span>この記事はアフィリエイトプログラムでの収益を得ています。</span>
    </div>
)}

さらに、プロフィールやお問い合わせページではこの表示を消すための「非表示フラグ」も実装し、規約遵守とデザイン性を両立させています。 [cite: 260, 261, 296]

Astro v5でのタグ管理システム

最新のAstro 5の仕様に合わせ、記事を分類するタグ機能を構築しました。 [cite: 321, 323] src/content.config.ts でデータ構造を定義し、動的ルーティング（[tag].astro）を利用してタグごとの記事一覧ページを自動生成しています。 [cite: 313, 324]

これにより、特定の技術トピック（例：#Docker）に関する記事を読者がすぐに見つけられるようになります。 [cite: 321]

まとめ

Astro.jsを使用することで、開発者としての「いじりやすさ」と、読者にとっての「読みやすさ・速さ」を高い次元で統合できました。 [cite: 31] 次回は、自前サーバーで完結させる「セルフホスト型アクセス解析とコメントシステム」の導入について解説します。