Astro, Cloudflare Pages, MicroCMS で爆速表示のブログを作る

2025/02/21 公開

はじめに

当サイトを作るにあたり、何かちょうど良いフレームワークはないかと探していたところ、Astroというフレームワークを発見しました。名前くらいは聞いたことがありましたが、使ったことがなかったのでせっかくならと採用してみることに。

結果的にとても扱いやすく気に入ったので、記事としてまとめることにしました。

構成

以下のような構成で構築します。

Astro

リリースは2022年4月と比較的最近ですが、記事作成時（2025/2/20）でGitHubのスターは49.2kまで伸びています。next.jsと比較してもグラフの傾きは同じくらいで、非常に人気があることがわかります。

Next.jsやRemix等のフレームワークは動的なウェブサイトを実現するためにCSRを前提に設計されていますが、ブログサイトのような静的なWebページでは必要ないことが多いです。

その一方でAstroは、ウェブアプリケーションではなくウェブサイトを作ることに特化したSSGフレームワークとして開発されています。

SSGなので表示がとにかく高速なのが特徴です。参考に、SEOにおいて重要な指標となるCWV (Core Web Vitals) 評価に合格したウェブサイトの割合は他のフレームワークと比較して非常に高くなっています。

コードに関しても、特に新しい言語を学ぶ必要なく、HTML、CSS、JS（TS）で作成することができます。また、必要に応じてTailwindCSSやReactを入れるなど、好みのライブラリでウェブサイトを作ることができます。（当サイトはTailwindCSS, React, shadcn/uiを使用しています）

その一方で、SSGであるが故にログイン機能のあるWebサイトなどの構築には向きませんのでご注意ください。

Astroを選ぶ理由

2023 Web Framework Performance Report | Astro

MicroCMS

最近よく名前を耳にする国産のヘッドレスCMSです。ヘッドレスなので、WordPressなどとは異なり、フロントエンド部分を好きなように作成できます。

10,000記事、月5GBまでは無料で使えるので、個人利用の場合にはこちらで十分。

microCMS｜APIベースの日本製ヘッドレスCMS

Cloudflare Pages

Cloudflare が提供する静的ウェブサイトのホスティングサービスです。高速なグローバルネットワークを活用することで、世界中のユーザーに対して素早いコンテンツ配信が可能です。

また、GitHubと連携して自動でビルドからデプロイまで行ってくれます。まだ使ったことはないのですが、デプロイ時のプレビュー環境や、ロールバック機能なども無料で利用可能です。

フルスタックアプリケーション | Cloudflare

MicroCMSの設定

まずは以下のリンクからmicroCMSのアカウントを作成します。

https://app.microcms.io/signup

アカウントの作成が完了すると、以下の画面が開くので、一から作成するをクリックします。

サービス名とサービスIDを入力します。

今回のサンプルでは、ブログをクリックします。

ブログ用のサンプルAPIが作成されます。

すでにサンプルの記事とカテゴリが用意されています。

次に、APIキーを確認するため、左上の歯車マークを押します。

サービス設定の中のAPIキーをクリックします。

APIキーはあとで使うので、コピーしておきます。（いつでも確認可能です）

AstroからMicroCMS への接続

astroをインストール

npm create astro@latest

環境変数を設定

MICROCMS_SERVICE_DOMAIN=<microCMSのサービスドメインを入力（.microcms.ioの前まで）>
MICROCMS_API_KEY=<microCMSのAPIキーを入力>

microcms-js-sdkをインストール

npm i microcms-js-sdk

接続用のコード実装

import { createClient } from "microcms-js-sdk";

export const client = createClient({
    serviceDomain: import.meta.env.MICROCMS_SERVICE_DOMAIN,
    apiKey: import.meta.env.MICROCMS_API_KEY,
});

import type { MicroCMSListResponse } from "microcms-js-sdk"

type Blog = {
    title: string;
    content: string;
    eyecatch: string;
    category: string;
}

export type BlogsResponse = MicroCMSListResponse<Blog>;

import type { MicroCMSQueries } from "microcms-js-sdk";
import type { BlogsResponse } from "@/lib/microcms/blog";
import { client } from "@/lib/microcms/client";

export const fetchBlogs = async (queries?: MicroCMSQueries) => {
    return await client.get<BlogsResponse>({
        endpoint: "blogs",
        queries: queries,
    });
};

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

---
import Layout from '@/layouts/Layout.astro';
import { fetchBlogs } from '@/lib/microcms/fetchBlogs';

const blogsResponse = await fetchBlogs();

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

<Layout>
	{
	    page.data.map((blog) => (
	        <a href={`/blogs/${blog.id}`}>
		        {blog.title}
	        </a>
	    ))
	}
</Layout>

ブログ記事ページの作成

---
import Layout from "@/layouts/Layout.astro";
import { fetchBlogs } from "@/lib/microcms/fetchBlogs"

export const getStaticPaths = async () => {
	const blogsResponse = await fetchBlogs({ fields: ["id"] });
	return blogsResponse.contents.map((blog) => ({
		params: {
			blogId: blog.id,
		},
	}));
};

const { blogId } = Astro.params;
const blogsResponse = await fetchBlogs({ ids: blogId });
const blog = blogsResponse.contents[0];
---

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