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

Astro とは

Astro は静的サイト生成（SSG）を得意とするフレームワークです。不要な JavaScript を極力排除し、高速な表示を実現します。

プロジェクトの作成

以下のコマンドでプロジェクトを作成します：

pnpm create astro@latest my-blog
cd my-blog

依存関係のインストール

MDX、Tailwind CSS、Sitemap を追加します：

pnpm add @astrojs/mdx @astrojs/sitemap @tailwindcss/vite tailwindcss @tailwindcss/typography

Content Collections

Astro の Content Collections を使うと、frontmatter を Zod スキーマで型安全に管理できます。

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

const posts = defineCollection({
  schema: z.object({
    title: z.string(),
    description: z.string(),
    publishedAt: z.coerce.date(),
    updatedAt: z.coerce.date(),
    tags: z.array(z.string()),
  }),
});

SEO 対策

構造化データ

BlogPosting と BreadcrumbList の JSON-LD を各記事ページに埋め込みます。

メタタグ

canonical、OGP、Twitter Card を全ページに設定します。

まとめ

Astro を使えば、SEO に最適化された高速な技術ブログを効率的に構築できます。