ゼロから作るAstroブログ：トップページからデプロイまで、1時間で完成させる完全ガイド

はじめに

先週、技術ブログを読んでいて、そのページの表示があまりに速いことに驚きました。0.8秒で読み込みが完了し、アプリのようにサクサク動くのです。翻って自分のWordPressブログを見ると…3秒間の白い画面。自分で閉じたくなりました。これはフレームワークを変える時が来たか、と思いました。

正直、HexoやHugo、Gatsbyなど色々試してきましたが、いつもどこかで躓いていました。ドキュメントが難解だったり、デプロイまでの手順が抜けていたり。

そんな時に出会ったのがAstroです。最初は「また新しいフレームワークか」と思いましたが、実際に触ってみると、性能は爆速、開発体験も良く、何より手順が想像以上にシンプルでした。

Alibaba Cloud - 開発者向けクラウドの第一候補、ライトサーバー15%OFF、プロジェクトの迅速な立ち上げを支援

15%割引を入手 →広告

もしあなたが「個人ブログを作りたいけど何から始めればいいかわからない」「WordPressの重さやHexoの単調さに飽きた」と思っているなら、この記事はあなたのためのものです。環境構築からデプロイまで、1時間で完成させる手順を完全ガイドします。おもちゃではない、SEO対策済みで実際に運用できるレベルのブログを作りましょう。

第1章：なぜAstroなのか？（宣伝抜きで本音トーク）

性能は本当に違うの？

私も最初は疑っていましたが、WordPressからAstroに移行した後のデータは嘘をつきません：

• 初回ロード時間: 3.2秒 → 0.8秒
• Lighthouseスコア: 65点 → 100点満点
• JSサイズ: 280KB → 20KB未満

秘密はAstroの**「コンテンツ優先、JSはオンデマンド」**という哲学です。デフォルトで純粋なHTMLとCSSを吐き出し、Reactのような「全部入り」のアプローチとは逆を行きます。ブログのような「読むこと」がメインのサイトでは、この差は歴然です。

開発体験はどう？

私が気に入っているのは**「アイランドアーキテクチャ」**です。

• 記事本文 → 静的HTML（速い）
• コメント欄 → Reactコンポーネント（動的）
• ナビゲーション → Vueコンポーネント（混在OK！）

このように、「必要な場所だけJSを使う」ことができます。また、Markdownで記事を書いてGitHubにプッシュすれば自動デプロイされるワークフローは、VSCodeで完結して非常に快適です。

他のフレームワークとの比較

結論：ブログやドキュメントサイトならAstro一択です。

第2章：環境準備（5分）

Node.jsのインストール

AstroにはNode.js v18以上が必要です。

Railway - モダンなデプロイプラットフォーム、煩わしい運用から解放、数分で公開

今すぐ始める →広告

node -v

入っていなければNode.js公式サイトからインストールしてください。

Astroプロジェクトの作成

ターミナル・コマンドプロンプトを開いて以下を実行します：

npm create astro@latest

選択肢が出たら、私のオススメ設定はこちら：

1. Project name: my-blog など好きな名前
2. Template: Blog を選択（これ重要！ブログ用の骨組みが入ってます）
3. Install dependencies: Yes
4. TypeScript: Strict か Strictest（型チェックでバグが減ります）
5. Git: Yes

開発サーバー起動

cd my-blog
npm run dev

Local: http://localhost:4321 と出たら成功です。ブラウザで開いてみてください。

第3章：プロジェクト構造を知る

フォルダ構成はこんな感じです：

my-blog/
├── src/
│   ├── pages/           # ルーティング（ファイル名＝URL）
│   ├── layouts/         # レイアウト（ヘッダー・フッター）
│   ├── components/      # 部品（カード・ボタン）
│   └── content/         # 記事（Markdown）
├── public/              # 静的ファイル（画像・favicon）
├── astro.config.mjs     # 設定ファイル
└── package.json         # 依存関係

• pages/: ファイル名がそのままURLになります。pages/about.astro は /about になります。
• content/: 記事のMarkdownファイル置き場です。Frontmatter（冒頭の情報の塊）でタイトルやタグを管理します。

第4章：主要機能の実装

4.1 トップページ：最新記事の表示

src/pages/index.astro を編集します（Blogテンプレートなら概ね完成していますが、カスタマイズの参考に）。

---
import { getCollection } from 'astro:content';
import BaseLayout from '../layouts/BaseLayout.astro';

