Git 版本控制筆記:從入門到 GitHub Pages 部署網站

更新於 發佈於 閱讀時間約 15 分鐘

✨ 為什麼需要 Git?

你有沒有遇過這樣的情況:

  • 想保留不同版本的文件,結果變成 version1.docxversion2_final.docxversion3_final_final.docx 🤯
  • 團隊裡的 A 和 B 同時修改 同一份檔案,不小心覆蓋了彼此的內容,可能 A 發布的時候沒有更新到 B更新到的內容。
  • 發布網站或專案時,想要有一個 可回溯、可管理 的版本

這些問題都可以透過 Git 版本控制 來解決!它可以:

✅ 讓我們清楚記錄每次的修改歷史(git commit )

✅ 讓多人同時編輯專案,並整合不同的修改

✅ 在 GitHub 這類遠端平台上存放程式碼,讓團隊能 協作開發



Github 平台

Github 平台

🌱 Git 的基礎概念

學習 Git 之前,先來了解幾個重要的概念:

1️⃣ Working Directory(工作目錄):你電腦上的專案資料夾。可參考我之前的文章解釋 directory 的概念 電腦科學新手村 | CMD 應用 GUI CLI | 位元組| Linux

2️⃣ Staging Area(暫存區):Git 追蹤的變更,還沒正式提交

3️⃣ Local Repository(本地儲存庫):存放你的歷史版本,只在你的電腦上

4️⃣ Remote Repository(遠端儲存庫):如 GitHub,存放專案的中央版本,讓多人協作

🚀 學習 Git 的第一步:安裝 Git 👉 下載 Git,安裝後開啟 Git Bash(或 Terminal)。第二步,註冊 Github 帳號。

一些小撇步:在Git Bash 中 Ctrl+ C 是停止的意思,如果要使用複製貼上要用滑鼠右鍵哦。


🔥 Git 整體流程圖

(1) Working Directory(工作目錄)
↓ git add
(2) Staging Area(暫存區)
↓ git commit
(3) Local Repository(本地儲存庫)
↓ git push
(4) Remote Repository(遠端儲存庫,例如 GitHub)

1️⃣ Working Directory(工作目錄)

工作目錄就是你電腦上的專案資料夾,裡面包含了你的程式碼和專案文件。這裡的檔案是未受 Git 控制的,除非你手動讓 Git 追蹤它們。

🛠 範例

  1. 建立一個新的 Git 專案:
    mkdir my_project
    cd my_project
    git init
raw-image
  1. 這時候,你的 工作目錄 只有一個 .git 隱藏資料夾,Git 開始監控這個專案。
  2. 建立一個檔案:
    touch main.py​
    echo "print('Hello, world')" > main.py
    現在 main.py 存在於 工作目錄,但 Git 還沒有追蹤它
  3. 查看 Git 狀態:
    git status
    會看到:
    On branch master

    No commits yet

    Untracked files:
    (use "git add <file>..." to include in what will be committed)
    main.py
    這代表 main.py 還沒進入 Git 控制
但已經有檔案在裡面了!

但已經有檔案在裡面了!



2️⃣ Staging Area(暫存區)

暫存區 是 Git 用來存放「即將提交的變更」的地方。當你執行 git add,檔案會從 工作目錄 進入 暫存區,但還沒有真正存入版本庫

🛠 範例

  1. 執行 git add
    git add main.py
  2. 再次查看狀態:
    git status
    會顯示:
    Changes to be committed:
    (use "git restore --staged <file>..." to unstage)
    new file: main.py
    現在 main.py 已經在暫存區,但還沒有正式存入 Git 版本庫。
  3. 如果此時你修改 main.py,可以看到:
    git status
    會顯示:
    Changes to be committed:
    new file: main.py

    Changes not staged for commit:
    modified: main.py
    這代表 Git 追蹤了之前的版本,但新的變更還沒被 Git 記錄

3️⃣ Local Repository(本地儲存庫)

當你執行 git commit,檔案就會從 暫存區 進入 本地儲存庫,這是一個獨立的 Git 版本控制空間,所有的 commit 都儲存在 .git 資料夾內。

