Cloudflare Pages｜Astroで0円ブログ手順
ツールレビュー

Cloudflare Pages｜Astroで0円ブログ手順

#Cloudflare Pages 使い方 #Astro ブログ 始め方 #副業 ブログ 0円 #ブログ運営 #GitHub

本記事はアフィリエイトリンクを含みます（PR）。掲載しているのは自分が実際に使っているサービスのみで、未検証のものは紹介していません。料金・仕様は2026年4月時点のもので、最新情報は各公式サイトをご確認ください。

こんなことで困っていませんか

副業ブログを始めたくて検索したのに、出てくるのは月1,000円のレンタルサーバーを勧める記事ばかり。月1,000円なら踏み出せると感じて始める方も多いと思います。一方で、「払うこと自体は安いけれど、続くか分からないものに固定費を発生させたくない」と感じる方もいるはずです。むしろ「安いから始めやすい」が「コミットメントが弱くて続かない」につながった、という経験談も少なくありません。

  • 月1,000円 × 12ヶ月 × 3年で3万円超。続けられる自信がまだないのに、いきなり3万円コースは重く感じる
  • ConoHa WINGやXserverの広告は山ほど見るのに、それ以外の選択肢が出てこない
  • 「Cloudflare Pages」「Astro」「GitHub」と聞いても、結局どこから手を動かせばいいのか手順が分からない

自分自身、後者のタイプでした。実は3年前、WordPress＋ConoHa WINGでブログの立ち上げと初期設定までやったことがあります。ただ結局、本業に時間を取られて続けられず、そのまま挫折しました。その記憶があったので、今回ConoHa WING＋WordPressテーマを買おうとした申込み画面の直前で「Cloudflareなら無料でできる」と知り、ひとまず0円で始めることに決めました。

この記事では、Astro+Cloudflare Pagesで実際に0円ブログを立ち上げた14日分の手順を、つまずいた箇所込みで共有します。

結論：0円ブログの最短ルートはAstro+Cloudflare Pages+GitHub

先に結論だけ書きます。自分が14日運用してたどり着いた最短ルートはこの3点セットです。

  1. GitHub（ギットハブ）：書いたファイルを保存・管理できる無料サービス。後でCloudflareと連携して自動公開につなげる場所になります
  2. Astro（アストロ）：Markdownで書いた記事を自動でWebページの形に組み立ててくれる無料ツール（静的サイトジェネレーターと呼ばれます）
  3. Cloudflare Pages（クラウドフレア・ページズ）：作ったサイトを無料で公開できる場所（ホスティング）。GitHubと連携させると、書いた記事を自動で世界に公開してくれます

サーバー代0円・ドメインなしで xxxx.pages.dev というサブドメインがそのまま公開URLになります。月の支払いは0円のまま、表示速度は体感でConoHa共有プランより速いくらいです。ただし「合う人」と「合わない人」がはっきり分かれるので、その線引きは記事後半で正直に書きます。

Cloudflare PagesとConoHa WING、どちらを選ぶべきか

ConoHa WINGが悪いわけではありません。WordPressで本格運用したい人にはむしろ向いています。それでも自分が今回Cloudflare Pagesを選んだ理由は3つです。

  • 3年前に一度挫折している：本業多忙で続けられず、月額固定費だけが残る経験を一度しているので、続くと確信できるまで支払いを発生させたくなかった
  • 静的サイトで十分だった：自分が書きたいのは技術メモと業務効率化の記録で、コメント機能や会員制は不要
  • GitHub連携が都合がよかった：mainブランチにpushしたら数十秒後に世界に公開される

逆に、次のような人はConoHa WINGの方が向いています。

  • WordPressのプラグインをフル活用したい：Cloudflare Pagesは静的サイト前提なのでWP不可
  • 管理画面からブラウザで記事を書きたい：AstroはMarkdownファイルをエディタで書く文化
  • 電話・チャットの日本語サポートがほしい：Cloudflareは基本的に英語ドキュメントベース

ConoHaとCloudflareをもう少し細かく比較した記事は別途書いています。読み比べたい方はCloudflare Pagesでブログを無料構築｜ConoHa比較を参考にしてください。

0円ブログ構築の3ステップ

ここから具体的な手順です。所要時間は全Step合わせて60〜90分（自分の場合）。

Step1：GitHubアカウント作成

まず「リポジトリ」という言葉だけ補足します。リポジトリは、ブログのファイル一式をまとめて保存する「ファイル置き場」のこと。GitHubではプロジェクト1つにつきリポジトリ1つを作ります。

  1. github.com にアクセスし、メールアドレスとパスワードでアカウント作成（無料）
  2. ログイン後、画面右上の「アバター画像（自分のマーク）」のすぐ左にある「＋」アイコンをクリック →「New repository」を選ぶ
  3. 「Repository name」欄に半角英数で名前を入力（例：my-blog）。日本語や記号は避けたほうが無難です
  4. 「Public（公開）」と「Private（非公開）」を選びます。Public＝世界中の誰でもファイルが見える状態、Private＝自分とCloudflareなど許可した相手だけが見える状態。副業を会社に知られたくない場合は必ずPrivateを選んでください
  5. 「Add a README file」にチェック（最初の説明文ファイルが自動で入って、後の操作がしやすくなります）
  6. 「Create repository」で作成完了

