Astroで始めるブログサイトの構築 (Cloudflare版)

当ブログはAstroを使って構築し直しました。これまで使っていたWordPressよりも文章の入力が楽になり、画像などのレイアウトも自由に作ることができて便利になりました。本記事ではAstroでブログサイトを作成してCloudflare Workers経由で配信する手順をまとめています。

Astroはコンテンツ駆動のWebサイトを作成するフレームワーク

Astroが何なのかは、公式サイトのAstroを選ぶ理由の冒頭にこう書かれています。

Astroは、ブログやマーケティング、eコマースなど、コンテンツ駆動のWebサイトを作成するためのWebフレームワークです。

---

コンテンツ駆動とは

• 特徴: サイトのデザインや機能よりも、掲載するコンテンツの管理を優先する。
• 技術的背景: 静的サイトジェネレーター（SSG）を用いて、コンテンツ（Markdownファイルなど）から高速なWebサイトを構築する。
• メリット: 軽量で表示速度が速く、ユーザーエクスペリエンス（UX）向上や検索順位（SEO）に有利なサイトが作れる。

Googleドキュメントやネットバンキングなど、計算・編集・管理などを重視しているWebサイトとは対照的な立ち位置の、ブログやニュース、ドキュメントなどのWebサイトがコンテンツ駆動のWebサイトと言えそうです。

---

フレームワークとは (WordPressとの違い)

ブログサイト構築と言えばWordPressが代表格ですが、AstroはWordPressとは根本的に思想が違います。

WordPressは、CMS (コンテンツ・マネジメント・システム) というWebアプリケーションです。ブログの投稿や管理はWebブラウザの画面だけで完結しており、ソフト開発の経験が無くてもブログのWebサイトを作ることができます。

WordPressの管理画面の例

一方、AstroはWebサイトを構築するための枠組みが提供されます。npm createコマンドを使ってAstroプロジェクトを作成し、Visual Studio Codeなどのコードエディタを使ってMarkdownファイルやコンポーネントなどを作ってブログのページを作成します。

つまり、Astroは普通のソフトウェア開発の手順でWebサイトを構築するような手順になります。JavaScript/TypeScriptでの開発環境が整っていれば、Astroを使うことは容易いでしょう。

個人的には、WordPressのブロックエディタはマウス操作が多く、段落・画像・コードブロックを作る操作やブロックのプロパティを設定する操作に手間がかかっていました。

AstroではコードエディタでMarkdownやMDXを書いていけばよいので、キーボードの操作に集中できることが嬉しいです。この記事もMDXで作成しています。

Astroの公式チュートリアル

Astroの公式サイトはこちらです。 Get Startedをクリックして、画面右上の言語選択(最初はEnglishと表示されている)から日本語を選択すると、Astroの日本語ドキュメントを読むことができます。

Astro astro.build

Astro builds fast content sites, powerful web applications, dynamic server APIs, and everything in-between.

左サイドバーの ようこそ！ の中でAstroの概要やアーキテクチャが説明されていますが、それらは軽く読み流すかスキップして、まずは初めてのAstroブログでチュートリアルを始めることをお勧めします。Astroプロジェクトの作成とデプロイ(Netlify)、サイトのページの作り方(.astro)、UIコンポーネントやレイアウトの作り方、Astro APIの使い方、アイランドの組み込み方がステップバイステップで楽しく学べます。

初めてのAstroブログ docs.astro.build

プロジェクトベースのチュートリアルでAstroの基本を学びましょう。始めるために必要なすべての前提知識をお届けします！

Astroでブログサイトを作ってみる

公式チュートリアルではGitHubとNetlifyを使っていますが、以下ではGitHubを使わずにCloudflare Workersでブログサイトを構築する手順を説明します。

---

テーマを選んでプロジェクトを作成する

手っ取り早くブログサイトを作るために、既存の公式サンプルやテーマを使うことができます。当ブログではStarlightを使っています。

astro/examples at main · withastro/astro github.com

The web framework for content-driven websites. ⭐️ Star to support our work! - withastro/astro

Themes | Astro astro.build

Elevate your style with our stellar designs.

テーマはフィルターで絞り込むことができます。CategoriesにOfficialを選んでView resultsボタンをクリックすると、Astro公式のテーマ一覧が表示されます。

今回は blog テンプレート(全て英小文字で入力)を使ってblog-demoプロジェクトを作成します。

cd cloudflare  # `cloudflare`フォルダーを使用
npm create astro@latest -- blog-demo --template blog

• Ok to proceed? (y) → yを入力
• Install dependencies? → Yes
• Initialize a new git repository? → Yes

ターミナルの画面イメージ

コードエディタでblog-demoを開きます。Visual Studio Codeであればcodeコマンド、Cursorであればcursorコマンドでターミナルから開くことができます。

code blog-demo

---

ブログページを追加する

