這一課完成後:norelyn-first-project 會出現在你的 GitHub 帳號中;本機 repository 會連上一個名為 origin 的 remote,而且你會真的做過一次 push 和一次 pull。

先把 Git 和 GitHub 的關係重新畫一次

GitHub 不會取代你上一課建立的 Git repository。現在要做的是讓「本機版本庫」多知道一個「遠端版本庫」的位置。

你的電腦:Git repository ↔ GitHub:remote repository

兩邊都能保存 commits,但它們不會因為名字一樣就自動同步。你要明確告訴 Git 什麼時候把版本送上去,或什麼時候把遠端版本拿回來。

先確認本機狀態

在 VS Code 打開 norelyn-first-project,開啟 Terminal:

git status
git log --oneline

先確認自己真的位於上一課那個 repository,而且至少已經有幾個 commits。如果 git status 顯示還有你不理解的未提交修改,先處理清楚再往下。

推上公開網站之前,先補一個 .gitignore

真正的專案常會產生「存在電腦裡,但不應該被 Git 記錄」的東西,例如套件資料夾、Python 虛擬環境、暫存檔與本機機密設定。

在專案根目錄建立:

.gitignore

先放入:

# Secrets
.env
.env.*

# JavaScript dependencies
node_modules/

# Python virtual environments
.venv/
venv/

# OS / editor noise
.DS_Store
Thumbs.db

接著:

git add .gitignore
git commit -m "Add gitignore"

.gitignore 不是秘密刪除器。如果某個 API key 已經被 commit 過,再把檔案寫進 .gitignore 並不會讓舊歷史裡的秘密消失。真的洩漏時要撤銷 / rotate 金鑰,而不是只刪檔案。

建立一個空的 GitHub repository

登入 GitHub,打開 Create a new repository。

Repository name 可以使用:

norelyn-first-project

Public 或 Private 都可以。這門課只需要你自己能存取;如果你不想公開練習內容,就選 Private。

這次不要勾選建立 README、.gitignore 或 License。因為本機早就有完整 repository。我們要建立的是一個乾淨的遠端空間,再把本機歷史推上去。

GitHub 會給你一個 repository URL

建立後,GitHub 會顯示 repository 的 HTTPS URL,格式通常像:

https://github.com/YOUR-USERNAME/norelyn-first-project.git

把 YOUR-USERNAME 換成你自己的 GitHub username。不要直接照抄範例。

remote 是什麼?origin 又是什麼?

remote 是 Git 對「另一個 repository 的位置」所保存的設定。origin 則只是最常見的 remote 名稱。

origin → https://github.com/.../norelyn-first-project.git

它不是 GitHub 的特殊關鍵字,也不是你的帳號名稱。你可以把 remote 叫成別的名字,只是大多數專案習慣把主要來源叫 origin。

把 GitHub 加成 origin

回到本機專案 Terminal:

git remote add origin https://github.com/YOUR-USERNAME/norelyn-first-project.git

再檢查:

git remote -v

如果看到 origin 對應你剛才的 GitHub URL,就代表本機 repository 已經知道遠端在哪裡。

先統一主要 branch 名稱為 main

不同 Git 版本或舊設定可能讓第一個 branch 叫 master 或其他名稱。這門課統一使用 main:

git branch -M main

-M 會把目前 branch 重新命名為 main。現在可以輸入:

git branch

確認 main 前面有 *。

第一次 push

git push -u origin main

把它拆開看:

push → 把 commits 送到 remote
origin → 要送去哪個 remote
main → 要送哪個 branch
-u → 建立 upstream tracking 關係

第一次連 GitHub 時,系統可能打開瀏覽器要求登入,或由 Git Credential Manager 等工具處理認證。GitHub 不會讓你把一般帳號密碼直接當成 Git HTTPS 密碼使用;如果你的環境沒有自動認證流程,請依 GitHub 畫面的官方方式完成登入。

