としまる

アイちゃん、僕のWebアプリ毎回ZIPファイルでアップロードしてるんだけど、これマジでダルくて…

アイちゃん

あー、それはキツいやつ♡ GitHub連携にすると一気に楽になるよ。今日はその切り替えのお話ね♪

Cloudflare PagesをGitHub連携にしたら、デプロイが「pushするだけ」になった話

はじめに

個人で作った小さなWebアプリを、これまで Cloudflare Pages にZIPファイルを手動アップロード する方式で運用してました。いや〜、これがまた地味にダルくて…（笑）

更新するたびに、こんな手順を踏んでたんです。

1. ファイルを編集する
2. ZIPに圧縮する
3. Cloudflareにログインする
4. 該当プロジェクトを開く
5. アップロードする

最初は「手軽でいいじゃん」って思ってたんですけど、アプリの数が増えてくるとちょっとした修正のたびにこれ全部やるの、正直ストレスでした。「ZIP…またお前か…」みたいな（笑）。

で、今回、これを GitHub連携の自動デプロイ に切り替えたら、マジで世界が変わりました。備忘録も兼ねてまとめておきます！

旧ワークフローの何がしんどかったか

私はプログラミングの専門家じゃなくて、基本的にAIに手伝ってもらいながら個人開発を進めるタイプです。作ってるのは筋トレ記録アプリとかビリヤード関連のツールとか、単一の index.html で完結する小さなWebアプリばっかり。

それでも、運用するアプリが増えてくると不満が出てきたんですよ〜。

• ファイルを直すたびにZIP化する手間（これがまず面倒）
• バージョン管理ができないので「前の状態に戻す」が事実上不可能
• アップロードを忘れて「あれ、サイト古いまま？」ってなる（あるある）
• 複数アプリを同時に修正すると、どれをアップしたか分からなくなる

特に痛かったのが「履歴が残らない」こと。バックアップを別フォルダに取っておく、みたいな原始的な運用をしてたんですけど、明らかに限界でした（笑）。

としまる

で、GitHub連携にしたら、何がそんなに変わるの？

アイちゃん

結論から言うと「git push 一発」でデプロイ完了♡ ZIP圧縮→ログイン→アップロード…の手数がぜんぶ消えるよ。

GitHub連携にすると何が変わるのか

結論から言っちゃいます。こうなります。

ファイルを編集 → コマンド1つで本番反映完了

仕組みはめちゃくちゃシンプル。

1. ローカル（自分のPC）でファイルを編集する
2. 変更内容をGitHub（リモート保管庫）に送信する
3. Cloudflare Pagesが「GitHubの更新」を自動で検知する
4. 自動でビルド＆デプロイが走って、本番サイトが切り替わる

私が手を動かすのは1と2だけ。3以降は完全に自動です。これ、初めて動いたとき「え、もう公開されてるの？」って一瞬戸惑いました（笑）。

しかも、変更履歴がぜんぶ残るので「先週の状態に戻したい」も一発。バックアップを別途取る必要もなくなります。これ、地味にめちゃくちゃ効きます。

としまる

git pushとか言われても、初心者にはピンとこないんだよね…

アイちゃん

大丈夫、ここで噛み砕いて解説するね♡ 専門用語っぽいけど、やってることは超シンプル♪

「git push」って結局なに？

ここが最初いちばんモヤモヤしたところなので、自分の言葉でまとめておきますね〜。

git push とは、ローカルPCに溜めた変更履歴を、GitHubの保管庫にアップロードする操作 のことです。要は「こっちの最新版、そっちに送るよ〜」っていう、あの一言ですね。

イメージ図にするとこんな感じ👇

で、ここで誤解しやすいのが、「pushするのにGitHubのサイトを開く必要あるんじゃないの？」って点。

答え：不要です！

git push はターミナル（Macの黒い画面）で打つコマンドで、SSH鍵による認証が裏で勝手に走るので、ログイン画面すら出ません。コマンド1行で完結。マジで快適です〜。

ローカルとGitHubとCloudflareの関係

整理するとこうなります。

ポイントは、編集するのは常にローカルだけ ってこと。GitHubのサイト上で直接ファイルを書き換えることもできるんですけど、混乱のもとなので普段はやりません。そっちに手を出すと高確率で地獄みます（笑）。

としまる

