Astroで静的サイトを作る完全ガイド

Astroとは？

Astroは、コンテンツ重視のWebサイトを作るために設計されたモダンなWebフレームワークです。2022年に正式リリースされて以来、ブログやポートフォリオ、マーケティングサイトなど幅広いサイトで採用されています。

最大の特徴は「アイランドアーキテクチャ」と呼ばれる設計思想です。JavaScriptを必要な部分だけに限定することで、デフォルトでゼロJSのHTMLを出力します。これにより、高速なサイト表示が実現できます。

Astroの主な特徴

高速なパフォーマンス

AstroはデフォルトでJavaScriptをほとんど出力しません。サーバーサイドでHTMLを生成するため、初回ロードが非常に速いです。Google Lighthouseのスコアも高く出やすい特徴があります。

複数フレームワーク対応

React、Vue、Svelte、SolidJSなど、好きなUIフレームワークのコンポーネントを同じプロジェクト内で使えます。既存のコンポーネントを活かしつつ、段階的に移行することも可能です。

コンテンツコレクション

TypeScriptで型安全なコンテンツ管理ができます。Markdownや MDXファイルを自動的に読み込み、スキーマバリデーションも行えます。

MDX対応

MarkdownファイルにJSXコンポーネントを埋め込める MDXにネイティブ対応しています。記事内にインタラクティブなコンポーネントを配置できます。

インストール方法

まずはNode.js（v18以上）がインストールされていることを確認してください。

# npmでプロジェクト作成
npm create astro@latest

# プロジェクト名を入力
# テンプレートを選択（Blogが使いやすい）
cd my-blog
npm install
npm run dev

開発サーバーが起動したら、http://localhost:4321 でサイトを確認できます。

プロジェクト構造

Astroプロジェクトの基本的なディレクトリ構造は以下のとおりです。

my-blog/
├── public/          # 静的ファイル（画像、faviconなど）
├── src/
│   ├── components/  # 再利用可能なコンポーネント
│   ├── content/     # MarkdownやMDXのコンテンツ
│   ├── layouts/     # ページレイアウト
│   ├── pages/       # URLに対応するページ
│   └── styles/      # CSSファイル
├── astro.config.mjs # Astroの設定
└── package.json

pagesディレクトリ

src/pages/ 配下のファイルは、そのパス構造がそのままURLになります。

pages/
├── index.astro        → /
├── about.astro        → /about
└── articles/
    ├── index.astro    → /articles
    └── [slug].astro   → /articles/任意のスラッグ

Astroコンポーネントの書き方

.astroファイルはHTMLに近い独自の構文を使います。

---
// フロントマター（サーバーサイドで実行されるTypeScript）
const greeting = "Hello, World!";
---

<!-- HTMLテンプレート -->
<h1>{greeting}</h1>

<style>
  /* スコープ付きCSS */
  h1 { color: blue; }
</style>

コンテンツコレクションの使い方

src/content/config.ts でスキーマを定義します。

import { defineCollection, z } from 'astro:content';

const articles = defineCollection({
  type: 'content',
  schema: z.object({
    title: z.string(),
    publishedAt: z.coerce.date(),
    category: z.enum(['tech', 'lifestyle', 'review']),
  }),
});

export const collections = { articles };

記事ページでは getStaticPaths を使ってパスを生成します。

---
import { getCollection } from 'astro:content';

export async function getStaticPaths() {
  const articles = await getCollection('articles');
  return articles.map((article) => ({
    params: { slug: article.slug },
    props: { article },
  }));
}
---

まとめ

Astroは、ブログやコンテンツサイトを作るのに非常に適したフレームワークです。高速な表示速度、型安全なコンテンツ管理、柔軟なコンポーネント対応など、モダンなWeb開発に必要な機能が揃っています。

次の記事では、作成したAstroサイトをCloudflare Pagesで無料でデプロイする方法を解説します。