什麼是 upstream?

第一次使用 -u 之後,本機的 main 會開始追蹤遠端的 origin/main。

local main ↔ origin/main

所以之後在同一個 branch 通常可以簡化成:

git push

Git 已經知道「這個 branch 預設要推去哪裡」。

去 GitHub 網頁確認結果

重新整理你剛才建立的 repository 頁面。現在應該能看到 README.md、.gitignore 與其他已追蹤檔案,也能看到 commit history。

這不是 GitHub 把你的整個硬碟上傳了。GitHub 收到的是你 repository 裡 Git 已經記錄、而且被 push 的版本內容。

做一次正常的本機 → GitHub 流程

打開 README.md,再加一行:

This project is now connected to GitHub.

接著:

git status
git add README.md
git commit -m "Document GitHub connection"
git push

重新整理 GitHub。新 commit 應該出現。

修改 → add → commit → push → GitHub

Push 不是 Save,也不是 Commit

到這裡已經有三個很容易混在一起的動作:

Save → 把編輯器內容寫回硬碟
Commit → 把版本寫進本機 Git 歷史
Push → 把 commits 傳到 remote

所以你可以「已經存檔但還沒 commit」,也可以「已經 commit 但還沒 push」。這兩種情況都完全正常。

現在反過來做一次:GitHub → 本機

為了真的理解 pull,這次故意從 GitHub 網頁改一個檔案。

在 GitHub repository 頁面打開 README.md,使用網頁編輯功能,在最後加入:

Edited once from GitHub.

直接在 GitHub 建立一個 commit。完成後,你的遠端 origin/main 就比本機 main 多了一個版本。

回到 VS Code Terminal:

git pull

如果本機沒有同時產生衝突的修改,Git 會把遠端的新 commit 取回並更新本機。打開 README.md,剛才從 GitHub 網頁加入的內容應該已經出現。

GitHub / origin/main → git pull → local main

那 fetch 又是什麼?

你之後會看到 git fetch。可以先用一個簡化模型:

fetch → 先取得遠端最新資訊,不直接把 working tree 改成它
pull → 取得遠端更新,並把它整合到目前 branch

Start Here 不需要深入 merge、rebase 或衝突解法。現在知道 pull 不是「從網站下載 ZIP」就夠了。

Clone 是另一個方向

目前這個專案是「先在本機建立,再加 remote」。未來如果 repository 本來就已經存在 GitHub,通常不會先 git init,而是:

git clone https://github.com/USERNAME/REPOSITORY.git

clone 會建立本機資料夾、下載版本歷史,並通常自動把來源設定成 origin。

本機先有專案 → remote add + push
GitHub 先有專案 → clone

不要現在碰 force push

你可能會在網路答案裡看到:

git push --force

Start Here 階段先把它當成「除非你知道自己正在重寫哪段遠端歷史,否則不要用」。普通的 push 被拒絕時,先看錯誤訊息、確認遠端是否有你本機沒有的 commits,而不是直接強推蓋掉。

小挑戰:自己跑完整同步循環

需求 1:建立 docs/github-notes.md。

需求 2:寫下你自己的三句話:Git、GitHub、origin 各是什麼。

需求 3:用 git status 檢查。

需求 4:stage 並建立一個有意義的 commit。

需求 5:只輸入 git push,把它送到 GitHub。

需求 6:到 GitHub 確認檔案與 commit 都真的存在。

你現在真正建立的是一條同步關係

到這裡,你的心理模型可以收斂成:

Working tree → add → staging → commit → local history → push → GitHub
GitHub → pull → local history / working tree

GitHub 只是 remote 的一種實作,但對接下來的專案、協作、部署與作品集來說,它會是我們主要使用的遠端平台。

完成條件:你能在 GitHub 打開自己的 repository,看得到本機 commits;本機 git remote -v 有 origin;而且你親手完成過至少一次 push 和一次 pull。