版本控制 on EricChung的程式勇者村

新手第十一步：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 免費部署靜態網站，讓你的作品真正上線！

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

新手第十二步：GitHub Pages 部署　免費讓你的網站上線，讓全世界看到！

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

你辛苦做好的網站，現在只能在自己電腦上看。把網址傳給朋友，他們看到的是一片空白。

這篇要解決這個問題——用 GitHub Pages，完全免費，讓你的網站有一個真正的網址，任何人在任何地方都能打開。

1. GitHub Pages 是什麼？

GitHub Pages 是 GitHub 提供的免費靜態網站托管服務。

你把程式碼推到 GitHub 上，GitHub 自動幫你把網站掛到網路上，給你一個這樣格式的網址：

1

https://你的帳號.github.io/你的專案名稱/

它的限制：

只能放靜態網站（HTML、CSS、JS）
不能跑後端程式（PHP、Node.js 伺服器端）
儲存庫必須是 Public（公開） 才能免費使用

對於前端新手來說，這些限制根本不是問題，靜態網站就夠了。

2. 方法一：部署純 HTML 靜態網頁（最簡單）

這是給剛學完 HTML/CSS/JS，還沒用 Vite 的新手。

Step 1：建立 GitHub 儲存庫

登入 GitHub，點擊右上角 「+」→「New repository」
Repository name 輸入：portfolio（或任何名稱）
選擇 Public
點擊 「Create repository」

Step 2：把你的網站推上去

1
2
3
4
5
6
7
8


cd your-project-folder

git init
git add .
git commit -m "初次部署個人作品集"
git branch -M main
git remote add origin https://github.com/你的帳號/portfolio.git
git push -u origin main

Step 3：開啟 GitHub Pages

進入你的 GitHub 儲存庫頁面
點擊上方的 「Settings」（齒輪圖示）
左側選單找到 「Pages」
在 「Branch」 欄位選擇 main，資料夾選 / (root)
點擊 「Save」

等待約 1~2 分鐘，重新整理頁面，你會看到：

1

Your site is live at https://你的帳號.github.io/portfolio/

點進去，你的網站上線了！

3. 方法二：部署 Vite 專案（進階版）

用 Vite 建立的 Vue / React 專案，不能直接部署原始碼，需要先**打包（build）**成靜態檔案，再部署打包後的結果。

Step 1：設定 Vite 的 `base` 路徑

打開 vite.config.js，加入 base 設定：

1
2
3
4
5
6
7


import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
 plugins: [vue()],
 base: '/你的專案名稱/', // ← 加入這行，名稱要和 GitHub repo 名稱一致
})

為什麼需要這個？因為 GitHub Pages 的網址是 /專案名稱/ 開頭，不設定的話圖片和 JS 會找不到路徑。

Step 2：在本地測試打包結果

1
2


npm run build
npm run preview

打開 http://localhost:4173/你的專案名稱/，確認打包後的頁面正常。

Step 3：使用 GitHub Actions 自動部署

這是最推薦的方式——每次你 git push，GitHub 自動幫你重新打包並部署，完全不需要手動操作。

在專案根目錄建立以下路徑的檔案：

1
2
3


.github/
└── workflows/
 └── deploy.yml

.github/workflows/deploy.yml 的內容：

 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
29
30
31
32
33
34


name: Deploy to GitHub Pages

on:
 push:
 branches:
 - main  # 只有推送到 main 分支時才觸發

jobs:
 deploy:
 runs-on: ubuntu-latest
 permissions:
 contents: write

 steps:
 - name: Checkout
 uses: actions/checkout@v4

 - name: Setup Node.js
 uses: actions/setup-node@v4
 with:
 node-version: 20
 cache: npm

 - name: Install dependencies
 run: npm install

 - name: Build
 run: npm run build

 - name: Deploy to GitHub Pages
 uses: peaceiris/actions-gh-pages@v4
 with:
 github_token: ${{ secrets.GITHUB_TOKEN }}
 publish_dir: ./dist

Step 4：推上 GitHub 觸發自動部署

