サーバー代0円で爆速運用！VS Codeの3コマンドで実現するAstro×Cloudflare Pages自動公開ガイド

「記事を書くたびにFTPでファイルをアップロードするのは面倒」「WordPressのような重い管理画面やサーバー代の固定費から解放されたい」と考えていませんか？

モダンな静的サイトジェネレーター「Astro」と「Cloudflare Pages」を組み合わせれば、サーバー代を完全0円に抑えつつ、世界最高水準の爆速メディアを運用できます。

しかも、日々の記事公開や修正作業は、VS Codeの画面からたった3つのGitコマンドを打ち込むだけ。裏側で自動的にビルドが走り、数十秒後には本番サイトへ反映されます。

この記事では、Gitの難解な専門用語を省き、非エンジニアの個人ブロガーでも今日から迷わず実践できる「自動公開ワークフロー」を完全図解で解説します。

なぜ「Git × Cloudflare Pages」でブログを公開するのか？

WordPressをはじめとする従来のブログ運営と、今回の「Astro × Cloudflare Pages」の最大の違いは、「手元で書いて、全自動で本番へ送る仕組み（CI/CD）」にあります。

項目	従来のレンタルサーバー / WordPress	Astro × Cloudflare Pages
月額コスト	月額1,000円〜2,000円前後	完全0円（帯域制限なし）
表示スピード	PHPやDB処理による遅延が発生しやすい	世界中のエッジサーバーから爆速配信
公開の手間	管理画面にログインして投稿、またはFTP手動更新	VS Codeから3コマンド打つだけで全自動
トラブル時の安全性	プラグイン更新等でサイトが真っ白になるリスク	Gitの履歴から過去の状態へ一瞬で復元可能

難しそうに見えるGitですが、日常のブログ運営で覚えるべき操作はごくわずかです。まずは最初の土台作りから進めていきましょう。

【準備】GitHubリポジトリとCloudflare Pagesを連携する

最初に1回だけ、コードを保管する「GitHub」と、サイトを配信する「Cloudflare Pages」を接続する設定を行います。

1. GitHubにリポジトリを作成してコードを保管する

GitHub にログインし、画面右上の「+」アイコンから 「New repository」 を選択します。
リポジトリ名（例：my-tech-media）を入力します。
公開設定は「Private（非公開）」でも「Public（公開）」でも構いません。
「Create repository」をクリックして空のリポジトリを作成します。

2. Cloudflare Pagesでリポジトリを連携する

Cloudflare 管理画面にログインします。
左側メニューから 「Workers & Pages」＞「作成」＞「Pages」 を選択します。
「Git に接続」 をクリックし、先ほど作成したGitHubアカウントとリポジトリを選択します。

3. ビルド設定（Astroを選ぶだけ）

「フレームワークのプリセット」のプルダウンから 「Astro」 を選択します。
自動的に以下の設定が入力されます：
- ビルドコマンド： npm run build
- ビルド出力ディレクトリ： dist
一番下の 「保存してデプロイする」 をクリックします。数分待つと最初のビルドが完了し、固有のURL（xxx.pages.dev）でサイトが全世界に公開されます。

【日常ルーティン】記事を公開・更新する「基本の3コマンド」

初期設定が終われば、日々の記事公開や修正作業でブラウザの管理画面を開く必要はありません。VS Codeの画面下にある「ターミナル（黒い画面）」から、決まった3行を入力するだけで完了します。

VS Codeでターミナルを開く

VS Codeを開き、ショートカットキー Ctrl + @（またはメニューの「ターミナル」＞「新しいターミナル」）を押すと、画面下部に黒い入力欄が現れます。

打つべき3つのコマンド

① 変更したファイルを箱に詰める

git add .

末尾の「.（ドット）」は「新しく追加・修正したすべてのファイル」を意味します。これで今回の更新内容がひとまとめに梱包されます。

② 箱にラベルを貼って記録を確定する

git commit -m "feat: new article published"

-m "..." の中に、どんな変更を行ったかのメモ（コミットメッセージ）を自由に記述します。記事公開なら「新記事追加」、修正なら「誤字修正」といった簡単な日本語でも問題ありません。

③ GitHubへ送信して自動公開をスタートさせる

git push origin main

Enterキーを押すと、手元の変更データがGitHubへ一瞬で送信されます。これを受け取ったCloudflare Pagesが自動的に検知し、数秒〜数十秒で本番サイトのビルドと公開を終わらせます。

【実録トラブル対策】プッシュしたのにサイトが変わらない時の3大チェック

「コマンドを打ってプッシュも成功したのに、本番サイトを見ても古い記事のまま変わっていない！」という事態は、初心者が最も陥りやすい落とし穴です。焦らずに次の3点を確認してください。

1. ファイルが未保存のままプッシュされていないか？

VS Codeの上部タブを見てください。ファイル名の右横に「白丸（●）」が付いていませんか？

白丸が出ている状態は「パソコンのメモリ上にあるだけで、まだファイルとして保存されていない」状態です。
エディタ内をクリックして Ctrl + S を押すか、メニューの「ファイル」＞「保存」を押して、白丸を消してから再度3コマンドを実行してください。

2. Cloudflare Pagesのビルドが完了しているか？

プッシュしてから本番に反映されるまでには、数十秒〜1分前後の処理時間がかかります。

Cloudflare Pagesの管理画面で「Deployments（デプロイ一覧）」を開きます。
最新のコミットメッセージの横が「緑色のチェックマーク（Success）」になっているか確認してください。
「In progress（実行中）」なら反映待ちです。「Failed（失敗）」になっている場合は、ビルドログを開いて構文エラー等を確認します。

3. ブラウザやエッジの「キャッシュ」を掴んでいないか？

Cloudflareのデプロイが成功しているのに画面が変わらない原因の9割は、「ブラウザが古い画面の記憶（キャッシュ）を表示しているだけ」です。

サイトを開いた状態で、キーボードの Ctrl + F5（Macは Cmd + Shift + R）を押し、強制スーパーリロードを実行します。
それでも変わらない場合は、ページ上の何もないところで右クリック＞ 「ページのソースを表示」 を開きます。
Ctrl + F で更新したテキストやコードを直接検索してみてください。ソースコード上に反映されていれば、サイト側の更新は100%成功しています。