Manual

構築マニュアル

microCMS × Astro × Tailwind CSS
ブログサイト構築ガイド

📖 このマニュアルについて

このマニュアルでは、ヘッドレスCMS「microCMS」の API から JavaScript を使って「Astro」にデータを取り込み、 「Tailwind CSS」でデザインして ブログ記事として表示させる方法を、ステップバイステップで解説します。

HTML/CSS基本知識あり microCMS 初心者OK Astro 初心者OK
1

開発環境の準備

必要なツールをインストールします

Node.js のインストール

Astro は Node.js（JavaScriptの実行環境）の上で動作します。公式サイト（https://nodejs.org/）から LTS版をダウンロードしてインストールしてください。
インストール確認コマンド 
                                                    node --version  # v18以上が必要

コードエディタ

Visual Studio Code（VS Code）を推奨します。Astro の公式拡張機能もインストールしましょう。
2

Astro プロジェクトの作成

Astro の CLI（コマンドラインツール）でプロジェクトを初期化します

プロジェクトの初期化

ターミナル（コマンドプロンプト）で以下のコマンドを実行します。npx は npm に付属するツールで、パッケージを一時的にダウンロードして実行します。
Astro プロジェクト作成コマンド 
                                                    npx create-astro@latest ./  --template minimal --install --typescript relaxed

コマンドの各オプションの意味

・--template minimal：最小構成のテンプレート（余計なファイルなし） ・--install：依存パッケージを自動インストール ・--typescript relaxed：TypeScript を緩やかなモードで使用
3

Tailwind CSS の導入

CSSフレームワーク Tailwind CSS をプロジェクトに追加します

Tailwind CSS のインストール

Astro には公式の統合コマンドがあり、1コマンドで Tailwind CSS を追加できます。
Tailwind CSS 追加コマンド 
                                                    npx astro add tailwind -y

Tailwind CSS v4 の特徴

Tailwind CSS v4 では、@theme ブロックでカスタムカラーやフォントを定義します。bg-primary、text-accent などのクラス名でカスタムカラーを使えるようになります。設定は src/styles/global.css に記述します。
global.css でのテーマ設定例 
                                                    @theme {
  --color-primary: #a2d7dd;
  --color-accent: #e8a87c;
  --font-sans: 'Noto Sans JP', sans-serif;
}
4

microCMS の設定

ヘッドレスCMS microCMS でブログ用のAPIを作成します

microCMS アカウントの作成

microCMS の公式サイト（https://microcms.io/）でアカウントを作成し、新しいサービスを作成します。

APIスキーマの設定

「ブログ」用のAPIを作成し、以下の7つのフィールドを設定します。エンドポイント名は「blogs」にしてください。

フィールドID一覧

① coverimage（画像）: カバー画像 ② slug（テキスト）: URL用の固有文字列 ③ title（テキスト）: 記事タイトル ④ description（テキストエリア）: 説明文 ⑤ date（日付）: 投稿日付 ⑥ tag（セレクト/複数）: 投稿タグ ⑦ content（リッチエディタ）: 記事本文

SDK のインストール

microCMS の公式 JavaScript SDK をインストールします。
microCMS SDK インストール 
                                                    npm install microcms-js-sdk
5

環境変数の設定（.env ファイル）

microCMS のAPIキーを安全に管理します

.env ファイルの作成

プロジェクトのルートに .env ファイルを作成し、microCMS の接続情報を記述します。このファイルは .gitignore に追加し、GitHub にアップロードしないでください。APIキーが漏洩すると、第三者にデータを操作される可能性があります。
.env ファイルの内容 
                                                    MICROCMS_SERVICE_DOMAIN=your-service-id
MICROCMS_API_KEY=your-api-key

環境変数の取得方法

microCMS の管理画面から以下の情報を取得します： ・サービスドメイン：管理画面URLの https://○○○.microcms.io の ○○○ 部分 ・APIキー：管理画面 > サービス設定 > APIキー
6

microCMS クライアントの作成

API からデータを取得するための設定ファイルを作成します

src/lib/microcms.ts の作成

このファイルでは、microCMS クライアントの初期化、ブログ記事の型定義、データ取得関数を定義します。Astro のフロントマター（---）内でこの関数を呼び出すことで、ビルド時に microCMS からデータを取得します。
microcms.ts の基本構造 
                                                    import { createClient } from 'microcms-js-sdk';

