🚀 專案無限免費部署與開發教學指南

💻 VS Code 本機開發與 Git 同步 (必備基本功)

優勢：確保您在電腦上的修改，能順利上傳並觸發 Cloudflare 或 GitHub 的自動更新。

1

修改程式碼與存檔

在 VS Code 中開啟專案，編輯 HTML/CSS/JS 檔案。編輯完成後，請務必按下 Ctrl + S 進行存檔。檔案名稱旁邊的圓點消失代表存檔成功。
2

開啟終端機 (Terminal)

在 VS Code 上方選單點擊終端機 ➔ 新增終端機，或使用快捷鍵 Ctrl + ` 呼叫出下方的命令列視窗。
3

執行 Git 推送三部曲 (關鍵!)

在終端機中依序輸入以下三個指令並按下 Enter：

git add . (將所有變更加入暫存區)
git commit -m "描述您的修改" (為這次修改寫下紀錄)
git push (將修改推送到 GitHub 伺服器)

※ 一定要看到最後的 push 執行成功，自動化部署才會開始運作！

優勢：全球最快 CDN 節點、無流量限制、每月高達 500 次免費部署額度。

1

綁定 GitHub 來源

登入 Cloudflare 後，左側點選 Workers 和 Pages ➔ 建立應用程式 ➔ 切換到 Pages 頁籤 ➔ 點擊連線到 Git，並授權您的 GitHub 帳號。
2

選擇專案與設定組建

選取對應的 GitHub 專案。關鍵設定：
框架預設請選無 (None)。
如果在根目錄，請保持預設；如果網頁放在特定資料夾（如「說明書」），請注意中文字元問題（詳見下方避坑指南）。
3

儲存並部署

點擊儲存並部署。設定好之後，未來只要 GitHub 上的代碼有更新，Cloudflare 就會**自動觸發**重新部署，完全不需再手動操作！

優勢：與程式碼儲存庫完美結合，完全免費，部署次數無上限！

注意：頻繁使用會扣光學分額度，建議僅在緊急測試或未綁定 GitHub 自動部署時使用。

遇到問題？請先檢查是不是踩到了以下常見的地雷：

😵

錯誤一：Cloudflare 顯示 404 找不到網頁

將網頁放在名為「說明書」等中文資料夾中，並直接將「組建輸出目錄」設為中文，導致 Cloudflare 系統路徑亂碼，發佈了空網站。

✅ 解決方法：使用指令轉換英文
在 Cloudflare 組建設定中：
1. 組建命令輸入：mv 說明書 public
2. 輸出目錄輸入：public

🤦‍♂️

錯誤二：Netlify 突然斷線或被暫停

只要每次 Push 程式碼，或是手動執行 netlify deploy --prod，Netlify 就會判定為一次發佈。免費版每月約只能發佈 20 次，扣光即斷線。

✅ 解決方法：切換免費平台
請將流量主力切換至 Cloudflare Pages 或 GitHub Pages，它們沒有嚴苛的「發佈次數扣分機制」。

🐢

錯誤三：本地存檔了，線上卻沒更新

在自己電腦的 VS Code 按了存檔，就以為網站會自動變更，卻忘記將修改同步上傳(Push)到 GitHub 伺服器。

✅ 解決方法：永遠記得 Git 三部曲
打開終端機，確實執行 git add .、git commit -m "更新" 以及最後的 git push，這才會真正觸發線上更新！

🔗

錯誤四：CSS/圖片/JS 載入失敗 (破圖)

在 HTML 裡使用了絕對路徑（例如 /images/pic.png），這在 GitHub Pages 的子目錄結構下會找不到檔案。

✅ 解決方法：一律改用「相對路徑」
將路徑最前方的斜線去掉，或是補上小數點，例如改為 ./images/pic.png，加上小數點 . 是保命關鍵。