コマンド打つのまだ慣れてないんだけど、これがハードル高そう…

アイちゃん

そこはClaude Codeに頼めば日本語で済むよ♡ 「これcommitしてpushして」ってお願いするだけ。手順覚える必要ナシ♪

Claude Codeを使うと、コマンドすら打たなくていい

さて、ここからが本題です！

git add → git commit → git push という3つのコマンドを、いちいち手で打つのは正直めんどい（笑）。コマンドの綴りも覚えないといけないし、コミットメッセージを毎回考えるのも地味にだるいんですよね。

で、私は普段 Claude Code （AIに直接ターミナル操作を任せられるツール）を使ってるので、こう頼むだけでOKです。

「とれログのベンチプレスのデフォルト重量を60kgに変えて、pushまでして」

すると Claude Code が裏で勝手に、

1. 該当ファイルを読む
2. 該当箇所を編集する
3. git add → git commit → git push を実行する
4. 結果を報告してくれる

を全部やってくれます。で、Cloudflareが自動デプロイしてくれるので、数十秒後にはスマホのブックマークから見ても最新版。もう魔法ですよこれは。

GitHub Desktopは入れなくていいの？

これも気になってた点。Git操作をGUIでできる「GitHub Desktop」というアプリがあるんですよね。

調べてみた結論は 個人開発でClaude Codeを併用するなら不要 でした。

GitHub Desktopが活きるのは、

• 複数人の共同開発でブランチ管理が複雑なとき
• 視覚的に差分を確認しながら作業したいとき
• AIを使わず、自分一人でGit操作を完結させたいとき

私みたいに「ファイル編集も、Git操作も、エラー対応も全部AIに任せる」スタイルだと、アプリを増やすほうがむしろ混乱します。Claude Code 1本に集約するのが一番シンプルでした。道具を増やせばいいってもんじゃないんですよね〜。

実際にやってみての感想

ここまで切り替えてみて、率直に「良かったな〜」と思う点を挙げておきます！

• 更新の心理的ハードルが消えた：「ちょっと直したい」が思いついた瞬間に反映できる
• バックアップを意識しなくてよくなった：GitHubに履歴がすべて残る
• 複数アプリの管理が楽になった：どれが最新か迷わなくなった
• AIとの相性が抜群：Claude CodeにGit操作まで任せられるので、自分はやりたい変更を日本語で伝えるだけ

一方で、最初の設定（SSH鍵の生成、GitHubアカウント作成、リポジトリ作成、Cloudflare連携）はちょっとだけ骨が折れます。正直、ここで心折れそうになりました（笑）。でも一度乗り越えちゃえばあとはずっとラクなので、最初の数時間だけは集中して片付けちゃうのがおすすめです！

としまる

これ、もっと早く知りたかった〜！

アイちゃん

でしょ♡ 一度繋げばあとはずっと楽になるから、これからの個人開発が一段加速するよ♪

まとめ

• Cloudflare Pagesの「ZIP手動アップロード」は手軽だけど、運用が増えるとつらい
• GitHub連携にすれば、git push 1つで自動デプロイされる
• pushはターミナルで完結するので、GitHubのサイトを開く必要はない
• Claude Codeを併用すれば、コマンドすら打たずに日本語で開発・公開ができる
• GitHub Desktopは個人開発＋AI併用なら不要

「AIに開発の面倒な部分を任せて、自分は意思決定に集中する」っていう働き方が、個人開発でも当たり前にできる時代になったんだな〜と、改めて実感しました。ほんと、いい時代です🔥

同じように小さな個人アプリを運用してる方の参考になれば嬉しいです！

関連記事もあわせてどうぞ

• Claude Codeとは？40代非エンジニアでも使えるAIコーディングツールの全貌と副業活用術
• Claude Code活用事例10選！副業・ブログ・投資・日常業務を自動化する具体的な使い方
• Claude Codeでブログ収益化を加速！40代がWordPress運営に活かす5つの実践術
• Claude Code vs ChatGPT徹底比較｜副業・ブログ運営にはどちらを選ぶべきか？

としまる

氷河期世代のサラリーマン

子持ち世帯でサイドFIREを夢見る４０代リーマン。
氷河期世代出身で、ＩＴ革命真っ只中で思春期を過ごす。
旧ＮＩＳＡ開始とともに株式投資を始める。