ブログシステム構築記 - Astro + Cloudflare Pagesで作るモダンブログ

はじめに

社内での技術ナレッジ共有を目的として、マイブログシステムを構築しました。この記事では、技術選定から実装までの過程を記録します。

技術選定

なぜAstroを選んだか

静的サイトジェネレーター（SSG）の選定にあたり、以下の要件を重視しました：

• 高速なパフォーマンス: Lighthouse 100点を目指す
• Markdown対応: 記事はMarkdownで書きたい
• 静的ホスティング対応: 無料の静的ホスティングで公開できること
• モダンなDX: TypeScript、HMR対応

Astroは「デフォルトでJavaScript 0」のアーキテクチャにより、最速のパフォーマンスを実現できます。

// astro.config.mjs
import { defineConfig } from "astro/config";
import mdx from "@astrojs/mdx";
import sitemap from "@astrojs/sitemap";

export default defineConfig({
  site: "https://dawneel.lacue.uk",
  base: "/blog-modern",
  integrations: [mdx(), sitemap()],
});

Tailwind CSS 4

Tailwind CSS 4ではViteプラグインとして統合され、@themeブロックでデザイントークンを管理できます。

@theme {
  --color-primary-500: oklch(0.55 0.25 260);
  --color-accent-500: oklch(0.7 0.18 180);
  --font-display: "Inter", system-ui;
}

ホスティング: Cloudflare Pages

ホスティングにはCloudflare Pagesを採用しました。決め手は次の3点です：

• 無料で運用できる: 静的サイトの配信に費用がかからない
• privateリポジトリのまま公開できる: ソースコードを非公開に保ったまま、サイトだけを公開できる（本ブログのリポジトリは非公開で運用しています）
• 独自ドメイン対応: https://dawneel.lacue.uk/blog-modern/ として独自ドメイン配下で配信できる

静的サイトはビルド成果物さえあればどこからでも配信できるため、Astro側の設定はサイトURLとベースパスの指定だけで済みます。

Content Collections

Astro 5のContent Collectionsを使い、型安全なコンテンツ管理を実現しました。

const blog = defineCollection({
  schema: z.object({
    title: z.string(),
    description: z.string(),
    pubDate: z.coerce.date(),
    tags: z.array(z.string()),
    category: z.string(),
  }),
});

フロントマターがスキーマに合わないとビルド時にエラーになるため、記事のメタデータの品質をCIで担保できます。

CI/CDパイプライン

GitHub Actionsで自動ビルド＆デプロイを構成しました。mainブランチにpushすると、次の処理が自動で走ります：

1. Astroによる静的サイトビルド
2. Pagefindによる全文検索インデックスの生成
3. ビルド成果物を_site/に配置（ルートは/blog-modern/へリダイレクト）
4. wrangler CLI経由でCloudflare Pages（プロジェクトdawneel-blog）へデプロイ

Cloudflareの認証情報（APIトークン・アカウントID）はGitHub Secretsで管理し、ワークフローからのみ参照します。push一発で検索インデックスの更新まで含めて公開が完了します。

AI自動投稿

AIコーディングエージェントのClaude Codeを活用し、定期的に記事を自動生成・投稿する仕組みも導入しました。詳しくは別記事で解説します。

まとめ

Astro + Tailwind CSSにCloudflare Pagesの無料ホスティングを組み合わせる構成は、低コストで高性能なブログシステムを構築するのに最適です。サーバーレスの静的サイトなので運用の手間もほぼゼロ。「書いてpushするだけ」の快適なブログ基盤ができました。