開発・個人開発

Astroで爆速ブログ・メディアを作る入門 インストールから記事公開まで

Meliorra編集部
Astroで爆速ブログ・メディアを作る入門 インストールから記事公開まで

この記事の要点

Astroは静的サイトジェネレーターの中でメディア・ブログ向けに最適化されており、Markdownで記事を管理しながら表示速度とSEOを両立できる。ゼロから記事が公開できる状態になるまでの手順を解説する。

結論

Astroでブログを作る手順は大きく5つだ。プロジェクトの初期化→記事のMarkdown管理設定→ページデザイン→Vercelへのデプロイ→SEO設定の順に進めると、1〜2日で記事を公開できる環境が完成する。表示速度はNext.jsやWordPressより出しやすく、個人開発のメディアサイトに適している。

なぜAstroか

静的サイトジェネレーターは他にもNext.js・Hugo・Jekyllなどがあるが、Astroがメディア・ブログ向けに優れている理由がある。

デフォルトでJavaScriptゼロ：Astroは、ページに必要なJavaScriptだけを出力する設計になっている。不要なJSバンドルを送らないため、ページの読み込みが速い。Lighthouseスコアで100を出しやすいのがAstroの特徴だ。

コンテンツコレクション：src/content/ディレクトリにMarkdownを置くと、そのままブログ記事として扱える仕組みが標準で入っている。フロントマターのスキーマを定義することで、タイプミスや必須フィールドの漏れをビルド時に検知できる。

フレームワーク非依存：ReactコンポーネントもVueコンポーネントもSvelteコンポーネントも、Astroのページ内で一緒に使える。既存の経験やコンポーネントを活かしやすい。

デプロイが簡単：静的ファイルを出力するので、Vercel・Netlify・GitHub Pagesなどどこにでもデプロイできる。Vercelとの連携は特に設定なしで動く。

環境の準備

Astroを動かすにはNode.jsが必要だ。バージョン18以上を推奨する。

node --version
# v18.x.x 以上であればOK

Node.jsが入っていない場合は、Node.jsの公式サイト（nodejs.org）からLTSバージョンをインストールする。

プロジェクトの作成

npm create astro@latest

対話形式でセットアップが進む。

Where should we create your new project?
> my-blog

How would you like to start your new project?
> Use blog template   ← ブログ向けのテンプレートを選ぶ

Do you plan to write TypeScript?
> Yes

How strict should TypeScript be?
> Strict

Install dependencies?
> Yes

Initialize a new git repository?
> Yes

ブログテンプレートを選ぶと、記事の管理に必要なコンテンツコレクションの設定・サンプル記事・基本レイアウトが最初から含まれる。

ディレクトリ構成の理解

プロジェクトが作成されると、主要なディレクトリは次の通りだ。

my-blog/
├── src/
│   ├── content/
│   │   ├── config.ts      ← コンテンツコレクションのスキーマ定義
│   │   └── blog/          ← 記事のMarkdownファイルを置く場所
│   ├── pages/
│   │   ├── index.astro    ← トップページ
│   │   └── blog/
│   │       ├── index.astro  ← 記事一覧ページ
│   │       └── [slug].astro ← 記事詳細ページ（動的ルーティング）
│   ├── layouts/
│   │   └── BlogPost.astro  ← 記事のレイアウト
│   └── components/         ← 再利用するコンポーネント
├── public/                 ← 静的ファイル（画像・robots.txtなど）
├── astro.config.mjs        ← Astroの設定ファイル
└── package.json

コンテンツコレクションのスキーマ設定

src/content/config.tsでフロントマターのスキーマを定義する。

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

const blog = defineCollection({
  type: 'content',
  schema: z.object({
    title: z.string(),
    description: z.string(),
    pubDate: z.coerce.date(),
    updatedDate: z.coerce.date().optional(),
    tags: z.array(z.string()).default([]),
    draft: z.boolean().default(false),
    faq: z.array(z.object({
      q: z.string(),
      a: z.string(),
    })).optional(),
  }),
});

export const collections = { blog };

このスキーマを定義すると、titleがないMarkdownをコミットしたときにビルドエラーが出る。量産フェーズでのミスを早期に発見できる。

最初の記事を書く

src/content/blog/my-first-post.mdを作成する。

