全面掌握 VS Code 本機開發、Git 版本控制，以及 Cloudflare/GitHub Pages 的自動化部署流程！
🏠 返回專案總大廳優勢：確保您在電腦上的修改，能順利上傳並觸發 Cloudflare 或 GitHub 的自動更新。
在 VS Code 中開啟專案，編輯 HTML/CSS/JS 檔案。編輯完成後，請務必按下 Ctrl + S 進行存檔。檔案名稱旁邊的圓點消失代表存檔成功。
在 VS Code 上方選單點擊 終端機 ➔ 新增終端機，或使用快捷鍵 Ctrl + ` 呼叫出下方的命令列視窗。
在終端機中依序輸入以下三個指令並按下 Enter：
git add . (將所有變更加入暫存區)
git commit -m "描述您的修改" (為這次修改寫下紀錄)
git push (將修改推送到 GitHub 伺服器)
※ 一定要看到最後的 push 執行成功，自動化部署才會開始運作！
優勢：達成記憶/規範（my-ai-brain）與工具/腳本（cross-device-agent-skills）的權責分離，跨電腦一鍵全自動連動備份！
專屬 GitHub 倉庫：https://github.com/shihwei0809/my-ai-brain.git
負責儲存 AI 全域行為規範 AGENTS.md、專案總履歷 PROJECT_RECORDS.md 與 Obsidian 第二大腦思考脈絡。
專屬 GitHub 倉庫：https://github.com/mathruffian-dot/cross-device-agent-skills.git
負責儲存 setup_new_computer.ps1 一鍵初始化腳本、backup_skills.ps1 一鍵備份腳本與全域 Prompt Skills 工具包。
在新電腦執行 setup_new_computer.ps1，腳本將自動 Clone / Pull 雙倉庫，並將全域 AI 規範 (AGENTS.md) 與 MCP 工具全自動注入本機 AI 引擎！
執行 backup_skills.ps1 備份時，系統亦會自動檢測雙庫變更並自動完成 git push 上傳。
在建立新系統前，請依據系統需求選擇正確的平台，避免資料功能失效或扣費問題。
| 平台 | 系統類型與用途 | 專案範例 |
|---|---|---|
| ☁️ Cloudflare Pages | 純靜態網頁（主力推薦）。無流量限制，速度最快。 | 說明書大廳 (正式版)、多數前端工具 |
| 🟠 Netlify | 純靜態網頁（備用/草稿）。注意發佈次數扣分機制。 | 說明書大廳 (Draft 預覽) |
| 🔴 Firebase Hosting | 需要線上編輯、多人同步、即時資料 (Firestore) 的系統。 | 製程流程圖、互動投票、溫度通報 |
| ⚫ GitHub Pages | 純靜態網頁（完美備份）。免費次數無上限。 | 簡易 HTML 簡報、靜態小工具 |
優勢：全球最快 CDN 節點、無流量限制、每月高達 500 次免費部署額度。
登入 Cloudflare 後，左側點選 Workers 和 Pages ➔ 建立應用程式 ➔ 切換到 Pages 頁籤 ➔ 點擊 連線到 Git，並授權您的 GitHub 帳號。
選取對應的 GitHub 專案。關鍵設定：
框架預設請選 無 (None)。
如果在根目錄，請保持預設；如果網頁放在特定資料夾（如「說明書」），請注意中文字元問題（詳見下方避坑指南）。
點擊 儲存並部署。設定好之後，未來只要 GitHub 上的代碼有更新，Cloudflare 就會**自動觸發**重新部署，完全不需再手動操作！
優勢：與程式碼儲存庫完美結合，完全免費，部署次數無上限！
進入您的 GitHub 專案頁面，點擊上方導覽列的 ⚙️ Settings (設定)。
在左側選單找到 Pages。
Source 選擇 Deploy from a branch。
Branch 選擇 main，資料夾選擇 /(root) 或 /docs，然後點擊 Save。
GitHub 會自動啟動背景流程。點擊專案上方的 ▶️ Actions 頁籤，看到綠色打勾圖示 ✅ 就代表部署完成！
注意：頻繁使用會扣光學分額度，建議僅在緊急測試或未綁定 GitHub 自動部署時使用。
在 VS Code 終端機中，確認目前路徑是否在您的專案資料夾內（例如：C:\GOOGLE ANGET\說明書）。
輸入指令：npx netlify deploy
系統會上傳檔案並給予一組「Draft URL」草稿網址供您預覽測試。這不會扣除正式環境的學分額度。
測試無誤後，輸入指令：npx netlify deploy --prod
這會將改動正式發佈到主網址，請注意每一次執行都會消耗 Netlify 免費額度中的部署學分。
優勢：整合 Firestore 即時資料庫，完美支援多人同步與雲端資料存取。
首先確保已安裝 Node.js。開啟終端機執行：
npm install -g firebase-tools
安裝後執行 firebase login，透過瀏覽器登入 Google 帳號授權。
在專案目錄下執行 firebase init hosting。
選擇對應的 Firebase 專案，設定發佈目錄（通常為 public 或當前目錄），並選擇是否配置為 SPA (單頁應用程式)。
完成網頁修改後，執行 firebase deploy。
這會將最新的代碼推送至 Firebase Hosting，並保持與 Firestore 資料庫的連線無縫接軌。
遇到問題？請先檢查是不是踩到了以下常見的地雷：
mv 說明書 publicpublic
netlify deploy --prod，Netlify 就會判定為一次發佈。免費版每月約只能發佈 20 次，扣光即斷線。git add .、git commit -m "更新" 以及最後的 git push，這才會真正觸發線上更新！
/images/pic.png），這在 GitHub Pages 的子目錄結構下會找不到檔案。./images/pic.png，加上小數點 . 是保命關鍵。