Part 11 - GitHub Pages 部署
首頁 ← 上一章 下一章 → 1 / 24

Part 11：GitHub Pages 部署

把你的作品放到網路上，讓全世界都能看到！

GitHub Repository 部署 GitHub Pages Fork 開源

小成品 19-20 | Day 2 下午 | 曾慶良（阿亮老師）

本章目錄

13:30 - 14:00

小成品 19：建立 GitHub 帳號並部署卡片網頁

  • 認識 GitHub 與 GitHub Pages
  • 註冊帳號、建立 Repository
  • 上傳檔案、啟用 Pages
  • 你的第一個網站上線！
14:00 - 14:30

小成品 20：Fork LINE 貼圖工具並部署

  • 認識 Fork 與開源文化
  • Fork LINE 貼圖製作專案
  • 啟用 Pages 部署
  • 兩種部署方式對比

小成品 19

建立 GitHub 帳號並部署卡片網頁

13:30 - 14:00（30 分鐘）

把你親手做的瀑布式卡片網頁發布到全世界！

什麼是 GitHub 和 GitHub Pages？

GitHub = 程式碼的 Google 雲端硬碟

把你的程式碼、網頁檔案存放在雲端，隨時隨地都能存取。

Repository（倉庫）= 資料夾，每個專案就是一個 Repository。

GitHub Pages = 倉庫門口的展示牆

把你 Repository 裡的 HTML 檔案，自動變成一個可以在瀏覽器打開的網站！

完全免費！不需要租伺服器、不需要買網域，GitHub 全部幫你搞定。
GitHub 首頁

GitHub 首頁 — 全球最大的程式碼託管平台

步驟一：註冊 GitHub 帳號

1前往 github.com，點擊 Sign up

2輸入 Email（建議用常用信箱）

3設定 密碼（至少 8 個字元）

4設定 使用者名稱（Username）

使用者名稱很重要！
  • 請用簡短的英文，不要中文
  • 這個名稱會出現在你的網址裡
  • 建議用自己的英文名字或暱稱
你的網站網址格式：
https://你的帳號.github.io/你的專案/
GitHub 註冊頁面

GitHub 註冊頁面

步驟二：建立新的 Repository

1登入後，點擊右上角的 「+」 按鈕

2選擇 New repository

Repository = 你的專案資料夾
就像在 Google 雲端硬碟裡新建一個資料夾來放你的檔案。
建立 Repository

點擊「+」→ New repository

步驟三：Repository 設定

1Repository name：ai-card-presentation

2Description：瀑布式卡片教學網頁

3Visibility：選擇 Public

必須選 Public！
Private（私人）Repository 不支援免費的 GitHub Pages。只有 Public（公開）才能免費部署網站。

4Initialize this repository with a README：打勾

5點擊 Create repository

Repository 設定表單

Repository 設定表單 — 注意選 Public

步驟四：重新命名檔案為 index.html

為什麼要叫 index.html？

當瀏覽器打開一個網址時，伺服器會自動尋找名為 index.html 的檔案作為首頁。

比喻：index.html = 門牌號碼

就像你家的門牌號碼，郵差（瀏覽器）只認得這個名字。如果叫別的名字，郵差就找不到你家了！

my-card-page.html → 重新命名 → index.html

注意！檔名必須是全小寫的 index.html！
Index.html、INDEX.HTML、index.HTML 都不行！

操作方式

在你的電腦上：

  1. 找到之前做好的卡片網頁檔案
  2. 右鍵 → 重新命名
  3. 改名為 index.html
如果看不到副檔名？
Windows：檔案總管 → 檢視 → 勾選「副檔名」
Mac：Finder → 偏好設定 → 進階 → 顯示所有副檔名

步驟五：上傳檔案到 GitHub

1在 Repository 頁面，點擊 Add file

2選擇 Upload files

3把 index.html 拖曳到上傳區域

4在 Commit message 輸入：Initial upload