---
title: "最初の記事"
description: "Astroでブログを始めました。この記事では○○について解説します。"
pubDate: 2026-06-04
tags: ["Astro", "ブログ"]
draft: false
---

## 結論

ここに記事の本文を書く。

保存後に開発サーバーを起動すると、ブラウザで確認できる。

npm run dev

http://localhost:4321/blog/my-first-post/にアクセスすると記事が表示される。

Vercelへのデプロイ

GitHubにリポジトリを作成し、プロジェクトをプッシュする。

git remote add origin https://github.com/ユーザー名/リポジトリ名.git
git push -u origin main

Vercelのダッシュボード（vercel.com）で「Add New Project」を選択し、GitHubリポジトリを指定するだけでデプロイが完了する。Astroプロジェクトを自動で認識して、ビルドコマンド（npm run build）も自動設定される。

デプロイ完了後、mainブランチへのプッシュが自動でビルド・公開に繋がる状態になる。

SEO設定：メタタグとサイトマップ

Astroにはサイトマップ生成のプラグインが公式で提供されている。

npx astro add sitemap

astro.config.mjsにサイトのURLを設定する。

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

export default defineConfig({
  site: 'https://your-site.com',
  integrations: [sitemap()],
});

これだけで、/sitemap-index.xmlが自動生成される。

記事レイアウト（src/layouts/BlogPost.astro）にメタタグを追加する。

---
const { title, description, pubDate } = Astro.props;
---
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="description" content={description} />
    <title>{title}</title>
    <!-- OGP -->
    <meta property="og:title" content={title} />
    <meta property="og:description" content={description} />
    <meta property="og:type" content="article" />
    <link rel="canonical" href={Astro.url} />
  </head>
  <body>
    <slot />
  </body>
</html>

SEOと構造化データのより詳しい設定はAstroでSEO・構造化データを自動化するで解説している。

記事の一覧ページを作る

src/pages/blog/index.astroで全記事を取得して一覧表示する。

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

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

<ul>
  {sorted.map(post => (
    <li>
      <a href={`/blog/${post.slug}/`}>{post.data.title}</a>
      <p>{post.data.description}</p>
    </li>
  ))}
</ul>

draft: trueの記事をフィルターしているため、下書き記事は一覧に表示されない。

Vercelへの独自ドメイン設定

サイトが公開できたら、独自ドメインを設定する。ドメインはお名前.com・Cloudflare Registrar・Google Domainsなどで取得できる。

Vercelのプロジェクト設定（Settings → Domains）で取得したドメインを入力し、ドメインレジストラ側でDNSレコードを設定する。手順の詳細はVercelに独自ドメインを設定する手順で解説している。

VercelとGitHubの連携手順についてはVercelの初期設定とGitHub連携・自動デプロイも参照してほしい。

まとめ

Astroでのブログ立ち上げは、npm create astro@latestからVercelデプロイまで半日で完成する。コンテンツコレクションを使ったMarkdown管理は、記事の量産・管理に適しており、スキーマによる型チェックで品質を保ちやすい。まずはブログテンプレートで始めて、デザインはあとから調整するアプローチが最短で公開に至れる。

#Astro#個人開発#ブログ#静的サイト#SEO

よくある質問

AstroとWordPressはどちらを選べばいいですか

コンテンツ中心のメディアサイトや技術ブログならAstroを勧めます。表示速度が速く、サーバー不要でホスティングコストがほぼゼロです。WordPressはプラグインが豊富で非エンジニアでも操作しやすいですが、PHPサーバーのコストと保守が必要です。

Astroを使うのにどんな知識が必要ですか

HTMLとCSSの基礎、JavaScriptの最低限の知識（関数・変数・配列）、Node.jsの実行環境（インストール済みの状態）があれば始められます。TypeScriptは必須ではありませんが、型チェックの恩恵を受けるために導入を勧めます。

Astroでブログを作るのにどのくらいかかりますか

インストールから最初の記事を公開するまで、半日〜1日あれば完成します。SEO・OGP・サイトマップの設定込みで2〜3日を見ておくと余裕があります。

Astroは個人開発に向いていますか

向いています。特にAstroのコンテンツコレクション機能は、記事をMarkdownで管理してSEO対応を自動化するのに適しており、AIで記事を量産するワークフローとも相性がよいです。

関連記事