GitHub on EricChung的程式勇者村

部落格終於有留言板了！聊聊我為什麼選 Giscus

Sat, 18 Apr 2026 00:00:00 +0000

如果你以前來過這裡，你可能注意到一件事：

每篇文章的最下面，什麼都沒有。

沒有留言區、沒有回覆按鈕、沒有「你怎麼看？」的欄位。

只有文章結尾，然後就是頁尾。

這不是故意的，只是一直沒時間把留言板搞定。

今天，這件事終於完成了。

為什麼留言板拖了這麼久？

其實留言板本身不難，難的是「選哪一個」。

市面上常見的選項大概是這些：

Disqus — 最老牌，但免費版有廣告，資料不在自己手上
Waline / Artalk — 功能強，但需要自己架後端伺服器
Utterances — 輕量，存在 GitHub Issues，但設計比較陽春
Giscus — 存在 GitHub Discussions，開源、免費、支援 dark mode

我本來想用 Artalk，因為介面很漂亮。

但 Artalk 需要一台後端伺服器。自己架要花時間維護，用雲端托管平台又多了一層依賴。

對一個靜態部落格來說，這有點殺雞用牛刀。

最後我選了 Giscus。

Giscus 是什麼？

簡單說：

Giscus 把你的 GitHub repo 的 Discussions，當作留言板的資料庫。

每一篇文章，對應一個 GitHub Discussion。
有人留言，就等於在那個 Discussion 底下回覆。
你的回覆，也會直接出現在文章頁面上。

這個設計有幾個我很喜歡的地方：

1. 完全不需要後端伺服器

留言存在 GitHub，不用自己租 VPS，不用架 Docker，不用管資料庫備份。

對靜態網站來說，這是最舒服的架法。

2. 資料永遠在自己手上

留言存在你的 GitHub repo，你隨時可以看、可以匯出、可以刪除。
不像 Disqus，資料放在別人的伺服器上，哪天服務關掉就沒了。

3. 完全免費

GitHub Discussions 完全免費。
Giscus 本身也是開源的，沒有廣告、沒有付費方案差異。

4. 自動支援 dark mode

這個部落格有深色模式，Giscus 設定成 preferred_color_scheme 之後，
深色模式下留言板也會跟著變暗，不會突然出現一個刺眼的白色區塊。

怎麼裝的？

這個部落格用 Hugo 搭配 Stack 主題。

Stack 主題原生就支援 Giscus，只需要三個步驟：

Step 1 — 在 GitHub repo 開啟 Discussions 功能
Step 2 — 安裝 Giscus App，授權給你的 repo
Step 3 — 在 params.toml 填入 repo ID 和 category ID

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


[comments]
enabled = true
provider = "giscus"

[comments.giscus]
repo = "你的帳號/你的repo"
repoID = "R_xxxxxx"
category = "Announcements"
categoryID = "DIC_xxxxxx"
mapping = "pathname"
lightTheme = "light"
darkTheme = "dark_dimmed"
reactionsEnabled = 1

設定完 git push，留言板就出現了。

沒有伺服器，沒有資料庫，沒有額外費用。

給你的邀請

這個部落格寫了快二十篇文章，

一直是我單方面在輸出，不知道你有沒有看、有什麼問題、或是文章哪裡沒講清楚。

現在留言板裝好了。

如果哪篇文章你有問題、有補充、或是覺得我哪裡寫錯了，
都歡迎在下面留言。

你是第一個能在這裡留言的人。

新手第十一步：Git 入門　工程師的時光機，讓你的程式碼永遠有後悔藥！

Fri, 17 Apr 2026 00:00:00 +0000

你有沒有遇過這種情況：改了一堆程式碼，結果改壞了，想回到之前的版本，卻發現根本回不去？

或者，和同學一起做專案，兩個人同時改同一個檔案，最後合併的時候整個亂掉？

Git 就是解決這兩個問題的神器，也是全球每一位工程師每天都在用的工具。

1. Git 是什麼？

Git 是一個版本控制系統（Version Control System），它會追蹤你的程式碼每一次的變動，讓你可以：

隨時回到任何一個過去的版本（像時光機）
多人同時開發同一個專案（不會互相覆蓋）
實驗新功能而不影響主線程式碼（用「分支」隔離）
知道誰改了什麼、什麼時候改的（完整歷史紀錄）

Git 和 GitHub 的差別：

Git — 在你電腦上運行的版本控制工具（本地端）
GitHub — 一個存放 Git 儲存庫的雲端平台（遠端）

就像 Word 和 Google Drive 的關係：Word 是編輯工具，Google Drive 是儲存分享的地方。

2. 安裝 Git

Windows

前往 https://git-scm.com 下載安裝，安裝過程全部使用預設選項即可。

Mac

打開終端機輸入：

1

git --version

如果尚未安裝，Mac 會自動提示你安裝 Xcode Command Line Tools。