1
2
3


git add .
git commit -m "設定 GitHub Actions 自動部署"
git push

Step 5：在 GitHub 設定 Pages 來源

進入 GitHub 儲存庫的 Settings → Pages
Branch 改選 gh-pages（GitHub Actions 會自動建立這個分支）
點擊 Save

等待 1~3 分鐘，你的 Vite 專案就上線了！

之後每次 git push 到 main，GitHub Actions 自動重新部署，完全不需要你做任何額外動作。

4. 查看部署狀態

怎麼知道部署有沒有成功？

進入 GitHub 儲存庫頁面
點擊上方的 「Actions」 分頁
你會看到每一次觸發的部署流程，綠色勾勾 ✅ 代表成功，紅色叉叉 ❌ 代表有錯誤

點進去可以看到詳細的 log，方便排查問題。

5. 自訂網域（選用）：讓網址更專業

預設的網址是 你的帳號.github.io/專案名稱，如果你買了自己的網域（例如 ericweb.com），可以設定讓 GitHub Pages 使用你的網域。

Step 1：在 GitHub Pages 設定自訂網域

Settings → Pages → Custom domain
輸入你的網域（例如 www.ericweb.com）
勾選 「Enforce HTTPS」

Step 2：在你的網域服務商設定 DNS

如果用 www 子網域（建議）：

新增一筆 CNAME 紀錄：

1
2
3


類型: CNAME
名稱: www
值: 你的帳號.github.io

如果用根網域（例如直接 ericweb.com）：

新增四筆 A 紀錄：

1
2
3
4
5
6


類型: A
名稱: @
值: 185.199.108.153
 185.199.109.153
 185.199.110.153
 185.199.111.153

DNS 生效需要幾分鐘到數小時，生效後你的網域就會指向 GitHub Pages 的內容。

6. 常見問題排查

網站打開是空白的 / 404

確認 vite.config.js 的 base 路徑和 GitHub repo 名稱完全一致
確認 GitHub Pages 設定的 Branch 是否正確（靜態網站選 main，Vite 專案選 gh-pages）

圖片顯示不出來

檢查圖片路徑是否使用相對路徑
放在 public/ 資料夾的圖片，在程式碼裡用 /圖片名稱.jpg 引用

GitHub Actions 部署失敗

點進 Actions 頁面查看錯誤訊息
最常見原因：npm install 失敗（package.json 有問題）或 npm run build 有語法錯誤

更新了程式碼但網站沒變

GitHub Pages 有快取，等待幾分鐘再重新整理
或按 Ctrl + Shift + R（強制重新整理，清除瀏覽器快取）

7. 完整部署流程速查

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


靜態 HTML 網站
──────────────
git init → git add . → git commit → git push
→ GitHub Settings → Pages → 選 main 分支 → 完成

Vite 專案
──────────
1. vite.config.js 加入 base: '/repo名稱/'
2. 建立 .github/workflows/deploy.yml
3. git add . → git commit → git push
4. GitHub Settings → Pages → 選 gh-pages 分支 → 完成
5. 往後每次 git push 自動重新部署

8. 給新手的實戰練習

把你之前做的作品集網頁部署上 GitHub Pages：

確認你的 index.html 在專案的根目錄
確認有 .gitignore，排除 node_modules/
執行部署流程
把網址傳給朋友，讓他們幫你看看！

結語：你的作品現在活在網路上了

從今天起，你做的每一個前端作品都可以有一個真實的網址：

求職時附在履歷上
貼在社群媒體讓更多人看到
傳給朋友炫耀

GitHub Pages 是你踏入真實世界的第一步。免費、穩定、和 Git 工作流程無縫整合——沒有理由不用。

接下來你可以做什麼？ 你已經學完了前端開發的完整路徑，從 HTML 到 Vite，從 Git 到部署。接下來我們要進入一個讓很多人又愛又怕的主題：JavaScript 非同步（Async / Await）與 API 串接——讓你的網頁能從後端取得真實資料，做出動態內容！

準備好讓網頁和真實資料連接了嗎？下一篇見！