🛠 範例

  1. 提交變更:
    git commit -m "Initial commit: add main.py"
  2. 再次查看 git status
    On branch master
    nothing to commit, working tree clean
    這表示:
    • main.py 已經正式儲存到本地儲存庫
    • 工作目錄是乾淨的,沒有未提交的變更。
  3. 查看歷史記錄
    git log --oneline
    會顯示:
    4c52892 (HEAD -> master) add main.py //前面是隨機序號,你的會跟我的不一樣
    現在 main.py 的版本已經安全儲存在 本地儲存庫

我會另外再紀錄一篇,如果想要回到上個版本,該如何處理。


4️⃣ Remote Repository(遠端儲存庫)

本地儲存庫的版本只存在於你的電腦上。如果你想與其他開發者協作,需要將程式碼推送到遠端儲存庫(如 GitHub)

🛠 範例

  1. 連結遠端儲存庫
    git remote add origin https://github.com/你的GitHub帳號/my_project.git
    這樣你的專案就連結到 GitHub 上的 遠端儲存庫

留意, git remote add origin 只是讓你的本地 Git 知道遠端 Repository 的網址,但它不會自動幫你在 GitHub 上建立一個新的 Repo。

換句話說,git remote add origin 只是「告訴 Git 這個專案的遠端儲存庫在哪裡」,但如果 GitHub 上沒有 my_project 這個儲存庫,你的 git push 會失敗,因為遠端找不到這個 Repo。所以要手動去 GitHub 建一個。

  • 登入 GitHub,點擊 + > New Repository
  • 輸入 Repository 名稱:my_project
  • 選擇 PublicPrivate
  1. 推送程式碼到 GitHub
    git push -u origin master
    這會把你的 commit 推送到 GitHub,讓其他人可以存取你的程式碼。
  2. 查看遠端儲存庫
    git remote -v
    會顯示:
    origin  https://github.com/你的GitHub帳號/my_project.git (fetch)
    origin https://github.com/你的GitHub帳號/my_project.git (push)
  3. 從遠端拉取新版本 如果有其他開發者修改了專案,你可以執行:
    git pull origin master
    這樣你就能獲得最新的程式碼。

🛠 你的第一個 Git 專案 Git page

現在,我們來動手操作,創建一個 Git 網頁專案!🎯

1️⃣ 初始化 Git

首先,在你的專案資料夾內,執行:

git init

這會建立 .git 目錄,讓 Git 追蹤你的檔案變更。

2️⃣ 查看目前狀態

git status

這會告訴你目前哪些檔案有變更,哪些還沒被 Git 追蹤。

3️⃣ 新增檔案到 Git

建立一個 index.html

<!DOCTYPE html>
<html>
<head>
<title>我的 Git 練習頁面</title>
</head>
<body>
<h1>Hello, Git!</h1>
</body>
</html>

然後執行:

git add index.html

這會把 index.html 加入 暫存區

4️⃣ 提交(Commit)變更

git commit -m "Initial commit: add index.html"

這會正式將變更存入 本地儲存庫

5️⃣ 連結 GitHub(遠端儲存庫)

git remote add origin https://github.com/你的GitHub帳號/你的Repo名稱.git
git push -u origin master

這會把你的專案推送到 GitHub,讓你的程式碼在遠端可存取。

raw-image


因為我中間有修改檔案,忘記git add 到暫存區,Commit 沒成功,所以再複習一次

git add index.html  # 先把檔案加入暫存區
git commit -m "add learn in index.html"  # 再提交變更
git push origin master  # 推送到遠端

🚀 Git 的進階操作

📌 6️⃣ 版本歷史:git log

想看看專案的歷史紀錄?執行:

git log

如果想要更簡潔的顯示方式:

git log --oneline

📌 7️⃣ 回到過去:git reset & git revert

如果不小心提交錯誤:

git reset --hard HEAD~1  # 回到上一次 commit,丟棄修改
git revert HEAD # 反轉最近一次的 commit,但保留歷史紀錄

📌 8️⃣ 分支管理:git branch & git switch

