Astro.jsで技術ブログを構築する方法

この記事では、Astro.jsを使用して技術ブログを構築する方法について詳しく解説します。

なぜAstro.jsを選んだのか

Astro.jsを選択した理由は以下の通りです：

1. 高速な静的サイト生成: ゼロJavaScriptがデフォルト
2. 柔軟なフレームワーク対応: React、Vue、Svelteなど複数のフレームワークに対応
3. 優れたMarkdownサポート: Content Collectionsによる型安全なコンテンツ管理
4. CloudFlare Pages対応: 簡単なデプロイメント

セットアップ手順

1. プロジェクトの初期化

npm create astro@latest my-blog -- --template minimal --typescript
cd my-blog
npm install

2. 必要な依存関係の追加

npm install @astrojs/tailwind @astrojs/rss tailwindcss
npm install @astrojs/markdown-remark remark-math rehype-katex
npm install -D @tailwindcss/typography

3. 設定ファイルの編集

astro.config.mjsの設定例：

import { defineConfig } from 'astro/config';
import tailwind from '@astrojs/tailwind';
import remarkMath from 'remark-math';
import rehypeKatex from 'rehype-katex';

export default defineConfig({
  integrations: [tailwind()],
  markdown: {
    remarkPlugins: [remarkMath],
    rehypePlugins: [rehypeKatex],
    shikiConfig: {
      theme: 'dark-plus',
      wrap: false,
    },
  },
  site: 'https://your-blog.pages.dev',
});

Content Collectionsの活用

Astroの強力な機能の一つがContent Collectionsです：

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

const articlesCollection = defineCollection({
  type: 'content',
  schema: z.object({
    title: z.string(),
    date: z.date(),
    draft: z.boolean().default(false),
    description: z.string().optional(),
    tags: z.array(z.string()).default([]),
    category: z.string().optional(),
  }),
});

export const collections = {
  articles: articlesCollection,
};

パフォーマンス最適化

画像の最適化

Astroは自動的に画像を最適化します：

---
import { Image } from 'astro:assets';
import heroImage from '../assets/hero.jpg';
---

<Image src={heroImage} alt="Hero" width={800} height={400} />

バンドルサイズの最適化

• 未使用のCSSを自動で除去
• JavaScript の Tree Shaking
• 自動的なコード分割

デプロイメント

CloudFlare Pagesへのデプロイは非常に簡単です：

1. GitHubリポジトリをCloudFlare Pagesに接続
2. ビルドコマンド: npm run build
3. 出力ディレクトリ: dist

まとめ

Astro.jsを使用することで、高速で保守性の高い技術ブログを構築できます。特に以下の点が優れています：

• 型安全なコンテンツ管理
• 優れた開発体験
• 高いパフォーマンス
• 簡単なデプロイメント

次回は、検索機能やRSSフィードの実装について詳しく解説する予定です！