Astro + Cloudflare Pagesで高速ブログを構築

今回は、この DailyHack ブログの技術スタックについて共有します。Astro と Cloudflare Pages の組み合わせは、パフォーマンスと開発体験の素晴らしいバランスを提供します。

なぜAstro？

Astro は、コンテンツ駆動のウェブサイトに最適な選択肢です：

• ゼロJSバイデフォルト: 必要な場所でのみ javascript を読み込む
• 優れたパフォーマンス: 静的サイト生成で超高速
• 柔軟な統合: React、Vue、Svelte など好きなフレームワークを使用可能
• Markdown対応: ブログ記事の執筆が簡単

Cloudflare Pagesの利点

# デプロイは驚くほど簡単
npm run build
npx wrangler pages deploy dist

主な利点：

• グローバル CDN で世界中で高速
• 無料の SSL 証明書
• 自動デプロイ（Github と連携）
• エッジファンクション対応

実装のポイント

1. コンテンツコレクション

// src/content/config.ts
import { defineCollection, z } from 'astro:content';

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

2. 最適化された画像処理

Astro の Image コンポーネントを使用して、自動的に最適化：

import {Image} from 'astro:assets';

<Image src={heroImage} alt="" width={1200} height={600} />

パフォーマンス結果

Lighthouse スコア：

• パフォーマンス: 100
• アクセシビリティ: 100
• ベストプラクティス: 100
• SEO: 100

この組み合わせで、開発の楽しさとユーザー体験の両方を最大化できます！