Mar 4, 2026

【2026年版】Cloudflare Pages + Astroでブログを始める方法その１ ── GitHubアカウント作成からCloudflare Pages設定まで

【2026年版】Cloudflare Pages + Astroでブログを始める方法その１

この記事でやること

ステップ	内容
1	必要なアカウントとツールの準備
2	GitHubアカウントの作成
3	Astroプロジェクトの作成
4	GitHubにリポジトリを作成してpush
5	Cloudflare Pagesと連携・デプロイ

この記事が終わったとき、ブラウザでURLを開けばサイトが表示される状態になっています。

事前に必要なもの

作業を始める前に、以下の2つだけインストールしておいてください。

ツール	確認コマンド	入手先
Node.js（v18以上）	`node -v`	nodejs.org（LTS版を選択）
Git	`git --version`	git-scm.com

ターミナル（MacはTerminal.app、WindowsはコマンドプロンプトまたはPowerShell）を開いて上記コマンドを実行し、バージョン番号が表示されればOKです。

ポイント：Node.jsをインストールすると npm も一緒に入ります。npm -v でも確認できます。

ステップ１：GitHubアカウントを作成する

GitHubイメージ画像

GitHubはコードを保存・管理するサービスです。Cloudflare Pagesと連携するために必要です。

github.com にアクセス
「Sign up」をクリック
メールアドレス・パスワード・ユーザー名を入力して登録
メールに届いた確認コードを入力して認証完了

すでにGitHubアカウントを持っている方はこのステップをスキップしてください。

ステップ２：Cloudflareアカウントを作成する

Cloudflareイメージ画像

cloudflare.com にアクセス
右上の「Sign Up」をクリック
メールアドレスとパスワードを入力して登録
メール認証を完了する

無料プランで十分です。クレジットカードの登録は不要です。

ステップ３：Astroプロジェクトを作成する

Astroイメージ画像

ターミナルを開いて、サイトを作りたいフォルダに移動してから以下を実行します。

npm create astro@latest

実行するといくつか質問が出ます。以下を参考に答えてください。

Where should we create your new project?
→ ./my-blog  （任意のフォルダ名でOK）

How would you like to start your new project?
→ "A blog" を選択

Install dependencies?
→ Yes

Initialize a new git repository?
→ Yes

ポイント：「A blog」テンプレートを選ぶと、記事用のMarkdownファイルやレイアウトがあらかじめ用意された状態でスタートできます。後から自由にカスタマイズできるので、まずはこのまま進めましょう。

完了したら、プロジェクトフォルダへ移動します。

cd my-blog

ローカルで動作確認します。

npm run dev

ブラウザで http://localhost:4321 を開いて、Astroのデフォルトブログが表示されればOKです。確認できたらターミナルで Ctrl + C を押して開発サーバーを止めておきます。

ステップ４：GitHubにリポジトリを作成してpushする

4-1. GitHubでリポジトリを新規作成

github.com/new にアクセスします。

設定項目	推奨値
Repository name	`my-blog`（任意）
Public / Private	どちらでも可
Initialize with README	チェックしない

「Create repository」をクリックすると、リポジトリが作成されます。
ページに表示されるURL（例：https://github.com/yourname/my-blog.git）をコピーしておいてください。

4-2. ローカルからpushする

ターミナルで以下を順番に実行します。yourname の部分は自分のGitHubユーザー名に置き換えてください。

git remote add origin https://github.com/yourname/my-blog.git
git branch -M main
git push -u origin main

GitHubのリポジトリページを開いてファイルが並んで表示されていれば成功です。

ポイント：git remote add origin ... は「このローカルフォルダをGitHubのあのリポジトリと紐づける」という操作です。一度やれば次からは git push だけで更新できます。

ステップ５：Cloudflare Pagesと連携する

ここが最後の設定です。一度繋いでしまえば、以後はpushするだけで自動デプロイされます。

5-1. Cloudflare DashboardからPagesを開く

dash.cloudflare.com にログイン
左メニューの 「Workers & Pages」 をクリック
「Pages」タブ → 「Connect to Git」 をクリック

5-2. GitHubと連携する

「Connect to GitHub」をクリックするとGitHubの認証画面が開きます。

「Only select repositories」 を選んで、my-blog リポジトリだけを許可するのが安全です
認証が終わるとリポジトリ一覧が表示されるので、my-blog を選択
「Begin setup」をクリック

5-3. ビルド設定を入力する

以下の通りに設定します。

設定項目	入力値
Project name	任意（公開URLの一部になります）
Production branch	`main`
Framework preset	Astro を選択
Build command	`npm run build`（自動入力）
Build output directory	`dist`（自動入力）

ポイント：Framework presetで「Astro」を選ぶと、ビルドコマンドと出力ディレクトリが自動で埋まります。基本的にそのままで大丈夫です。

「Save and Deploy」をクリックすると、最初のビルドが始まります。

デプロイ完了を確認する

ビルドには1〜2分かかります。完了すると以下のようなURLが発行されます。

https://my-blog-abc.pages.dev

このURLをブラウザで開いてサイトが表示されれば完了です。

これ以降は自動デプロイ

設定はこれで終わりです。記事を書いてpushするだけで、本番サイトが自動で更新されます。

git add .
git commit -m "新しい記事を追加"
git push

数十秒〜1分後にはサイトに反映されます。

まとめ

やったこと	結果
GitHubアカウント作成	コードをクラウドで管理できる状態
Astroプロジェクト作成	ブログテンプレートがローカルで動く状態
GitHubにpush	ソースコードがリモートに保存された状態
Cloudflare Pagesと連携	pushするだけで自動デプロイされる状態

次の記事（その２）では、独自ドメインの設定・記事の書き方・デザインのカスタマイズについて解説します。

困ったときは

症状	対処
`npm run dev` でエラーが出る	`node -v` でNode.jsがv18以上か確認
pushできない	GitHubのユーザー名・URLが正しいか確認
Cloudflareのビルドが失敗する	Dashboardのビルドログのエラー文をAIにそのまま貼り付けて聞く

エラーが出たときはビルドログをそのままAIに見せるのが一番早いです。

宣伝

格安で、維持費のかからないブログやWebサイトを作成しています。

「自分でやってみたけど詰まった」「最初だけ手伝ってほしい」という方も、お気軽にInstagramからご連絡ください。

👉 Instagram: [@your_handle]

【2026年版】Cloudflare Pages + Astroでブログを始める方法 その１ ── GitHubアカウント作成からCloudflare Pages設定まで