把 HTML 檔放上網路：GitHub Pages ＆ Cloudflare 雙平台教學
各約 10 分鐘
完全免費
純網頁操作
GitHub Pages vs Cloudflare，怎麼選？
| GitHub Pages | Cloudflare |
|---|
| 本業 | 程式碼倉庫（存檔案＋修改紀錄） | 網路基礎設施（CDN、資安） |
| 費用 | 免費 | 免費 |
| 操作方式 | 網頁點選、拖曳上傳 | 網頁點選、拖曳上傳（進階可用指令） |
| 網址長相 | 帳號.github.io/倉庫名/ | 專案名.pages.dev |
| 檔案公開性 | 免費版倉庫內容完全公開（含修改紀錄） | 不會公開倉庫與修改紀錄，但網頁的 HTML/CSS/JS 訪客仍可查看 |
| 進階能力 | 只能靜態網頁 | 可再串接 Workers 等進階功能（需額外設定，非本教學範圍） |
| 適合 | 公開分享、順便學版本管理 | 網址較短、未來想擴充功能 |
簡單記：兩個都能免費放靜態網頁，選哪個都行。想順便學 GitHub（工程師世界的標準工具）→ 選 GitHub；想要短網址、未來想擴充功能 → 選 Cloudflare。
重要觀念：不論放哪個平台，公開網站用到的 HTML、CSS、JavaScript 和圖片，訪客都可以透過瀏覽器「檢視原始碼」查看或下載。Cloudflare 只是不像 GitHub 那樣公開整個倉庫——不代表你的網頁內容是保密的。API Key、密碼、公司機密一律不能寫在網頁裡（詳見下方安全須知）。
0
事前準備（兩個平台都一樣）：拿到你的 HTML 檔
請 ChatGPT 或 Claude 生成網頁後，把檔案存到電腦裡（例如桌面）。
- ChatGPT：點對話中程式碼區塊右上角的「複製」，貼到記事本，另存新檔為
index.html（存檔類型選「所有檔案」）。若有提供下載按鈕，直接下載即可。
- Claude：生成的網頁（Artifact）右上角有下載按鈕，可直接下載
.html 檔。
建議把檔案命名為 index.html（全小寫）。這是網站的「首頁」預設檔名，之後網址會最簡短漂亮。兩個平台都吃這個規則。
- 打開
github.com，點右上角 Sign up。
- 輸入 Email、設定密碼、取一個帳號名稱（username）。
- 收信驗證後就完成了。
帳號名稱會出現在你的網址裡（例如 irene.github.io），建議取一個簡短好記的英文名。已有帳號的話直接登入，跳到步驟 2。
「倉庫」就是放檔案的資料夾。
- 登入後，點右上角的「＋」→ 選 New repository。
- Repository name：取個英文名字，例如
my-page（小寫、不要空格，可用連字號 -）。
- 權限選 Public（公開）——免費版必須公開才能架網站。
- 勾選 Add a README file（勾了之後上傳檔案比較方便）。
- 點綠色按鈕 Create repository。
- 在剛建立的倉庫頁面，點 Add file → 選 Upload files。
- 把
index.html 直接拖曳到虛線框裡（或點 choose your files 選檔）。
- 等檔案出現在清單後，捲到最下面，點綠色按鈕 Commit changes。
如果網頁有搭配的圖片或其他檔案，可以一起拖進去，一次上傳多個檔案沒問題。
4
開啟 GitHub Pages（讓它變成網站）
- 在倉庫頁面上方，點 Settings（⚙️ 設定）。
- 左邊選單找到 Pages，點進去。
- 在 Build and deployment 區塊：
- Source 選 Deploy from a branch
- Branch 選 main，資料夾保持 /(root)
- 點 Save。
⏳ 存檔後要等 1〜3 分鐘，GitHub 才會把網站建好。可以先去倒杯水。
回到 Settings → Pages 頁面，上方會出現「Your site is live at …」和你的網址：
https://你的帳號.github.io/倉庫名稱/
例如帳號是 irene123、倉庫叫 my-page，網址就是：
https://irene123.github.io/my-page/
這個網址可以傳給任何人，用手機、電腦都打得開。恭喜你，網站上線了！
超簡單——重新上傳同名檔案就會自動覆蓋：
- 請 ChatGPT / Claude 改好新版 HTML，存成同樣的
index.html。
- 到倉庫頁面 → Add file → Upload files → 拖進去 → Commit changes。
- 等 1〜2 分鐘，網址內容就更新了（網址不變）。
如果更新後看到的還是舊版，按 Ctrl + F5 強制重新整理，或用無痕視窗開啟。
常見問題（GitHub Pages）
打開網址出現 404 Not Found？
① 剛設定完通常要等 1〜3 分鐘。② 確認檔名是 index.html（全小寫）；如果檔名是別的（例如 report.html），網址後面要加上檔名：…github.io/my-page/report.html。③ 確認 Settings → Pages 有選 main 分支並按過 Save。
網頁打開變成一堆程式碼文字？
通常是存檔時副檔名變成 .txt 了（例如 index.html.txt）。用記事本另存新檔時，「存檔類型」要選「所有檔案」，檔名輸入 index.html。
可以放很多個不同的網頁嗎？
可以。同一個倉庫裡放多個 HTML 檔（如 a.html、b.html），網址加檔名即可分別打開。也可以為不同專案建立不同倉庫，每個倉庫都有自己的網址。
網站內容大家都看得到嗎？
是的，Public 倉庫 + GitHub Pages 的網頁是公開的，知道網址的人都能看。請不要放個資、密碼、內部機密資料。
要付費嗎？有流量限制嗎？
完全免費。GitHub Pages 適合個人網頁、作品集、報告分享，一般使用量完全不用擔心。
- 打開
dash.cloudflare.com/sign-up。
- 輸入 Email、設定密碼，點 Sign up。
- 到信箱收驗證信，點確認連結。
註冊過程可能會問你要不要加網域或升級方案——全部跳過（skip）即可，放網頁用免費方案就夠。
- 登入後，左邊選單點 Workers & Pages。
- 點 Create（建立）按鈕。
- 切到 Pages 分頁，選 Upload assets（直接上傳，不用連 Git）。
- Project name：取個英文名，例如
my-page（小寫、可用連字號）。這個名字會變成你的網址開頭。
- 點 Create project。
- 把
index.html（和搭配的圖片等檔案）直接拖曳到上傳區塊。
- 點 Deploy site（部署網站）。
- 等幾十秒，畫面會顯示部署成功。
也可以把所有檔案放進一個資料夾，直接拖整個資料夾上去。首頁一樣要叫 index.html。
部署完成後會顯示你的網址：
https://專案名稱.pages.dev
例如專案叫 my-page，網址就是：
https://my-page.pages.dev
比 GitHub Pages 的網址更短，一樣可以傳給任何人。剛部署完若打不開，等 1〜2 分鐘再試。
- 登入 Cloudflare → Workers & Pages → 點你的專案。
- 點 Create new deployment（建立新部署）。
- 把新版檔案拖上去 → Deploy site。網址不變，內容更新。
進階：Cloudflare 之後還能串接 Workers、Pages Functions 或權限管理等功能，但那些需要額外的設定與指令工具，不在這份新手教學的範圍。入門階段用拖曳上傳就完全夠用了。
放上網路 = 全世界都看得到（GitHub 的 Public 倉庫連原始檔都公開）。上傳前請把檔案從頭到尾看一遍，確認沒有下面這些東西：
- 個人資料：真實姓名、電話、地址、Email、身分證字號、照片——自己的或別人的都不行。
- 密碼與金鑰：任何密碼、API Key、Token。AI 生成的程式碼有時會要求填入金鑰，絕對不要直接寫在 HTML 裡再上傳。金鑰一旦公開，幾分鐘內就可能被機器人掃到盜用。
- 公司內部資料：營收數字、客戶名單、內部文件、未公開的企劃內容。分享工作相關網頁前，先確認公司規範允許。
- 付費或版權素材：沒有授權的圖片、字型、文章內容，公開發布可能侵權。
不小心傳上去了怎麼辦？光是刪掉檔案不夠——GitHub 會保留歷史紀錄，而且資料可能已經被別人下載、Fork 或快取，無法保證從所有地方消失。請照這個順序處理：
- 最優先：如果是密碼、Token、API Key，立刻到原服務「撤銷或更換」它，讓外流的那組立即失效。這一步做完，後面就算有人拿到也沒用。
- 把公開網站上的內容移除或換成乾淨版本（GitHub 重新上傳覆蓋；Cloudflare 重新部署，並到專案的 Deployments 刪掉舊部署）。
- GitHub 還要處理歷史紀錄：最簡單的做法是把整個倉庫刪掉重建（Settings → 最下方 Danger Zone → Delete this repository）。
- 必要時聯絡 GitHub Support，請他們協助清除殘留的快取。
其他小提醒：兩個平台的帳號都建議開啟兩步驟驗證；AI 生成的程式碼若會連到外部網站或要求輸入資料，先看懂它在做什麼再上傳。
快速複習（小抄）
| 步驟 | GitHub Pages | Cloudflare |
|---|
| 1 | 註冊 / 登入 github.com | 註冊 / 登入 dash.cloudflare.com |
| 2 | ＋ → New repository → Public → Create | Workers & Pages → Create → Pages → Upload assets |
| 3 | Add file → Upload files → 拖入 index.html → Commit | 取專案名 → 拖入 index.html → Deploy site |
| 4 | Settings → Pages → Branch 選 main → Save | （不用這步，部署完直接有網址） |
| 網址 | 帳號.github.io/倉庫名/ | 專案名.pages.dev |
| 更新 | 重新上傳同名檔案覆蓋 | Create new deployment → 重新拖曳上傳 |