5點擊 Commit changes

什麼是 Commit？
Commit = 存檔點，就像遊戲裡的存檔。每次 Commit 就是記錄一個版本，以後隨時可以回到這個版本。
上傳檔案

拖曳檔案上傳到 GitHub

步驟六：啟用 GitHub Pages

1點擊 Repository 上方的 Settings（齒輪圖示）

2左側選單找到 Pages

3Source 選擇 Deploy from a branch

4Branch 選擇 main

5Folder 選擇 / (root)

6點擊 Save

等待 1-2 分鐘，GitHub 需要一點時間來部署你的網站。
Settings 位置

找到 Settings 標籤

Pages 設定

Pages 設定 — 選擇 main 分支

網站上線了！

“Your site is live at https://xxx.github.io/ai-card-presentation/”

這是整個課程最重要的里程碑！
你親手做的網頁，現在全世界任何人只要輸入這個網址就能看到了！
試著把網址複製下來，用手機打開看看吧！
網站上線成功

GitHub Pages 部署成功畫面

常見問題排解

問題 原因 解決方法
404 錯誤 檔名不是 index.html 確認檔名是全小寫的 index.html，不是 Index.html 或其他名稱
圖片不顯示 路徑或大小寫不一致 確認圖片檔名的大小寫與 HTML 中的路徑完全一致（GitHub 區分大小寫）
無法訪問網站 設定不正確 確認 Repository 是 Public 且 Pages 已設定為 main / root
樣式跑掉 CSS 路徑錯誤 確認 CSS 寫在 <style> 標籤中（內嵌式最不容易出錯）
網站沒有更新 快取或部署延遲 等待 1-2 分鐘，或按 Ctrl + Shift + R 強制重新整理
小技巧：在 Repository 的 Actions 標籤可以查看部署進度。綠色打勾 = 部署成功，紅色叉叉 = 部署失敗。

小成品 19 完成！

你已經成功將瀑布式卡片網頁部署到 GitHub Pages！

已完成

註冊 GitHub 帳號

已完成

建立 Repository

已完成

上傳 index.html

已完成

啟用 GitHub Pages

你的網站網址：https://你的帳號.github.io/ai-card-presentation/

小成品 20

Fork LINE 貼圖工具並部署

14:00 - 14:30（30 分鐘）

用 Fork 的方式，一鍵複製別人的開源專案並部署！

什麼是 Fork？

比喻：圖書館的影印功能

你在圖書館看到一本好書，影印一份帶回家。原書還在圖書館，你的影印本可以自由畫重點、做筆記。

Fork 的特點

  • 得到完整副本 — 所有檔案、所有版本紀錄
  • 原本不受影響 — 你的修改不會動到原作者的專案
  • 可以自由修改 — 想改什麼就改什麼
開源文化 = 好東西要分享！
很多開發者願意把自己的程式碼公開，讓大家免費使用和學習。Fork 就是開源文化中最常見的操作。
Fork 按鈕位置

Fork 按鈕位於 Repository 右上角

步驟一：Fork LINE 貼圖專案

1打開瀏覽器，前往：

github.com/scorpioliu0953/line_sticker_create

2點擊右上角的 Fork 按鈕

3在 Fork 設定頁面，直接點擊 Create fork

這是一個 LINE 貼圖製作工具
由 scorpioliu0953 開發的開源專案，可以幫你製作 LINE 貼圖。我們要把它 Fork 到自己的帳號，然後用 GitHub Pages 部署上線。
Create Fork 頁面

Create Fork 設定頁面

步驟二：確認 Fork 成功

如何確認 Fork 成功？

1網址變成：github.com/你的帳號/line_sticker_create

2Repository 名稱下方顯示：

forked from scorpioliu0953/line_sticker_create

3所有檔案都已經複製到你的帳號下了！

恭喜！你已經擁有了這個專案的完整副本。接下來只需要啟用 GitHub Pages 就能讓它上線。
Fork 成功

