Astro でブログを作る完全チュートリアル — プロジェクト作成からデプロイまで【2026年版】

Astro が「ブログに最適な静的サイトフレームワーク」と言える理由

「Next.js や Nuxt でブログを作ったけど、オーバーエンジニアリングだった…」 筆者もまさにそのパターンで、Next.js で作ったブログの JS バンドルサイズに悩んだ末に Astro に乗り換えました。Astro はコンテンツ中心のサイトに特化したフレームワークで、ブログ構築に最適です。

この記事では、当サイト（toolcraftlab.dev）を Astro で構築した実体験をベースに、プロジェクト作成からデプロイまでを一気通貫で解説します。2026年最新の Astro の機能を活用し、高速・SEO最適化されたブログを作りましょう。

---

なぜ Astro がブログに最適なのか

Astro の特徴

特徴	説明
ゼロ JavaScript（デフォルト）	クライアントに不要なJSを送らず、表示が高速
コンテンツコレクション	Markdown / MDX を型安全に管理
アイランドアーキテクチャ	必要な部分だけインタラクティブにできる
マルチフレームワーク対応	React, Vue, Svelte, Solid のコンポーネントを混在可能
SSG / SSR 両対応	静的生成とサーバーサイドレンダリングを選べる
組み込みの最適化	画像最適化、CSS圧縮、HTML最小化が標準搭載

他のフレームワークとの比較（ブログ用途）

項目	Astro	Next.js	Hugo	Gatsby
学習コスト	低	中	中	高
ビルド速度	◎	○	◎	△
JS バンドルサイズ	極小	大	なし	大
Markdown サポート	◎	○	◎	○
画像最適化	組み込み	組み込み	手動	プラグイン
エコシステム	○	◎	○	○
型安全なコンテンツ	◎	手動	✕	手動

---

Step 1: プロジェクト作成

Astro プロジェクトの初期化

# Astro プロジェクトを作成
npm create astro@latest my-blog

# 対話型セットアップの回答例
# ┌  astro   v5.x
# │
# ◆  How would you like to start your new project?
# │  Use blog template
# │
# ◆  Install dependencies?
# │  Yes
# │
# ◆  Do you plan to write TypeScript?
# │  Yes
# │
# ◆  How strict should TypeScript be?
# │  Strict
# │
# ◆  Initialize a new git repository?
# │  Yes
# └

cd my-blog

プロジェクト構造

my-blog/
├── src/
│   ├── components/       # 再利用可能なコンポーネント
│   │   ├── Header.astro
│   │   ├── Footer.astro
│   │   ├── BlogCard.astro
│   │   └── SEO.astro
│   ├── content/          # コンテンツコレクション
│   │   ├── blog/         # ブログ記事（Markdown / MDX）
│   │   │   ├── first-post.md
│   │   │   └── second-post.mdx
│   │   └── config.ts     # コレクション定義
│   ├── layouts/          # レイアウトテンプレート
│   │   ├── BaseLayout.astro
│   │   └── BlogPost.astro
│   ├── pages/            # ページ（ファイルベースルーティング）
│   │   ├── index.astro
│   │   ├── blog/
│   │   │   ├── index.astro
│   │   │   └── [...slug].astro
│   │   └── about.astro
│   ├── styles/           # グローバルスタイル
│   │   └── global.css
│   └── assets/           # 画像などの静的アセット
│       └── hero.jpg
├── public/               # そのまま配信される静的ファイル
│   ├── favicon.svg
│   └── robots.txt
├── astro.config.mjs      # Astro 設定ファイル
├── tsconfig.json
└── package.json

---

Step 2: コンテンツコレクションの設定

コレクション定義

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

const blog = defineCollection({
  loader: glob({ pattern: '**/*.{md,mdx}', base: './src/content/blog' }),
  schema: ({ image }) =>
    z.object({
      title: z.string(),
      description: z.string(),
      pubDate: z.coerce.date(),
      updatedDate: z.coerce.date().optional(),
      heroImage: image().optional(),
      category: z.string(),
      tags: z.array(z.string()).default([]),
      author: z.string().default('Author'),
      draft: z.boolean().default(false),
    }),
});

export const collections = { blog };

記事の書き方（Markdown / MDX）

---
title: "はじめてのブログ記事"
description: "Astro で作ったブログの最初の記事です。"
pubDate: "2026-04-01"
heroImage: "../../assets/hero.jpg"
category: "tech"
tags: ["Astro", "ブログ"]
author: "ToolCraft Lab"
---

## 見出し

本文をここに書きます。**太字**や*斜体*も使えます。

### コードブロックも対応

