AI 教學網頁部署指南

一、準備工作

1. 📂 檔案結構與命名 (非常重要)

圖像參考：正確的檔案結構

**首頁檔案名稱：** 您的主要網頁檔案**必須**命名為 **index.html**。GitHub Pages 預設只會載入這個檔案作為網站的首頁。
**資產檔案：** 網頁用到的所有檔案（CSS, JavaScript, 圖片, 影片等）都必須一起上傳。
**路徑檢查：** 確保 index.html 中引用的所有檔案路徑都是**相對路徑**（例如：<link href="style.css">，而不是 C:\Users\...\style.css）。

正確的檔案結構範例：

/ (儲存庫根目錄)
├── index.html  # 網站首頁，必須！
├── style.css   # 樣式檔案
└── images/
    └── logo.png  # 圖片資料夾

2. 🔑 建立 GitHub 帳號

如果您還沒有帳號，請先到 GitHub 網站註冊一個。

二、步驟教學：建立與上傳檔案

1. 🆕 建立新的儲存庫（Repository）

圖像參考：新增儲存庫頁面 (請務必勾選 README)

登入 GitHub。點擊右上角的 **`+`** → **`New repository`**（新增儲存庫）。
**Repository name:** 輸入一個易於識別的名稱（例如：`teaching-material-ai`）。
**Public/Private:** 務必選擇 **`Public`**（公開），這是免費部署的必要條件。
**必須勾選** **`Add a README file`**（新增 README 檔案）。
點擊 **`Create repository`**（建立儲存庫）。

2. 📤 上傳您的網頁檔案

圖像參考：上傳檔案按鈕位置

進入您剛建立的儲存庫頁面。
點擊 **`Add file`**（新增檔案） → **`Upload files`**（上傳檔案）。
將您所有的網頁檔案（**`index.html`**、CSS、圖片等）**一起**拖曳上傳。
在頁面下方輸入一個簡短的 **commit message**（提交訊息）。
提交訊息就像筆記，記錄您這次上傳做了什麼，例如：「Initial deployment of AI content」。
點擊 **`Commit changes`**（提交變更）。

三、步驟教學：啟用 GitHub Pages

1. ⚙️ 進入設定頁面

在您的儲存庫頁面上方，點擊 **Settings**（設定）標籤。

2. 🌐 找到 Pages 設定

在左側選單中，找到並點擊 **Pages**。

3. 部署來源設定 (關鍵步驟)

圖像參考：Pages 部署設定 (選擇 main 與 /root)

**Source（來源）:** 確認選擇 **`Deploy from a branch`**（從分支部署）。
**Branch（分支）:** 選擇您的主要分支，通常是 **`main`**。
**資料夾:** 選擇 **`/ (root)`**（根目錄）。
點擊 **`Save`**（儲存）。

4. 🔗 取得您的網站連結並確認狀態

圖像參考：網站已上線 (Your site is live) 頁面

儲存後，GitHub 會自動開始部署（畫面會顯示「**Your site is currently being built**」）。這通常需要 **1 到 5 分鐘**。
部署完成後，頁面會更新為 **「Your site is live at [網址]」**。
您的網站網址格式：https://[您的GitHub帳號].github.io/[儲存庫名稱]/
**小提醒：** 如果您點擊網址後出現 404 錯誤，請耐心等待幾分鐘，或參考下方的「常見問題與排除」。

四、更新與修改您的網頁

如果您修改了本地電腦上的網頁檔案，更新線上的網站只需要重複上傳步驟：

**修改檔案:** 在您的電腦上完成 `index.html` 或其他相關檔案的編輯。
**重新上傳:** 回到您的 GitHub 儲存庫 → **`Add file`** → **`Upload files`**。
**覆蓋舊檔案:** 將**修改後**的檔案拖曳上傳，它會自動覆蓋舊檔案。
**提交變更:** 輸入一個新的 commit message（例如：`Update lesson 2 images`）並點擊 **`Commit changes`**。
GitHub Pages 會自動重新部署，您的網站會在幾分鐘內看到最新內容。

五、常見問題與排除 (FAQ)

Q: 網站發佈後出現 404 錯誤，怎麼辦？

**檢查檔案名稱：** 確認您的首頁檔案是否**確實**命名為 **`index.html`**。
**檢查 Pages 設定：** 再次進入 **Settings → Pages**，確認 **Branch** 選擇的是 `main`（或您上傳檔案的分支），且資料夾是 **`/ (root)`**。
**等待時間：** 剛發佈或更新後，有時需要 5 到 10 分鐘讓全球伺服器同步。

Q: 網頁內容顯示了，但是圖片或 CSS 樣式跑掉了？

**檢查所有檔案是否已上傳：** 確保所有圖片、CSS 和 JavaScript 檔案都已經在 GitHub 儲存庫中。
**檢查路徑是否正確：** 檢查 `index.html` 中的引用路徑是否為**相對路徑**且大小寫正確。在網路上，路徑是區分大小寫的 (例如 `IMAGES/Logo.png` 與 `images/logo.png` 是不同的)。

一、 準備工作