Fork 成功 — 注意網址和 “forked from” 提示

步驟三：啟用 Fork 專案的 GitHub Pages

1在 Fork 的 Repository 中，點擊 Settings

2左側選單點擊 Pages

3Branch 選擇：

  • 如果有 gh-pages 分支 → 選 gh-pages
  • 如果沒有 → 選 main

4點擊 Save

什麼是 Branch（分支）？
Branch = 書的不同版本。main 是主要版本，gh-pages 是專門用來部署網站的版本。有些專案會把網站檔案放在 gh-pages 分支。
Fork 專案 Pages 設定

Fork 專案的 Pages 設定

Fork 專案部署成功！

你的網址：https://你的帳號.github.io/line_sticker_create/

太棒了！只要 Fork + 啟用 Pages，就能把別人寫好的工具部署成自己的網站！
以後看到任何好用的開源專案，都可以用這招快速部署。
Fork 專案部署成功

LINE 貼圖工具成功上線

兩種部署方式對比

比較項目 小成品 19：手動上傳 小成品 20：Fork 部署
方式 自己建立 Repository + 上傳檔案 Fork 別人的專案
檔案來源 自己寫的 1-2 個檔案 完整的開源專案（可能有數十個檔案）
適合場景 個人作品、簡單網頁 使用現成的開源工具、學習別人的程式碼
操作難度 需要手動上傳 一鍵 Fork，超簡單
後續維護 自己更新檔案 可以同步原作者的更新
結論：兩種方式都很實用！自己的作品用「手動上傳」，看到好用的開源專案就「Fork」過來。

練習時間

練習 A：把網址傳給朋友

  1. 複製你的 GitHub Pages 網址
  2. 傳到 LINE 群組或朋友聊天
  3. 請朋友打開看看
  4. 問問他們覺得如何
3 分鐘

練習 B：用手機瀏覽自己的網站

  1. 拿出手機打開瀏覽器
  2. 輸入你的 GitHub Pages 網址
  3. 確認手機上也能正常顯示
  4. 截圖留念！
3 分鐘

練習 C：編輯 Fork 專案的 README

  1. 回到 Fork 的 Repository
  2. 點擊 README.md 檔案
  3. 點擊鉛筆圖示（Edit）
  4. 加上一行：「此專案由 OOO Fork 並部署」
5 分鐘
完成這些練習後，你已經是 GitHub 的入門使用者了！

小成品 20 完成！

你已經成功 Fork 並部署了 LINE 貼圖製作工具！

已完成

認識 Fork 與開源文化

已完成

Fork LINE 貼圖專案

已完成

啟用 GitHub Pages

已完成

部署上線成功

恭喜！你今天完成了兩個網站作品！

作品一：瀑布式卡片教學網頁

你自己做的

  • 從零開始學 HTML
  • 手動上傳到 GitHub
  • 啟用 GitHub Pages
  • 全世界都能看到！

你的帳號.github.io/ai-card-presentation/

作品二：LINE 貼圖製作工具

Fork 來的

  • 學會 Fork 開源專案
  • 一鍵複製到自己帳號
  • 啟用 GitHub Pages
  • 擁有自己的工具網站！

你的帳號.github.io/line_sticker_create/

把這兩個網址加到你的履歷上吧！這就是你的線上作品集，面試或自我介紹時都能派上用場。

本章回顧

GitHub

程式碼的雲端硬碟，用 Repository 管理你的專案檔案

GitHub Pages

免費的網站空間，把 Repository 裡的 HTML 自動變成網站

index.html

首頁的門牌號碼，伺服器自動尋找這個檔案作為網站入口

Fork

複製開源專案到自己帳號，就像圖書館的影印功能

下一章預告

Part 12 - AI 客服系統部署

學習使用 Netlify + Supabase 部署更進階的互動式 AI 應用

前往 Part 12 →