サーバ代0円で独自ドメインのブログを作る｜Astro×Cloudflare Pages完全ガイド

「ブログを始めたいけど、レンタルサーバに毎月1,000円払うのはちょっと…」

そんな人に向けて、サーバ代0円・ドメイン代だけでブログを運営する方法を紹介します。このブログ自体も、まさにこの方法で作っています。

結論：かかるのはドメイン代だけ

使うのは次の3つです。

  • Astro：記事を Markdown で書くと、軽いHTMLサイトにしてくれるツール（無料）
  • GitHub：記事やコードの置き場所（無料）
  • Cloudflare Pages：サイトを世界中に配信してくれるホスティング（無料）
項目 費用
サーバ（Cloudflare Pages） 0円
SSL証明書（https化） 0円（自動）
CDN・転送量 0円（静的ファイルは無制限）
独自ドメイン 年1,500〜2,000円前後（.com の場合）

レンタルサーバなら年間で1万円以上かかることも多いので、毎年その差額が浮く計算です。

WordPressとどっちがいい？

正直に言うと、向き・不向きがあります。

Astro + Cloudflare Pages WordPress + レンタルサーバ
月額費用 0円 1,000円前後〜
表示速度 非常に速い（静的HTML） テーマ・プラグイン次第
セキュリティ 攻撃される管理画面やPHPがない 更新を怠ると狙われやすい
記事の書き方 Markdown をエディタで書いて push ブラウザの管理画面で書く
デザイン変更 HTML/CSS を触る必要あり テーマを選ぶだけ
プラグイン なし（自分で作る） 豊富

ターミナルや Git に抵抗がない人、または「これを機に覚えたい」人には Astro がおすすめです。逆に、コードは一切触りたくないなら WordPress のほうが幸せになれます。

Cloudflare Pages 無料プランの制限

個人ブログならまず困らない範囲です。

項目 無料プランの上限
ビルド回数 月500回
同時ビルド 1件
ビルド時間 1回20分まで
ファイル数 1サイト20,000ファイル
ファイルサイズ 1ファイル25MiB
独自ドメイン 1プロジェクト100個

1日10回記事を更新しても月300回なので、ビルド回数を気にすることはほぼありません。画像は1枚25MiBまでなので、動画を直接置くのは避けましょう（YouTube 埋め込みがおすすめ）。

作り方の全体像

  1. パソコンに Node.js を入れる
  2. Astro でブログのひな形を作る
  3. GitHub にアップロードする
  4. Cloudflare Pages と GitHub をつなぐ
  5. 独自ドメインを設定する

順番に見ていきます。

手順1：Node.js をインストールする

Node.js 公式サイト から LTS版 をインストールします。インストール後、ターミナル（Windows なら PowerShell）で確認します。

node -v
# v22.x.x 以上ならOK

Astro の最新版は新しめの Node.js を要求するので、古いバージョンが入っている場合は入れ直してください。

手順2：Astro でブログを作る

公式のブログ用テンプレートを使えば、記事一覧・RSS・サイトマップが最初から揃っています。

npm create astro@latest my-blog -- --template blog
cd my-blog
npm run dev

ブラウザで http://localhost:4321 を開くと、ブログが表示されます。

記事は src/content/blog/ に Markdown ファイルを置くだけです。

---
title: '初めての記事'
description: '検索結果に表示される説明文'
pubDate: '2026-11-03'
---

ここに本文を書きます。

ファイル名がそのまま URL になります（first-post.md → /blog/first-post/）。ファイル名は英数字とハイフンにしておくと、URL が文字化けせずきれいです。

手順3：GitHub にアップロードする

GitHub で新しいリポジトリ（非公開でもOK）を作り、push します。

git init
git add .
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/<ユーザー名>/my-blog.git
git push -u origin main

node_modules や dist はテンプレートの .gitignore で除外されているので、そのまま push して大丈夫です。

手順4：Cloudflare Pages と連携する

Cloudflare のアカウント（無料）を作ったら、ダッシュボードで次の順に進みます。

  1. Workers & Pages を開く
  2. Create application → Pages → Connect to Git
  3. GitHub でログインし、先ほどのリポジトリを選ぶ
  4. Install & Authorize → Begin setup

ビルド設定はこう入力します。

項目 設定値
Project name 好きな名前（xxx.pages.dev の xxx になる）
Production branch main
Framework preset Astro
Build command npm run build
Build output directory dist

Save and Deploy を押すと1〜2分でビルドが終わり、https://xxx.pages.dev でサイトが公開されます。

これ以降は、記事を書いて git push するだけで自動的にサイトが更新されます。FTP でファイルをアップロードする必要はありません。

手順5：独自ドメインを設定する

プロジェクトの Custom domains → Set up a custom domain からドメインを入力します。ここで、ドメインの DNS をどこで管理しているかによって手順が変わります。

DNS を Cloudflare で管理している場合

ドメインを入力するだけで、DNS レコードと SSL 証明書が自動で設定されます。いちばんラクです。

DNS を別の会社（お名前.com など）で管理している場合

  • blog.example.com のようなサブドメインなら、今の DNS に CNAME レコード（blog → xxx.pages.dev）を追加すればOK
  • example.com のようなルートドメインで使いたいなら、ネームサーバを Cloudflare に移す必要があります

これからドメインを取るなら、最初から Cloudflare Registrar で取得すると DNS の移行作業がいりません。Cloudflare Registrar は原価に近い価格で、更新料が急に上がらないのも魅力です。

つまずきやすいポイント

ビルドが Node.js のバージョンで失敗する

Cloudflare 側の Node.js が古いと、ビルドが失敗することがあります。プロジェクトの Settings → Environment variables に次を追加して、再デプロイしてください。

変数名 値
NODE_VERSION 22

サイトマップや canonical の URL が example.com のまま

astro.config.mjs の site を自分のドメインに書き換えるのを忘れがちです。これを忘れると、検索エンジンに正しい URL が伝わりません。

export default defineConfig({
  site: 'https://example.com', // ← 自分のドメインに変更
});

日本語のファイル名で URL が長くなる

サーバ比較.md のように日本語のファイル名にすると、URL がエンコードされて %E3%82%B5... のように長くなります。SNS で共有したときに見栄えが悪いので、英数字にしておきましょう。

公開後にやっておきたいこと

  • Google Search Console に登録：https://自分のドメイン/sitemap-index.xml を送信する
  • Cloudflare Web Analytics を有効化：無料で使えて、Cookie を使わないアクセス解析
  • プライバシーポリシーと運営者情報のページを用意：アフィリエイトや広告の審査で見られます

まとめ

  • Astro + GitHub + Cloudflare Pages なら、サーバ代0円でブログを運営できる
  • かかるのはドメイン代だけ（年1,500〜2,000円前後）
  • 記事は Markdown で書いて git push するだけで公開される
  • コードを触りたくない人は WordPress、触れる人・覚えたい人は Astro