「Privateにしたら Cloudflare Pages から見えなくなるのでは？」と心配される方がいますが、Cloudflare PagesはPrivateリポジトリにも対応しているので問題ありません。

Step2：ローカルで雛形を作成

ここで「Node.js」と「ターミナル」という2つの言葉が出てきます。聞き慣れない方のために短く説明します。

  • Node.js（ノードジェイエス）：JavaScriptというプログラミング言語をパソコンの中で動かすための土台ソフト。Astroもこの土台の上で動きます。公式サイト（nodejs.org）から無料でダウンロードできます。バージョン20系以上を入れてください（古いと動きません）。
  • npm（エヌピーエム）：Node.jsに付属している「ツール置き場」のような仕組み。Astroのインストールも npm というコマンド経由で行います。Node.jsを入れると一緒に入ってきます。
  • ターミナル：パソコンに文字でコマンドを打って指示する画面のこと。Macは「ターミナル.app」、Windowsは「PowerShell」または「コマンドプロンプト」がそれに当たります。

準備ができたら、ターミナルで以下を順に打ち込みます。

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

それぞれの意味は次の通りです。

  • 1行目：my-blog という名前のフォルダにAstroの雛形を作る
  • 2行目：作成された my-blog フォルダの中に移動する
  • 3行目：開発用のサーバーを起動して、ブラウザで動作確認できる状態にする

途中で「テンプレートはどれにしますか？」と聞かれます。「Blog」テンプレートを選ぶと、記事置き場（src/content/blog/）まで最初から用意されている状態になります。

http://localhost:4321/ をブラウザで開いて、サンプルブログが表示されたらStep2完了です。自分はここで一度、npm コマンドが見つからないエラーで30分溶かしました。原因はNode.jsのインストールが中途半端で npm のパスが通っていなかったこと。公式サイトからインストーラーを入れ直して解決しました。

Step3：GitHub連携で自動デプロイ

ここが0円ブログの心臓部です。「push（プッシュ）」「デプロイ」「ビルド」という言葉が出てくるので、先に短く説明します。

  • push（プッシュ）：パソコンのローカルで作ったファイルをGitHubに送る操作のこと。ターミナルから git push というコマンドを使います
  • ビルド：書いた記事（Markdownファイル）を、ブラウザで読める形（HTML）に自動で組み立てる処理のこと
  • デプロイ：ビルドしてできた完成品を、公開用のサーバーに置いて世界に見える状態にする操作のこと

GitHub→Astro→Cloudflareのつなぎ込みは次の手順です。

  1. ローカルのAstroプロジェクトを、Step1で作ったGitHubリポジトリにpush（送信）します
  2. dash.cloudflare.com にアクセスしてアカウントを作成（無料）
  3. 左メニューの「Workers & Pages」をクリック →「Create」ボタン →「Pages」タブを選んで →「Connect to Git」
  4. GitHubアカウントとの連携を許可し、Step1で作ったリポジトリを一覧から選択
  5. ビルド設定の画面で「Framework preset」という欄から「Astro」を選びます。これだけで「どのコマンドで組み立てるか」「どのフォルダを公開するか」が自動入力されます
  6. 「Save and Deploy」ボタンを押すと、初回ビルドが始まります

数十秒で https://my-blog-xxxx.pages.dev という形のURLが発行され、世界に公開されます。この瞬間が一番気持ちよかったので、ぜひ自分の手で味わってほしいです。

つまずいた箇所と英語＋AIで突破した話

正直に書くと、Cloudflareの設定画面は基本的に英語です。日本語対応も一部進んでいますが、ビルドログやエラーメッセージは英語で出ます。

詰まった具体的な箇所は3つでした。

  • Node.jsのバージョンが古かった：v18系だとAstro最新版が動かない。v20系に上げて解決
  • Cloudflareのビルドが「Build failed」で止まる：原因は package-lock.json をコミットしていなかったこと。lockファイルを含めてpushし直して解決
  • 記事のfrontmatterのpubDateが文字列になっていた：pubDate: "2026-04-28" ではなく pubDate: 2026-04-28（クォートなし）が正解

どれもAIに状況を貼り付ければ数分で答えが出ました。「英語＋AI」が突破口になることは、副業の時間を捻出する上でも大きな発見でした。時間の作り方そのものを見直したい方は非エンジニア会社員の朝30分時間術も参考になるかもしれません。

まとめ｜14日運用してみてのリアルと要点

サーバー代0円・ドメイン代0円のまま、14日が経ちました。月額固定費が0円のまま続いている安心感は、想像していたよりもずっと書くハードルを下げてくれます。

要点を3行に絞ります。

  • 副業ブログは月1,000円のサーバーから始めなくても始められる。Astro+Cloudflare Pages+GitHubで0円から試せる
  • 手順はGitHub→Astro→Cloudflare Pagesの3ステップ。所要時間は60〜90分（自分の場合）
  • WordPressをフル活用したい人はConoHa WINGが合う。線引きは比較記事を参照

「3年で3万円」が怖くて止まっていた手を、もう一度動かすきっかけになれば嬉しいです。

関連記事

この記事が役に立ったら

同じ悩みを持つ方に届くよう、シェアしていただけると嬉しいです。

次に読む

おおばこ

物流 x AI自動化ブロガー

非エンジニアの会社員。GASとAIで日々の仕事を改善中。 「自分にもできた」を同じ立場の人に届けたいと思い、このブログを始めました。

プロフィール詳細 →
記事一覧に戻る