チュートリアルでは、Astroのページはsrc/pagesフォルダーで実装することを学びますが、blogテンプレートでプロジェクトを作成した場合、デフォルトのファイルが用意されます。

src/pages/blog/[...slug].astroはDynamic routesという仕組みを使って/blog/で始まるパスのページを実装していることが分かります。 このファイルではgetStaticPaths関数を定義しており、getCollection関数を使って src/content/blog フォルダー内のファイル一覧を取得してブログページのパスを作っています。

getStaticPaths関数の詳細

src/pages/blog/[...slug].astro(一部抜粋)

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

getCollection関数が取得するファイル一覧を定義するloaderの詳細

src/content.config.ts(一部抜粋)

const blog = defineCollection({
  // Load Markdown and MDX files in the `src/content/blog/` directory.
  loader: glob({ base: './src/content/blog', pattern: '**/*.{md,mdx}' }),
  // Type-check frontmatter using a schema
  schema: ({ image }) =>
    /* 省略 */
});

src/content/blogフォルダーの中に新しくファイルを作って、独自のブログページを追加してみます。

src/content/blog/hello-world.md

---
title: 'Hello world!'
description: '初めてのブログ投稿'
pubDate: '2026-02-12'
updatedDate: '2026-02-16'
heroImage: '../../assets/blog-placeholder-5.jpg'
---

このサイトは[**Astro**](https://astro.build/)を使って作成しました。

[**Blog**](https://astro.build/themes/details/blog/)テーマを使っています。

---から---の間はフロントマターというメタデータです。 BlogテンプレートのREADMEには説明はありませんが、 ソースコードを読むと、title, description, pubDate, updatedDate, heroImageを指定できます。

フロントマターの下にMarkdown形式で本文を入力します。

コードエディタのターミナルを開いて、devサーバーを起動します。

npm run dev

http://localhost:4321/をブラウザで開きます。

Homeページ

Blogページ

初めてのブログ投稿

Cloudflareでブログサイトを公開する

Astroのチュートリアルでは、GitHubにリポジトリを保存して、Netlifyにサイトをデプロイ(公開)する手順が説明されていますが、ここではCloudflareを使って無料でブログサイトをデプロイします。

---

Cloudflareで無料アカウントを作成する

• Cloudflareのページを開く
• 無料で始めるボタン(英語ではStart for freeボタン)をクリックする
• Googleなどのアカウントで続ける(Continue with ◯◯◯)か、Emailアドレスとパスワードを入力してSign upボタンをクリックする

Welcome画面が出てきたら、ブラウザは一旦閉じます。

プロジェクトにCloudflareのデプロイ設定を追加する

まずWrangler CLIをプロジェクトに追加します。

npm i -D wrangler@latest

プロジェクトのフォルダー直下(packages.jsonと同じ場所)に wrangler.jsonc というファイルを作成します。

wrangler.jsonc

{
  "name": "blog-demo",
  "compatibility_date": "2026-02-16",
  "assets": {
    "directory": "./dist",
  }
}

package.json のscriptsにdeployを追加します。

package.json(一部抜粋)

  "scripts": {
    "dev": "astro dev",
    "build": "astro build",
    "preview": "astro preview",
    "astro": "astro"
    "astro": "astro",
    "deploy": "astro build && wrangler deploy"
  },

---

Cloudflareにデプロイする

ターミナルでコマンドを実行します。

npm run deploy

初回はブラウザが開いてCloudflareにログインが求められます。Cloudflareの無料アカウントでログインしてください。ログイン後、ターミナル上でブログサイトのアップロードが行われます。

Cloudflareのログイン画面

ログインに成功

アップロードに成功

ターミナル上にはアップロードに成功したメッセージとデプロイしたブログサイトのURLが表示されます。ブラウザでURLを開くと、Cloudflare Workersでデプロイしたブログサイトを見ることが出来ます。

✨ Success! Uploaded 84 files (2.29 sec)

Total Upload: 0.31 KiB / gzip: 0.22 KiB
Uploaded blog-demo (7.46 sec)
Deployed blog-demo triggers (1.23 sec)
  https://blog-demo.<Cloudflareのアカウント名>.workers.dev

公式サイトにCloudflareのデプロイの手順が詳しく書かれています。

なお、オンデマンドレンダリング(SSR)のために@astrojs/cloudflareというアダプターも用意されていますが、静的なブログの場合は不要でしょう。

Cloudflareでブログサイトを管理する

ブラウザでCloudflareの画面にログインして、左サイドバーでCompute → Workers & Pagesを選択すると、デプロイしたブログサイトの名前が表示されます。

右端の3点リーダーをクリックして設定を表示を選択すると、ブログサイトのWorkersに関する詳細を見ることができます。一番下には名前変更や削除のリンクがあり、ブログサイトの名前を変えたりブログサイトを削除したりすることができます。