01
ファイルを直す
たとえば index.html や style.css を修正します。画像を差し替えることもあります。
初心者向け / やさしく解説
GitHubに入れたコードが
Cloudflareでサイトになる
「GitHubって何？」「Cloudflareって何？」という人でもわかるように、
サイト公開の流れを、できるだけかんたんな言葉で整理しました。
まずはこれだけ
全体像
ざっくり言うと、GitHubはサイトのデータを置く場所、 Cloudflareはそのデータを見られる形で公開する場所です。
1
あなた
HTML・CSS・画像を作る
→
2
GitHub
ファイルを保存する
“保管庫”
→
3
Cloudflare Pages
GitHubを読み取り
公開サイトを作る
→
4
見る人
ブラウザでサイトを見る
ポイント： あなたは主に GitHubにファイルを入れる だけ。するとCloudflareがその内容を読み取って、自動でサイトを公開してくれます。
実際の動き
修正したら、どう反映される？
「修正したら何が起きるのか」を順番に見ると、こんな流れです。
02
GitHubに保存する
GitHubで「Commit」すると、その修正内容を履歴つきで保存できます。「上書き保存＋履歴管理」と考えるとわかりやすいです。
03
Cloudflareが自動で見つける
GitHubの更新をCloudflareが検知して、新しい内容でサイトを作り直します。
04
公開サイトに反映される
少し待って公開URLを開くと、修正後のデザインが見られます。
修正する
→
GitHubに保存
→
Cloudflareが更新
→
サイトに反映
役割の違い
GitHubとCloudflareは何が違う？
GitHub
サイトの「保管庫」
- HTMLやCSSなどのファイルを置く場所
- 修正の履歴を残せる
- 「どこを直したか」がわかる
- 共同作業にも向いている
たとえるなら、設計図や素材をしまう棚です。
Cloudflare Pages
サイトの「公開係」
- GitHubの内容を使ってサイトを公開する
- 公開URLを作る
- 更新を自動反映してくれる
- 世界中から速く表示しやすい
たとえるなら、保管庫の内容をお客さんに見せるショーケースです。
初心者向け
よくある勘違い
GitHubで完成デザインを見る？
基本は違います。 GitHubはファイルを見る場所。実際の見た目はCloudflare Pagesの公開URLで確認します。
Cloudflareに毎回アップロードする？
いいえ。 GitHubを更新すれば、Cloudflareが自動で新しい内容を取り込みます。
Commitって何？
「この修正を保存します」という記録です。保存だけでなく、あとから変更履歴を確認できます。
公開URLはどこで見る？
Cloudflare Pagesのプロジェクト画面です。最初は xxxxx.pages.dev のようなURLが発行されます。
FAQ
よくある質問
Q. サイトのデザインはどこで確認するの？
A. GitHubではなく、Cloudflare Pagesの公開URLで確認します。
Q. GitHubのリポジトリを非公開にしてもサイト公開できる？
A. はい。コードは非公開のまま、サイトだけ公開する運用ができます。
Q. ファイルを間違えても大丈夫？
A. GitHubには履歴が残るので、前の状態に戻しやすいです。
Q. HTML / CSS / JSって何？
A. HTML＝中身や骨組み、CSS＝色・文字・余白などの見た目、JS＝ボタンなどの動きです。
用語まとめ
覚える言葉はこれだけ
Repository
サイト一式を入れる箱。フォルダのようなもの。
Commit
修正内容を記録しながら保存すること。
Branch
本番とは別に、作業用の分かれ道を作る仕組み。
Deploy
サイトを公開できる状態に反映すること。
Pages
静的サイトを公開するCloudflareの機能。
pages.dev
Cloudflare Pagesで最初にもらえる公開URL。