確認安裝成功

1
2


git --version
# 出現版本號代表成功，例如：git version 2.43.0

3. 第一次使用 Git：設定身份

在開始用 Git 之前，要先告訴它你是誰（這些資訊會附在每一次的提交紀錄上）：

1
2


git config --global user.name "你的名字"
git config --global user.email "你的Email"

只需要設定一次，之後所有專案都會使用這個身份。

確認設定是否成功：

1

git config --global --list

4. Git 的核心概念：三個區域

要理解 Git，最重要的是搞清楚這三個區域：

1
2
3
4
5


工作目錄 暫存區 本地儲存庫
(Working Directory) (Staging Area) (Local Repository)

 你寫程式碼的地方 → 準備要提交的區域 → 正式儲存版本的地方
 git add git commit

工作目錄：你平時寫程式的地方，Git 會追蹤這裡的變動
暫存區（Index）：你決定「這些改動要放進下一個版本」就先放這裡
本地儲存庫：正式存下來的版本紀錄，永遠不會消失

5. 最常用的 Git 指令

初始化儲存庫

1
2


# 在目前資料夾建立 Git 儲存庫
git init

這個指令會在你的資料夾裡建立一個隱藏的 .git 資料夾，Git 的所有版本資訊都存在裡面。

查看狀態

1

git status

這是你最常用的指令，它會告訴你：

哪些檔案被修改了（modified）
哪些檔案是新加的還沒被追蹤（untracked）
哪些改動已經在暫存區了（staged）

加入暫存區

1
2
3
4
5
6
7
8


# 加入指定檔案
git add index.html

# 加入多個檔案
git add index.html style.css

# 加入目前資料夾所有變動的檔案
git add .

提交（Commit）：正式儲存版本

1

git commit -m "新增導覽列元件"

-m 後面的字串是提交訊息（Commit Message），用來描述這次改了什麼。

好的 Commit Message 應該要：

用動詞開頭，描述「做了什麼」
讓任何人一看就知道這次改動的目的

1
2
3
4
5
6
7
8
9


# 好的範例
git commit -m "新增登入頁面"
git commit -m "修正首頁版面在手機上跑版的問題"
git commit -m "更新 README 安裝說明"

# 不好的範例
git commit -m "update" # 太模糊
git commit -m "fix bug" # 什麼 bug？
git commit -m "asdfghjk" # ???

查看提交歷史

1
2
3
4
5
6
7
8


# 完整歷史
git log

# 精簡版（每筆 commit 只顯示一行）
git log --oneline

# 圖形化顯示分支
git log --oneline --graph --all

每一筆 commit 都有一個獨一無二的 Hash ID（例如 a3f5b2c），你可以用這個 ID 回到任何一個版本。

查看改動內容

1
2
3
4
5


# 查看工作目錄和暫存區的差異（尚未 git add 的改動）
git diff

# 查看暫存區和上一次 commit 的差異
git diff --staged

回到過去的版本

1
2
3
4
5
6
7
8


# 查看歷史，找到想回去的 commit hash
git log --oneline

# 回到指定的 commit（只是「看看」，不影響現在的分支）
git checkout a3f5b2c

# 回到最新版本
git checkout main

如果真的要「撤銷」最近的提交：

1
2
3
4
5


# 撤銷最近一次 commit，但保留改動（改動回到工作目錄）
git reset HEAD~1

# 撤銷最近一次 commit，連改動也一起丟掉（危險！謹慎使用）
git reset --hard HEAD~1

6. 分支（Branch）：安全實驗新功能

分支是 Git 最強大的功能之一。想像一下：你的網站已經上線了，突然想加一個新功能，但又怕改壞原本的程式碼。

分支讓你在「平行宇宙」裡開發，不影響主線。

1
2
3
4
5


main (主線，已上線的穩定版本)
│
├── feature/login (你在這條分支上開發登入功能)
│
└── feature/dark-mode (另一個人在這條分支上開發深色模式)

常用分支指令

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


# 查看所有分支（* 號代表目前在哪條分支）
git branch

# 建立新分支
git branch feature/login

# 切換到指定分支
git checkout feature/login

# 建立並立刻切換（上面兩個指令的合體）
git checkout -b feature/login

# 刪除分支（合併完才能刪）
git branch -d feature/login

合併分支（Merge）

當你的新功能開發完畢，要把它合回主線：

1
2
3
4
5


# 先切回主線
git checkout main

# 把 feature/login 分支的改動合進來
git merge feature/login

7. 解決合併衝突（Merge Conflict）

兩個人同時改了同一個地方，Git 無法自動決定要用哪個版本，就會出現「合併衝突」。

衝突的檔案裡，Git 會自動插入標記：

1
2
3
4
5


<<<<<<< HEAD
這是你這條分支的版本
=======
這是要合併進來的另一條分支的版本
>>>>>>> feature/login

解決方法：

