Astroを使ったブログの始め方

この記事では、Astroを使ってブログを構築する基本的な方法を紹介します。

Astroとは

Astroは、コンテンツ中心のウェブサイトを構築するためのモダンなフレームワークです。静的サイト生成に優れており、パフォーマンスが非常に高いのが特徴です。

主な特徴

• アイランドアーキテクチャ: 必要な部分だけをインタラクティブにできる
• ゼロJavaScript: デフォルトでクライアントサイドJavaScriptを送信しない
• 複数フレームワーク対応: React、Vue、Svelteなど好きなものを使える

インストール方法

まずはプロジェクトを作成しましょう。

npm create astro@latest

対話形式でプロジェクトの設定ができます。

開発サーバーの起動

npm run dev

これでローカルサーバーが起動し、ブラウザで確認できます。

コンテンツコレクション

Astro 2.0以降では、コンテンツコレクションという機能が追加されました。これにより、MarkdownやMDXファイルを型安全に管理できます。

設定例

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

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

まとめ

Astroは高速で使いやすいフレームワークです。ぜひ試してみてください。