git branch new-feature  # 建立新分支
git switch new-feature # 切換到新分支

📌 9️⃣ 合併與解決衝突(通常用在團隊協作)

當兩個分支有不同的修改時,合併可能會產生衝突:

git merge new-feature  # 合併 new-feature 分支

如果 Git 提示有 merge conflict,手動修改有衝突的檔案,然後:

git add .
git commit -m "Resolve merge conflict"

🌍 推送與拉取遠端版本

🔄 git push & git pull

當你完成修改後,可以推送到遠端:

git push origin master

如果團隊有新版本,需要更新到你的本地環境:

git pull origin master

📥 git clone

如果你要從 GitHub 下載一個專案:

git clone https://github.com/某人/某專案.git

🔥 GitHub Pages:發佈你的網站

GitHub 提供了一個免費的靜態網站部署服務,讓你可以用 GitHub Pages 發佈你的 HTML 頁面!

📌 1️⃣ 確保你的 Repo 裡有 index.html

git add index.html
git commit -m "Add index.html"
git push origin master

📌 2️⃣ 在 GitHub 啟用 Pages

  • 進入 GitHub,打開 Settings
  • 找到 Pages
  • 設定 Branchmaster(或 main
  • 等待 1~5 分鐘重新整理,然後打開:
    https://你的GitHub帳號.github.io/你的Repo名稱/

🎉 終於成功啦,第一個 GitHub Pages 網站(雖然有點陽春,完全沒有 CSS)! 🚀

raw-image


raw-image

📌 .gitignore:忽略不必要的檔案

有些檔案(例如 .lognode_modules)不需要放進 Git,可以用 .gitignore 忽略它們:通常這些檔案是記錄錯誤的日誌

echo "node_modules/" >> .gitignore
echo "*.log" >> .gitignore
git add .gitignore
git commit -m "Add gitignore"
git push origin master

💡 結語

Git 是一個強大的工具,學會它能讓你的開發流程更順暢、團隊協作更有條理。這篇文章提供了 基礎指令 + 實際練習範例,讓你可以一步步上手。

如果你剛開始學習 Git,不用擔心記不起來這麼多指令,先動手試試看! 🚀

之後你可以慢慢學會 git rebasegit cherry-pick 等更進階的功能。

💡 下一步建議

  1. 在自己的專案裡 建立新的分支 (git branch)
  2. 嘗試 修改檔案並提交 (git add, git commit)
  3. 合併 (git merge) 並解決衝突
  4. 發 PR,讓自己體驗 GitHub 團隊協作的流程

你有什麼 Git 相關的問題或心得嗎?歡迎留言交流!🔥😃














raw-image

記得要先去專案目錄,不然他會找不到 git 。






留言
avatar-img
留言分享你的想法!
avatar-img
越南放大鏡 X 下班資工系
13會員
60內容數
雙重身份:越南放大鏡 X 下班資工系 政大東南亞語言學系是我接觸越南語的起點,畢業後找越南外派工作的生活跟資訊時,發現幾乎都是清單式的分享,很難身歷其境。所以我希望「越南放大鏡」可以帶讀者看到更多細節和深入的觀察。 - 下班資工系則是自學資工系的課程內容,記錄實際操作的過程,學習理論的過程。希望可以跟讀者一起成長。
2025/04/24
本系列文章將循序漸進地介紹 JavaScript 的核心概念,從基礎語法到進階應用,例如非同步程式設計和 React 基礎。內容淺顯易懂,並使用生活化的比喻幫助讀者理解,搭配程式碼範例,適合 JavaScript 初學者學習。
Thumbnail
2025/04/24
本系列文章將循序漸進地介紹 JavaScript 的核心概念,從基礎語法到進階應用,例如非同步程式設計和 React 基礎。內容淺顯易懂,並使用生活化的比喻幫助讀者理解,搭配程式碼範例,適合 JavaScript 初學者學習。
Thumbnail
2025/04/21
本文介紹行動通訊網路的演進歷史,從1G到5G,並說明ITU與3GPP在制定通訊規格上的重要角色,以及5G的三大關鍵應用場景:URLLC、eMBB和mMTC。
Thumbnail
2025/04/21
本文介紹行動通訊網路的演進歷史,從1G到5G,並說明ITU與3GPP在制定通訊規格上的重要角色,以及5G的三大關鍵應用場景:URLLC、eMBB和mMTC。
Thumbnail
2025/04/11
這篇文章說明網路的七層模型、IP 位址、通訊埠、TCP/UDP 協定、HTTP 協定、HTTP 狀態碼以及 WebSocket,並解釋它們之間的關係與互動方式。文中包含許多圖表和範例,幫助讀者理解這些網路概念。
Thumbnail
2025/04/11
這篇文章說明網路的七層模型、IP 位址、通訊埠、TCP/UDP 協定、HTTP 協定、HTTP 狀態碼以及 WebSocket,並解釋它們之間的關係與互動方式。文中包含許多圖表和範例,幫助讀者理解這些網路概念。
Thumbnail
看更多
你可能也想看
Thumbnail
大家好,我是一名眼科醫師,也是一位孩子的媽 身為眼科醫師的我,我知道視力發展對孩子來說有多關鍵。 每到開學季時,診間便充斥著許多憂心忡忡的家屬。近年來看診中,兒童提早近視、眼睛疲勞的案例明顯增加,除了3C使用過度,最常被忽略的,就是照明品質。 然而作為一位媽媽,孩子能在安全、舒適的環境
Thumbnail
大家好,我是一名眼科醫師,也是一位孩子的媽 身為眼科醫師的我,我知道視力發展對孩子來說有多關鍵。 每到開學季時,診間便充斥著許多憂心忡忡的家屬。近年來看診中,兒童提早近視、眼睛疲勞的案例明顯增加,除了3C使用過度,最常被忽略的,就是照明品質。 然而作為一位媽媽,孩子能在安全、舒適的環境
Thumbnail
我的「媽」呀! 母親節即將到來,vocus 邀請你寫下屬於你的「媽」故事——不管是紀錄爆笑的日常,或是一直想對她表達的感謝,又或者,是你這輩子最想聽她說出的一句話。 也歡迎你曬出合照,分享照片背後的點點滴滴 ♥️ 透過創作,將這份情感表達出來吧!🥹
Thumbnail
我的「媽」呀! 母親節即將到來,vocus 邀請你寫下屬於你的「媽」故事——不管是紀錄爆笑的日常,或是一直想對她表達的感謝,又或者,是你這輩子最想聽她說出的一句話。 也歡迎你曬出合照,分享照片背後的點點滴滴 ♥️ 透過創作,將這份情感表達出來吧!🥹
Thumbnail
這篇文章提供 Git 版本控制系統的完整教學,從基礎概念到進階操作,包含圖文並茂的步驟說明和範例,讓讀者可以快速上手並應用於團隊協作及 GitHub Pages 部署網站。
Thumbnail
這篇文章提供 Git 版本控制系統的完整教學,從基礎概念到進階操作,包含圖文並茂的步驟說明和範例,讓讀者可以快速上手並應用於團隊協作及 GitHub Pages 部署網站。
Thumbnail
本篇文章介紹如何在 Jetson Nano 環境 Ubuntu 2.0 使用 git 及 github.com 進行版本控管。文章快速說明如何安裝、建立版本控管目錄及使用常用的指令。透過簡單的步驟,讀者將能夠有效地管理其程式碼版本,提升開發效率。
Thumbnail
本篇文章介紹如何在 Jetson Nano 環境 Ubuntu 2.0 使用 git 及 github.com 進行版本控管。文章快速說明如何安裝、建立版本控管目錄及使用常用的指令。透過簡單的步驟,讀者將能夠有效地管理其程式碼版本,提升開發效率。
Thumbnail
這篇文章將介紹工程師使用版控和git的相關知識和技能,包括版本控制的意義和git的基本指令,以及開發流程和webhook的概念。
Thumbnail
這篇文章將介紹工程師使用版控和git的相關知識和技能,包括版本控制的意義和git的基本指令,以及開發流程和webhook的概念。
Thumbnail
本篇文章介紹如何使用Git Bash進行版本控制操作,包括創建repository、查看狀態、歷程以及加入暫存和提交暫存等操作。透過基本的Git指令,您可以更深入地瞭解Git工具的使用方法。
Thumbnail
本篇文章介紹如何使用Git Bash進行版本控制操作,包括創建repository、查看狀態、歷程以及加入暫存和提交暫存等操作。透過基本的Git指令,您可以更深入地瞭解Git工具的使用方法。
Thumbnail
本文將介紹Gitlab與GitHub的差異,以及在本地環境部署Gitlab的流程與實作。文章內容包括版本管理系統的選擇,Gitlab的基本功能,以及使用Docker進行部署的詳細步驟。
Thumbnail
本文將介紹Gitlab與GitHub的差異,以及在本地環境部署Gitlab的流程與實作。文章內容包括版本管理系統的選擇,Gitlab的基本功能,以及使用Docker進行部署的詳細步驟。
Thumbnail
有關 git add, git commit, git push
Thumbnail
有關 git add, git commit, git push
Thumbnail
前言   這篇文章將會介紹伺服器的概覽和倉庫,並介紹兩款客戶端協助使用者。 伺服器 | GitHub   線上軟體原始碼代管服務平台,使用 Git 作為版本控制軟體 GitHub 同時提供付費帳戶和免費帳戶,這兩種帳戶都可以建立公開或私有的代碼倉庫,但付費使用者擁有更多功能。   除了允許個人和組
Thumbnail
前言   這篇文章將會介紹伺服器的概覽和倉庫,並介紹兩款客戶端協助使用者。 伺服器 | GitHub   線上軟體原始碼代管服務平台,使用 Git 作為版本控制軟體 GitHub 同時提供付費帳戶和免費帳戶,這兩種帳戶都可以建立公開或私有的代碼倉庫,但付費使用者擁有更多功能。   除了允許個人和組
Thumbnail
前言   這篇文章將會介紹版本控制,並介紹相關的伺服器和客戶端,藉由比較易懂的方式介紹,可能會跟實際上有些微的落差,但會比較好理解。 版本控制   版本控制基本上是由一個名為 Git 的軟體所建立,隨著時間推進,延伸出了很多伺服器和可視話的客戶端,接下來我會一個一個介紹。 底層 | Git 客戶端
Thumbnail
前言   這篇文章將會介紹版本控制,並介紹相關的伺服器和客戶端,藉由比較易懂的方式介紹,可能會跟實際上有些微的落差,但會比較好理解。 版本控制   版本控制基本上是由一個名為 Git 的軟體所建立,隨著時間推進,延伸出了很多伺服器和可視話的客戶端,接下來我會一個一個介紹。 底層 | Git 客戶端
Thumbnail
Git 是一種版本控制軟體,它的運作模式跟 Google 文件、Dropbox 文件相似,能夠允許多位使用者同時編輯、檢視或回溯文件,並且詳實地記錄了修改的歷史紀錄。我們可以將 Git 比喻為一種更為嚴謹的協作文件。
Thumbnail
Git 是一種版本控制軟體,它的運作模式跟 Google 文件、Dropbox 文件相似,能夠允許多位使用者同時編輯、檢視或回溯文件,並且詳實地記錄了修改的歷史紀錄。我們可以將 Git 比喻為一種更為嚴謹的協作文件。
Thumbnail
搞清楚 Git 與 GitHub 的差別並學會必會操作 什麼是 Git? Git 是一個軟體,可藉由它產生一個數據庫(repository),並且做到分散式版本控制。由於可在多處放置同一份程式碼、歷史紀錄追蹤與回朔,讓協同開發變得容易。(關於不同版本控制系統的介紹,請參閱 Git 官方教學文件)
Thumbnail
搞清楚 Git 與 GitHub 的差別並學會必會操作 什麼是 Git? Git 是一個軟體,可藉由它產生一個數據庫(repository),並且做到分散式版本控制。由於可在多處放置同一份程式碼、歷史紀錄追蹤與回朔,讓協同開發變得容易。(關於不同版本控制系統的介紹,請參閱 Git 官方教學文件)
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News