打開有衝突的檔案
找到 <<<<<<<、=======、>>>>>>> 這些標記
手動決定要保留哪個版本（或兩個都要的話，手動合併內容）
刪除標記符號
再次 git add 和 git commit

8. 連接到 GitHub：把程式碼放上雲端

第一步：在 GitHub 建立新儲存庫

登入 https://github.com
點擊右上角的 「+」，選 「New repository」
輸入儲存庫名稱，點 「Create repository」

第二步：把本地儲存庫連接到 GitHub

GitHub 建立完後，會顯示一組指令，複製貼上執行：

1
2
3
4
5


# 設定遠端來源（只需要做一次）
git remote add origin https://github.com/你的帳號/你的專案.git

# 把本地的 main 分支推上去
git push -u origin main

以後只要用 git push 就能同步上去。

第三步：常用的遠端同步指令

1
2
3
4
5
6
7
8


# 把本地的 commit 推送到 GitHub
git push

# 把 GitHub 上的最新版本拉回來（別人改了你要同步）
git pull

# 複製別人的 GitHub 專案到本地
git clone https://github.com/帳號/專案名.git

9. `.gitignore`：告訴 Git 哪些檔案不要追蹤

有些檔案不應該上傳到 GitHub，例如：

node_modules/（npm 套件資料夾，幾百 MB，每個人自己裝就好）
.env（環境變數，裡面可能有 API 金鑰等機密資訊）
系統產生的暫存檔（.DS_Store、Thumbs.db）

在專案根目錄建立 .gitignore 檔案：

1
2
3
4
5
6
7


# .gitignore
node_modules/
dist/
.env
.env.local
.DS_Store
Thumbs.db

Git 會自動忽略這些檔案，不追蹤、不上傳。

10. 完整工作流程：每天的 Git 使用習慣

以下是一個健康的 Git 工作流程：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28


# 1. 開始工作前，先把遠端最新版本拉下來
git pull

# 2. 建立新功能分支
git checkout -b feature/新功能名稱

# 3. 開始寫程式碼...

# 4. 隨時查看改動狀態
git status

# 5. 把確定要的改動加入暫存區
git add .

# 6. 提交，寫清楚做了什麼
git commit -m "完成登入表單的驗證功能"

# 7. 繼續開發 → 繼續 git add / git commit...

# 8. 功能完成後，切回主線並合併
git checkout main
git merge feature/新功能名稱

# 9. 推上 GitHub
git push

# 10. 刪除已完成的分支（保持乾淨）
git branch -d feature/新功能名稱

11. 常見情境與解法

「不小心把不需要的檔案 add 進去了！」

1
2
3
4
5


# 把指定檔案從暫存區移出（改動還在，只是取消 add）
git restore --staged index.html

# 把全部檔案從暫存區移出
git restore --staged .

「想撤銷工作目錄的改動，回到上一次 commit 的樣子」

1
2


# 丟棄指定檔案的改動（危險！改動會消失）
git restore index.html

「commit 訊息打錯了，還沒 push 出去」

1
2


# 修改最近一次的 commit 訊息
git commit --amend -m "正確的 commit 訊息"

「想暫時把目前的改動藏起來，去做別的事」

1
2
3
4
5
6
7


# 把目前未提交的改動暫存起來
git stash

# 去做其他事...

# 把剛才藏起來的改動取回來
git stash pop

12. 給新手的實戰練習：把你的作品集放上 GitHub

初始化你的作品集專案
1 2

cd my-portfolio git init
建立 .gitignore
1 2 3

node_modules/ dist/ .DS_Store

第一次提交

1
2


git add .
git commit -m "初始化作品集專案"

在 GitHub 建立新 repo，連接並推上去

1
2


git remote add origin https://github.com/你的帳號/portfolio.git
git push -u origin main

以後每次修改，重複這個流程

1
2
3


git add .
git commit -m "更新作品集：新增 Vite 練習專案"
git push

現在打開你的 GitHub 頁面，你的作品就在上面，有完整的歷史紀錄，全世界的工程師都能看到！

結語：版本控制，是工程師的基本素養

Git 的指令雖然多，但日常用到的其實不超過 10 個：

指令	用途
`git init`	初始化儲存庫
`git status`	查看目前狀態
`git add .`	加入暫存區
`git commit -m ""`	提交版本
`git log --oneline`	查看歷史
`git branch`	管理分支
`git checkout`	切換分支
`git merge`	合併分支
`git push`	推上 GitHub
`git pull`	從 GitHub 拉下來

這 10 個指令，已經能應付你 90% 的日常需求了。

接下來你可以做什麼？ 現在你有了作品、有了 GitHub，但如果能讓別人直接在瀏覽器上看到你的網站，那就更棒了！下一篇我們要學如何用 GitHub Pages 免費部署靜態網站，讓你的作品真正上線！

準備好讓全世界看到你的作品了嗎？下一篇見！