// ブログ記事を取得し、日付順にソートして最新5件を取得
const allPosts = (await getCollection('blog'))
  .sort((a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf())
  .slice(0, 5);
---

<BaseLayout>
  <h1>ようこそ！</h1>
  <ul>
    {allPosts.map((post) => (
      <li>
        <a href={`/blog/${post.slug}/`}>{post.data.title}</a>
        <time>{post.data.pubDate.toDateString()}</time>
      </li>
    ))}
  </ul>
</BaseLayout>

4.2 記事一覧とページネーション

src/pages/blog/index.astro で一覧を作ります。

Vultr - 高性能NVMeクラウドサーバー、世界32拠点、Dockerワンクリック展開対応

価格を見る →広告

---
import { getCollection } from 'astro:content';
import BaseLayout from '../../layouts/BaseLayout.astro';

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

// 簡易ページネーション用のロジック（本格的にはAstroのpaginate関数推奨）
const pageSize = 10;
const posts = allPosts.slice(0, pageSize);
---

<BaseLayout title="記事一覧">
  <h1>全記事</h1>
  <div class="post-list">
    {posts.map((post) => (
      <article>
        <h2><a href={`/blog/${post.slug}/`}>{post.data.title}</a></h2>
        <p>{post.data.description}</p>
        <div class="tags">
          {post.data.tags?.map(tag => <span>#{tag}</span>)}
        </div>
      </article>
    ))}
  </div>
</BaseLayout>

4.3 記事詳細ページ

src/pages/blog/[...slug].astro というファイル名がポイントです。「ダイナミックルーティング」で、全ての記事URLをここで処理します。

---
import { getCollection } 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.slug },
    props: { post },
  }));
}

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

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

getStaticPaths はビルド時に実行され、全記事分のHTMLを生成します。

4.4 タグ機能

src/pages/tags/[tag].astro を作れば、タグごとの一覧ページも自動生成できます。

---
import { getCollection } from 'astro:content';
import BaseLayout from '../../layouts/BaseLayout.astro';

export async function getStaticPaths() {
  const allPosts = await getCollection('blog');
  // 全タグを収集して重複排除
  const allTags = [...new Set(allPosts.flatMap(post => post.data.tags || []))];

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

const { tag } = Astro.params;
const { posts } = Astro.props;
---
<BaseLayout title={`タグ: ${tag}`}>
  <h1>#{tag} の記事</h1>
  <ul>
    {posts.map((post) => <li><a href={`/blog/${post.slug}/`}>{post.data.title}</a></li>)}
  </ul>
</BaseLayout>

4.5 RSSフィード

src/pages/rss.xml.js を作成します。

import rss from '@astrojs/rss';
import { getCollection } from 'astro:content';

export async function GET(context) {
  const posts = await getCollection('blog');
  return rss({
    title: '私の技術ブログ',
    description: 'Tech & Life',
    site: context.site,
    items: posts.map((post) => ({
      title: post.data.title,
      pubDate: post.data.pubDate,
      description: post.data.description,
      link: `/blog/${post.slug}/`,
    })),
  });
}

第5章：SEO対策

AstroはSEOに強いですが、設定が必要です。

Metaタグ設定

src/layouts/BaseLayout.astro の <head> に以下を追加し、OGP（SNSシェア時のカード表示）などに対応します。

---
const { title, description = 'ブログの説明', image = '/og-image.jpg' } = Astro.props;
const canonicalURL = new URL(Astro.url.pathname, Astro.site);
---
<head>
  <title>{title}</title>
  <meta name="description" content={description} />
  <link rel="canonical" href={canonicalURL} />
  <meta property="og:title" content={title} />
  <meta property="og:image" content={new URL(image, Astro.site)} />
  <!-- 他Twitter Card設定など -->
</head>

サイトマップ生成

npx astro add sitemap

これだけで sitemap-index.xml が自動生成されるようになります。

第6章：デプロイ（無料で公開！）

Vercelへのデプロイ（推奨）

1. GitHubにコードをPushします。
2. Vercel にログインし「Add New Project」。
3. リポジトリを選択。Astroを自動認識するので設定不要。「Deploy」をクリック。
4. 完了！ xxx.vercel.app でアクセスできます。

Netlifyの場合

手順はほぼ同じです。GitHub連携してDeployボタンを押すだけ。

これらは、GitHubに記事（Markdownファイル）をPushするたびに自動でビルド・公開してくれます。

第7章：トラブルシューティング（あるある）

1. Tailwindが効かない: tailwind.config.mjs の content パス設定を確認しましょう。
2. ビルドエラー “Invalid frontmatter”: 記事のMarkdown冒頭の必須項目（title, pubDateなど）が抜けていませんか？
3. デプロイ後404: astro.config.mjs の site 設定が正しいか、サブディレクトリ設定 base が不要に入っていないか確認を。
4. 画像が表示されない: 画像は public フォルダに入れるか、src/assets に入れてAstroのImageコンポーネントを使いましょう。

結論

おめでとうございます！これであなたは、高速でSEOに強く、メンテナンスが楽なブログを手に入れました。
Astroは「書くこと」に集中させてくれる最高のツールです。ぜひ、素敵な記事をたくさん発信してください！

4 min read · 公開日: 2025年12月2日 · 更新日: 2026年1月22日

Easton

技術開発