本篇文章目錄

1. 前言：從本地開發到邁向全世界
2. 兩大核心工具拆解：Git 版本控制與 GitHub Pages
3. 實戰部署流程：版控建立與遠端儲存庫推送
4. 觀念重點與部署體驗細節解析
5. 結語

一、 前言：從本地開發到邁向全世界

經過了整整 28 天的努力，我們從無到有刻劃出雙欄介面、打造了 4 個數位醫療工具，並透過 LocalStorage 與 Tab 切換完成了全站系統整合。

但如果寫出來的專案只能在自己的電腦開 index.html 或是 http://localhost 觀看，那它就還只是一個「尚未完工」的作品。

來到鐵人賽倒數第二天的 Day 29，我們要進行開發流程中最令人興奮的一步：【部署上線】。今天我們將透過業界最標準的版本控制工具 Git，搭配 GitHub Pages 提供的免費靜態網站託管服務，把專案推上全球雲端網域，讓任何人只要打開網址，就能立即使用我們這套精心打造的醫療工具！

二、 兩大核心工具拆解：Git 版本控制與 GitHub Pages

在進行正式部署前，我們先來釐清這兩個經常被初學者混淆的核心工具：

1. Git：版本控制的快照系統（Version Control System）

Git 是安裝在我們本地電腦上的「快照工具」。它能精準記錄專案中所有檔案的修改歷程。透過 Git，我們可以隨時將程式碼復原到過去的特定時間點，也能避免修改壞掉時找不到問題根源的風險。

2. GitHub & GitHub Pages：雲端託管與免費網頁伺服器

• GitHub：是一個基於 Git 的「雲端程式碼託管平台」，概念就像是程式碼界的 Google Drive。
• GitHub Pages：GitHub 提供的免費靜態網站託管服務。它能直接讀取 GitHub 儲存庫（Repository）中的 HTML、CSS 與 JavaScript 檔案，並自動分配一個帶有 HTTPS 安全加密的專屬網址（例如：https://username.github.gitee.io/repo-name）。

三、 實戰部署流程：版控建立與遠端儲存庫推送

我們開啟終端機（Terminal）或 VS Code 的 Terminal，在專案根目錄下依序執行以下 Git 版控與 GitHub 部署步驟：

# 1. 初始化 Git 儲存庫
git init

# 2. 將所有檔案加入暫存區 (Staging Area)
git add .

# 3. 提交第一個版本快照並附上紀錄說明
git commit -m "feat: Complete 4-in-1 medical tools web app"

# 4. 將預設分支重新命名為 main
git branch -M main

# 5. 連結遠端 GitHub 儲存庫 (請替換為你的 GitHub 專案網址)
git remote add origin https://github.com/your-username/medical-tools-app.git

# 6. 將本地 main 分支推送到 GitHub 遠端儲存庫
git push -u origin main

推送成功後，開啟 GitHub 儲存庫頁面進行 GitHub Pages 啟用設定：

1. 進入儲存庫頁面的 Settings 頁籤。
2. 在左側選單點選 Pages。
3. 在 Build and deployment 區塊中的 Source 選擇 Deploy from a branch。
4. 將 Branch 設定為 main 分支與 / (root) 目錄，並點擊 Save。

四、 觀念重點與部署體驗細節解析

1. index.html 命名是靜態託管的關鍵防空洞

GitHub Pages 預設會尋找專案根目錄下的 index.html 作為預設首頁（Entry Point）。若你的主頁面命名為 main.html 或 home.html，訪客開啟網址時將會遇到著名的 404 Not Found 錯誤。維持標準的 index.html 命名，是靜態伺服器運作的首要準則。

2. 語意化 Commit Message 建立良好開發習慣

在執行 git commit -m "feat: Complete 4-in-1 medical tools web app" 時，我們採用了業界廣為流傳的 Conventional Commits 規範（如 feat: 代表新功能）。這能讓未來的自己或其他協作者在閱讀 Git Log 時，一秒看懂每次提交的核心目的。

3. 相對路徑（Relative Path）與資產載入防呆

在 GitHub Pages 託管環境中，專案通常會被掛載於子路徑（如 https://username.github.io/project-name/）。

因此在 index.html 中引入 CSS 或 JS 檔案時，務必使用相對路徑（例如 <script src="./app.js"></script> 或 src="app.js"），避免使用絕對路徑 /app.js，否則在部署後將導致資源路徑尋找錯誤與樣式失效。

4. 自動化 HTTPS 加密與全球 CDN 加速

GitHub Pages 部署的一大優勢，在於它自動為你的網域提供免費的 SSL 憑證（HTTPS）以及全球 CDN 分發。這不僅能提升網頁載入速度，更能避免使用者存取時跳出「不安全網站」的警告，提供符合醫療主題要求的信任感與專業質感。

五、 結語

今天我們成功透過 Git 建立版控，並將專案發布至 GitHub Pages，正式完成靜態網站託管！從現在開始，這套四合一醫療保健輔助工具已經真正跨出本地端，轉化為世界各地使用者都能隨時存取的雲端 Web 應用。

在明天的 [Day 30]——也就是完賽的最終章中，我們將進行 【鐵人賽完賽總結】。讓我們一鼓作氣，迎向最後的勝利吧！