Astroでブログ作成してみた話 -技術編-

こんにちは、えふてぃです！

普段はNext.jsでWebアプリを作ることが多いですが、今回はコンテンツ駆動のウェブサイト向けのフレームワーク「Astro」でこのブログを作ってみました。

結論から言うと、めちゃくちゃ良いです。

特に個人ブログを作るなら、Next.jsよりAstroの方が圧倒的に楽でした。今回はその理由と、実際に使ってみて感動したポイントを共有しますね。

🚀 Astroを選んだ3つの理由

1. ビルド時間が爆速！開発体験の良さに感動

まず驚いたのがビルド時間の速さです。このブログをビルドしてみたら：

[build] 12 page(s) built in 1.49s
[build] Complete!

たった1.5秒でビルド完了！Next.jsのプロジェクトだと10秒以上かかることも多いので、この速さは割と驚きでした。

さらに、Astroの設計思想が「Zero JavaScript by default」なので、生成されるサイト自体もかなり軽いです。

// Next.jsだと自動でReactがバンドルされる
// Astroは必要な部分だけJavaScriptを送る

といった感じですね。

2. Markdownファイルがそのまま記事になる快適さ

Next.jsあたりでブログを作ると、MDXの設定やらremark/rehypeプラグインの設定やらが面倒そうだ…。

Astroなら最初から全部入ってます（圧倒的感謝）：

---
title: '記事のタイトル'
description: '記事の説明'
pubDate: 'Oct 17 2024'
---

## 見出し

本文をMarkdownで書くだけ！

しかも、Content Collectionsという機能で型安全に記事を管理できます。

// content.config.tsで記事のスキーマを定義
const blog = defineCollection({
	schema: z.object({
		title: z.string(),
		description: z.string(),
		pubDate: z.coerce.date(),
		categories: z.array(z.enum(['技術', '映画', '読書'])),
	}),
});

これでタイポしたらビルド時にエラーで教えてくれる！TypeScript使いには最高です。

3. 必要な時だけReactが使える柔軟性

「でも動的な機能が欲しくなったらどうするの？」

これも大丈夫らしい。Astroはアイランドアーキテクチャを採用していて、必要な部分だけReactやVue、Svelteを使えます：

---
// 静的な部分はAstroコンポーネントで
import Header from '../components/Header.astro';
// 動的な部分だけReactを使う
import CommentSection from '../components/CommentSection.jsx';
---

<Header />
<article>
	<!-- 記事の内容 -->
</article>
<CommentSection client:visible />

client:visibleで、コンポーネントが画面に表示されたタイミングでJavaScriptを読み込みます。賢い！

💡 実際に使ってみて感じたメリット・デメリット

メリット

爆速ビルド: 2秒でビルド完了。開発時に試しでブログ記事を２０件とかにしても秒で終わりました。
画像最適化が自動: astro:assetsで画像を自動でWebP変換
デプロイが簡単: 今回はCloudflare Pagesにポチッとデプロイ
SEO対策が楽: sitemap、RSS、OGP画像が最初から対応

デメリット

動的機能は工夫が必要: SPAを作りたいならNext.jsの方が向いてる
アセット管理でキャッシュに注意: 画像を移動したらキャッシュクリアが必要なことも

🎯 おすすめできる人

ブログやポートフォリオサイトを作りたい
Markdownで記事を書きたい
余計な設定に時間をかけたくない

🛠️ 簡単！Astroブログの始め方

興味を持った方のために、最速でAstroブログを始める方法を紹介します：

# 1. プロジェクト作成（ブログテンプレート使用）
npm create astro@latest my-blog -- --template blog

# 2. 開発サーバー起動
cd my-blog
npm run dev

# 3. ブラウザで確認
open http://localhost:4321

📁 ちなみにプロジェクト構造はざっとこんな感じ

astro-blog/
├── src/
│   ├── pages/          # ページコンポーネント
│   │   ├── index.astro # トップページ
│   │   ├── about.astro # アバウトページ
│   │   └── blog/       # ブログ関連ページ
│   ├── content/        # コンテンツ管理
│   │   └── blog/       # ブログ記事（.md/.mdx）
│   ├── components/     # 再利用可能なコンポーネント
│   ├── layouts/        # レイアウトテンプレート
│   ├── styles/         # スタイルシート
│   └── assets/         # 画像などの静的アセット
├── public/             # 静的ファイル（フォント、favicon等）
├── astro.config.mjs    # Astro設定ファイル
├── tsconfig.json       # TypeScript設定
└── package.json        # プロジェクト依存関係

まぁわかりやすいフォルダ構成だーって感じです。