\```javascript
console.log("Hello, Astro!");
\```

---

Step 3: ブログ記事一覧ページの作成

記事一覧ページ

---
// src/pages/blog/index.astro
import BaseLayout from '../../layouts/BaseLayout.astro';
import BlogCard from '../../components/BlogCard.astro';
import { getCollection } from 'astro:content';

const posts = (await getCollection('blog'))
  .filter((post) => !post.data.draft)
  .sort((a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf());
---

<BaseLayout title="ブログ記事一覧" description="すべてのブログ記事">
  <h1>ブログ</h1>
  <div class="post-grid">
    {posts.map((post) => (
      <BlogCard post={post} />
    ))}
  </div>
</BaseLayout>

<style>
  .post-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
  }
</style>

ブログカードコンポーネント

---
// src/components/BlogCard.astro
import { Image } from 'astro:assets';
import type { CollectionEntry } from 'astro:content';

interface Props {
  post: CollectionEntry<'blog'>;
}

const { post } = Astro.props;
const { title, description, pubDate, heroImage, tags } = post.data;
---

<article class="card">
  <a href={`/blog/${post.id}/`}>
    {heroImage && (
      <Image
        src={heroImage}
        alt={title}
        width={720}
        height={360}
        class="card-image"
      />
    )}
    <div class="card-content">
      <time datetime={pubDate.toISOString()}>
        {pubDate.toLocaleDateString('ja-JP')}
      </time>
      <h2>{title}</h2>
      <p>{description}</p>
      <div class="tags">
        {tags.map((tag) => (
          <span class="tag">{tag}</span>
        ))}
      </div>
    </div>
  </a>
</article>

記事詳細ページ

---
// src/pages/blog/[...slug].astro
import { getCollection, render } from 'astro:content';
import BlogPost from '../../layouts/BlogPost.astro';

export async function getStaticPaths() {
  const posts = await getCollection('blog');
  return posts.map((post) => ({
    params: { slug: post.id },
    props: post,
  }));
}

const post = Astro.props;
const { Content } = await render(post);
---

<BlogPost {...post.data}>
  <Content />
</BlogPost>

---

Step 4: SEO 設定

SEO メタタグの書き方を詳しく知りたい方は「SEOメタタグ完全ガイド」を、OGP画像のサイズ設定は「OGP画像サイズガイド」を参照してください。

SEO コンポーネント

---
// src/components/SEO.astro
interface Props {
  title: string;
  description: string;
  image?: string;
  type?: string;
  publishedTime?: Date;
}

const {
  title,
  description,
  image = '/og-default.jpg',
  type = 'website',
  publishedTime,
} = Astro.props;

const canonicalURL = new URL(Astro.url.pathname, Astro.site);
const ogImageURL = new URL(image, Astro.site);
---

<!-- 基本メタタグ -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>{title}</title>
<meta name="description" content={description} />
<link rel="canonical" href={canonicalURL} />

<!-- Open Graph -->
<meta property="og:type" content={type} />
<meta property="og:url" content={canonicalURL} />
<meta property="og:title" content={title} />
<meta property="og:description" content={description} />
<meta property="og:image" content={ogImageURL} />
<meta property="og:site_name" content="ToolCraft Lab" />
<meta property="og:locale" content="ja_JP" />

{publishedTime && (
  <meta
    property="article:published_time"
    content={publishedTime.toISOString()}
  />
)}

<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content={title} />
<meta name="twitter:description" content={description} />
<meta name="twitter:image" content={ogImageURL} />

サイトマップの設定

# サイトマップインテグレーションを追加
npx astro add sitemap

// astro.config.mjs
import { defineConfig } from 'astro/config';
import sitemap from '@astrojs/sitemap';

export default defineConfig({
  site: 'https://your-domain.com',
  integrations: [
    sitemap({
      filter: (page) => !page.includes('/draft/'),
    }),
  ],
});

robots.txt

# public/robots.txt
User-agent: *
Allow: /

Sitemap: https://your-domain.com/sitemap-index.xml

RSS フィードの設定

# RSS インテグレーションを追加
npm install @astrojs/rss

// src/pages/rss.xml.ts
import rss from '@astrojs/rss';
import { getCollection } from 'astro:content';

export async function GET(context: { site: URL }) {
  const posts = (await getCollection('blog'))
    .filter((post) => !post.data.draft)
    .sort((a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf());

  return rss({
    title: 'ToolCraft Lab Blog',
    description: 'エンジニアのための実践的な技術ブログ',
    site: context.site,
    items: posts.map((post) => ({
      title: post.data.title,
      pubDate: post.data.pubDate,
      description: post.data.description,
      link: `/blog/${post.id}/`,
    })),
  });
}

---

Step 5: Pagefind で全文検索を導入

Pagefind とは

Pagefind は静的サイト向けの全文検索ライブラリです。ビルド時にインデックスを生成し、クライアントサイドで高速検索を実現します。サーバーが不要なので、Cloudflare Pages などの静的ホスティングでもそのまま動きます。

インストールと設定

# Pagefind をインストール
npm install -D pagefind

// package.json のスクリプトを更新
{
  "scripts": {
    "build": "astro build && npx pagefind --site dist",
    "dev": "astro dev",
    "preview": "astro preview"
  }
}

検索UIの追加

---
// src/components/Search.astro
---

<div id="search" class="search-container"></div>

<link href="/pagefind/pagefind-ui.css" rel="stylesheet" />
<script>
  import { PagefindUI } from '/pagefind/pagefind-ui.js';

  window.addEventListener('DOMContentLoaded', () => {
    new PagefindUI({
      element: '#search',
      showSubResults: true,
      translations: {
        placeholder: '記事を検索...',
        zero_results: '「[SEARCH_TERM]」に一致する記事が見つかりませんでした',
      },
    });
  });
</script>

<style>
  .search-container {
    max-width: 640px;
    margin: 2rem auto;
  }
</style>

検索対象の制御

<!-- 検索に含めたい要素 -->
<article data-pagefind-body>
  <h1>記事タイトル</h1>
  <p>この内容は検索対象になります。</p>
</article>

<!-- 検索から除外したい要素 -->
<nav data-pagefind-ignore>
  ナビゲーションは検索対象外
</nav>

---

Step 6: パフォーマンス最適化

画像最適化

Astro の <Image> コンポーネントを使うと、画像が自動的に最適化されます。

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

<!-- 自動的に WebP/AVIF に変換、レスポンシブ対応 -->
<Image
  src={heroImage}
  alt="ヒーロー画像"
  width={1200}
  height={630}
  loading="lazy"
  decoding="async"
/>

フォント最適化

スタイリングに Tailwind CSS を使いたい場合は「Tailwind CSS v4 の新機能まとめ」もチェックしてください。

/* src/styles/global.css */
/* Google Fonts の最適な読み込み */
@font-face {
  font-family: 'Noto Sans JP';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/NotoSansJP-Regular.woff2') format('woff2');
  unicode-range: U+3000-9FFF, U+F900-FAFF;
}

View Transitions（ページ遷移アニメーション）

---
// src/layouts/BaseLayout.astro
import { ViewTransitions } from 'astro:transitions';
---

<html lang="ja">
  <head>
    <ViewTransitions />
  </head>
  <body>
    <slot />
  </body>
</html>

---

Step 7: デプロイ

Cloudflare Pages へのデプロイ手順をさらに詳しく知りたい方は「Cloudflare Pages 完全ガイド」も参考にしてください。

Cloudflare Pages へのデプロイ

# Wrangler CLI でデプロイ
npm install -g wrangler
wrangler login
wrangler pages deploy dist --project-name my-blog

GitHub 連携での自動デプロイ

1. Cloudflare ダッシュボード → Workers & Pages → Create
2. Pages → Connect to Git
3. GitHub リポジトリを選択
4. ビルド設定:
   - Framework: Astro
   - Build command: npm run build
   - Output directory: dist
5. Save and Deploy

以降は main ブランチへの push で自動デプロイされます。

---

実践 Tips（当サイトの構築経験から）

1. MDX を活用してインタラクティブな記事を書く

# MDX インテグレーションを追加
npx astro add mdx

MDX を使うと、Markdown の中に Astro / React / Vue コンポーネントを埋め込めます。

2. カテゴリ・タグページの自動生成

---
// src/pages/tags/[tag].astro
import { getCollection } from 'astro:content';

export async function getStaticPaths() {
  const posts = await getCollection('blog');
  const tags = [...new Set(posts.flatMap((post) => post.data.tags))];

  return tags.map((tag) => ({
    params: { tag },
    props: {
      posts: posts.filter((post) => post.data.tags.includes(tag)),
    },
  }));
}

const { tag } = Astro.params;
const { posts } = Astro.props;
---

<h1>タグ: {tag}</h1>
<!-- 記事一覧を表示 -->

3. 下書き機能

// frontmatter に draft: true を追加
// コレクション取得時にフィルタ
const publishedPosts = (await getCollection('blog'))
  .filter((post) => !post.data.draft);

4. 前後の記事へのナビゲーション

---
const posts = (await getCollection('blog'))
  .sort((a, b) => a.data.pubDate.valueOf() - b.data.pubDate.valueOf());

const currentIndex = posts.findIndex((p) => p.id === post.id);
const prevPost = posts[currentIndex - 1];
const nextPost = posts[currentIndex + 1];
---

<nav class="post-navigation">
  {prevPost && <a href={`/blog/${prevPost.id}/`}>← {prevPost.data.title}</a>}
  {nextPost && <a href={`/blog/${nextPost.id}/`}>{nextPost.data.title} →</a>}
</nav>

---

まとめ — Astro でブログを作る価値

Astro でブログを作る最大のメリットは「コンテンツに集中できる」ことです。

1. 高速表示: ゼロ JavaScript でLighthouseスコアがほぼ満点
2. 型安全なコンテンツ管理: スキーマ定義で frontmatter のミスを防止
3. 柔軟な拡張: 必要に応じて React や Vue のコンポーネントを追加可能
4. 優れたDX: Hot Module Replacement で快適な執筆体験
5. Pagefind 検索: サーバーなしで全文検索を実現

当サイトも Astro + Cloudflare Pages の構成で運用しており、月間コストゼロで高速なブログサイトを実現しています。ぜひ試してみてください。