在CS50x課程沒有談到Git的使用,不過我在過去曾經學過網頁設計(雖然學得不好),所以我知道Git是必學項目之一。有志於往網站開發學習的文組,也最好一起來學習哦!
各位或許還不是軟體工程師,我也不是,不過也許你已經有共同協作的概念。例如我在大學裡工作,辦公室的同仁大量利用Google服務,包含Google雲端硬碟、Google協作平台、Google表單、Google試算表、Google文件、Google日曆等等,能夠線上即時傳遞資訊,共同修改文件,打造在家也能加班的雲端工作環境。
文組的工作都是如此了,理組工程師當然更能把雲端工作的精神,發揮得淋漓盡致。尤其是程式碼動輒數百行甚至數千行,如果沒辦法共同協作,並且知道哪一個版本是誰修改的,就會是一場惡夢。
因此,要成為優良的軟體工程師,務必要學會版本控制。版本控制具備了備份、共用兩種意涵,備份意味著即便不是在自己的電腦,或者電腦發生當機、中毒等不幸事件,也能夠隨時上雲端取得備份資料。共用檔案則是類似公用的Google試算表一樣,每位具有權限的使用者,都能夠上去修改資料,並且能夠知道哪一個版本是由哪一位使用者修改。
談到版本控制,除了Git以及GitHub,沒有之一。Git是分散式的版本控制系統,GitHub是原始碼代管服務平台,目前已被微軟收購,提供付費帳號及免費帳號,使用者可以在本地端使用Git管理程式版本,再透過GitHub社群與同事或其他軟體開發者交流。Git及GitHub受到軟體工程師的青睞,也被大量運用於非程式相關的協同工作上。
Git需要一些時間來熟悉,網路上有許多免費的教學內容,例如Git & GitHub 教學手冊、連猴子都能懂得Git入門指南(介紹圖形化介面TortoiseGit)、為你自己學Git(大部分免費)。本文僅介紹如何安裝,以及最基本的操作方式,希望給初學者一個大概的輪廓,之後再深入學習。本操作說明主要依據此英文網頁編譯,並且綜合其他相關網頁資料。
步驟0:在Windows上安裝Git工具組
你也可以在Linux及macOS上安裝Git工具組,請參考此頁面。我是Windows使用者,因此這裡只介紹如何在Windows上安裝Git工具組。請直接點選此頁面下載安裝程式,是一個.exe的檔案,安裝時無腦地直接按下一步就可以。安裝好之後,可以到GitHub官方網站註冊(當然,你也可以先註冊再安裝)。
你可以透過命令列工具使用Git,例如剛剛裝好的Git BASH,當然也可以使用圖形化介面軟體(GUI),例如TortoiseGit。不過一般都還是建議先學習使用命令列,畢竟不是什麼伺服器都能夠安裝圖形化介面軟體。
![]() |
| 這就是Git Bash命令列 |
步驟1:建立一個本地的Git檔案庫
- 在你指定的磁碟區,建立一個資料夾。例如叫做 project1
- Windows視窗左下角搜尋列輸入 git bash,按下 Enter
- 用 cd 指令進入你要儲存Git檔案庫的磁碟區的資料夾,如果你放在D槽,你就輸入 cd d:/project1,再輸入 git init,本地的Git檔案庫就啟動完成了。
步驟2:針對網頁做版本控制
- 首先在 project1裡面建立一個html資料夾,再寫一個.html檔案來模擬看看。
- 此時如果輸入 git status,會顯示 nothing added to commit but untracked files present (use "git add" to track) ,代表你還沒有把想追蹤的檔案標記起來。
步驟3:將檔案放入暫存區裡(staging environment)
- 輸入 git add接檔案名稱,這裡我接 index.html
- 再輸入 git status,確認是否成功 。
- 如果是要把資料夾內的所有檔案一次新增,就輸入 git add --all
- 沒有把檔案放入暫存區,就不能被提交到檔案庫。
- 如果把檔案加入暫存區後,又修改了檔案,則需要再加入一次。
步驟4:將變更的檔案提交到檔案庫
1. 在要上傳的資料夾內,輸入 git commit,後面可以接常用的參數,
2. 提交時,如果沒加上參數,會跳出-Vim編輯器。使用方法如下:
- 分為Normal、Insert兩種模式。-Vim編輯器打開後即為Normal模式,僅能複製、貼上、存檔、離開;Insert模式可以輸入文字。
- 可輸入 i、 a、 o 任一個英文字母,進入Insert模式,再按下 ESC或 Ctrl+[可離開。
- 輸入訊息後,先按下 ESC回到Normal模式,輸入 :wq存檔離開。
- 輸入的訊息、檔名,最好都是用英文命名。如果用中文,可能會有亂碼,網路上有修正亂碼的教學,但是我試了兩種方法都無法解決,你各位還是認命學好英文吧。
3. 如果變更只有修改檔案,沒有新增與刪除,可以使用 -a,直接提交變更。
4. 把變更合併到上次提交之中,使用 —amend
5. 接上簽名, -s
6. -m,用於檔案已經在暫存區的提交,使用時,後面可再接上註記。例如 git commit -m "First commit"
步驟5:新增分支
有時候正在開發新功能,開發到一半,你不想直接覆蓋掉過去的檔案,就可以開創新的分支,如此一來就不會蓋掉原有檔案。等到你新增的功能確定完成了,可以再把檔案合併在一起。
新增且切換分支,請輸入 git checkout -b <branch name>,接著可以輸入 git branch看看目前的分支情況。

有星號的部分就是目前我所在的分支。
步驟6:在GitHub上建立檔案庫
如果只是要在自己的電腦運行Git版本控制軟體,不需要這個步驟。不過大型軟體開發都是團隊合作居多,在GitHub上建立一個檔案庫是個好主意,就可以共同協作。
- 首先在GitHub上,按下+建立新的檔案庫,然後替自己的檔案庫取名,第一次取名可以取名為 你的帳號.github.io,這樣傳上去時,如果裡面有index.html檔案,就可以變成靜態網頁。
- 接著GitHub會轉到新頁面,問你是要在本地端開一個同樣的檔案庫,還是要把既有的檔案庫同步上去。因為我們之前已經建立了本地端的檔案庫,因此我們選擇 …or push an existing repository from the command line
git remote add origin https://github.com/taiwankaiyuan/project1.git git branch -M main git push -u origin main
依序輸入上頭的指令(注意,不要複製我的連結,是複製你自己的連結),會跳出視窗,要求使用者輸入帳號密碼。輸入後,則會跳出成功同步。

噠拉,這就是個人網頁啦。如果你按照上面的步驟操作,你的個人網頁網址就是:
你的帳號.github.io
Happy coding!!!