// クライアントの初期化
const client = createClient({
  serviceDomain: import.meta.env.MICROCMS_SERVICE_DOMAIN,
  apiKey: import.meta.env.MICROCMS_API_KEY,
});

// 記事一覧を取得する関数
export const getBlogs = async (queries) => {
  return await client.getList({
    endpoint: 'blogs',
    queries,
  });
};
7

共通レイアウトの作成

全ページで使う HTML の骨格を作ります

src/layouts/Layout.astro

レイアウトコンポーネントは、全ページ共通の HTML構造（html, head, body タグ）を定義します。各ページのコンテンツは <slot /> の位置に挿入されます。ヘッダーとフッターもここで読み込みます。
Layout.astro の基本構造 
                                                    ---
import Header from "../components/Header.astro";
import Footer from "../components/Footer.astro";
import "../styles/global.css";

const { title } = Astro.props;
---
<html lang="ja">
  <head><title>{title}</title></head>
  <body class="bg-primary">
    <Header />
    <main><slot /></main>
    <Footer />
  </body>
</html>
8

TOPページの作成

メインのトップページを作成します

src/pages/index.astro

TOPページでは、microCMS から最新記事を取得してカード形式で表示します。フロントマター内で getBlogs() を呼び出し、取得したデータを HTML テンプレートで展開します。
index.astro のデータ取得と表示の流れ 
                                                    ---
import { getBlogs } from "../lib/microcms";

// ビルド時にAPIからデータ取得
const response = await getBlogs({ limit: 3 });
const blogs = response.contents;
---

{/* 記事をループ表示 */}
{blogs.map((blog) => (
  <article>
    <h2>{blog.title}</h2>
    <p>{blog.description}</p>
  </article>
))}
9

ブログ一覧ページの作成

全記事を一覧表示するページを作成します

src/pages/blog/index.astro

Goodpatch Blog を参考にした2カラムのグリッドレイアウトで記事カードを表示します。Tailwind CSS の grid クラスでレスポンシブなレイアウトを実現します。
2カラムグリッドの実装 
                                                    <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
  {blogs.map((blog) => (
    <BlogCard
      title={blog.title}
      slug={blog.slug}
      coverimage={blog.coverimage}
    />
  ))}
</div>
10

ブログ個別ページの作成（動的ルーティング）

各記事の詳細ページを動的に生成します

src/pages/blog/[slug].astro

ファイル名の [slug] が URL パラメータになります。getStaticPaths() 関数で全記事のスラッグを返すことで、ビルド時に各記事のHTMLが自動生成されます。
動的ルーティングの仕組み 
                                                    ---
export async function getStaticPaths() {
  const response = await getBlogs({ limit: 100 });
  return response.contents.map((blog) => ({
    params: { slug: blog.slug },
    props: { blog },
  }));
}

const { blog } = Astro.props;
---

<h1>{blog.title}</h1>
<div set:html={blog.content} />

set:html ディレクティブ

microCMS のリッチエディタが出力する HTML をそのまま表示するには、Astro の set:html ディレクティブを使います。通常の {value} ではHTMLタグがエスケープされてしまうためです。
11

開発サーバーでの確認

ローカル環境でサイトを確認します

開発サーバーの起動

以下のコマンドで開発サーバーを起動し、ブラウザで http://localhost:4321 にアクセスします。ファイルを変更すると自動的にブラウザが更新されます（ホットリロード）。
開発サーバー起動コマンド 
                                                    npm run dev
12

デプロイ（公開）

サイトを本番環境に公開します

ビルド

npm run build でサイトを静的HTMLに変換します。生成されたファイルは dist/ フォルダに出力されます。
本番ビルドコマンド 
                                                    npm run build

ホスティングサービス

Netlify、Vercel、GitHub Pages などの静的サイトホスティングサービスにデプロイできます。GitHub リポジトリと連携すれば、git push するだけで自動でデプロイされます。

🎉 おつかれさまでした！

以上で microCMS × Astro × Tailwind CSS による
ブログサイトの構築手順は完了です。
あとは microCMS に記事を追加して、サイトをビルドすれば
あなたのブログが完成します！

🚀 Astro 公式ドキュメント 📦 microCMS ドキュメント