回顧 Day 10 和 Day 11 的開發技術與工具介紹時，我發現自己漏了 Git 這個版本控制工具，以及 GitHub 這個基於 Git 的程式檔案託管平台。今天就來補上這一塊。
今天的文章，主要整理我學習 Git 與 GitHub 的筆記。最後，我會使用 Git 在本地端建立我的專案儲存庫（Repository，本文簡稱 Repo），並且發佈到 GitHub 上。
Git 是一個版本控制系統，能幫助你記錄專案檔案的修改歷史。對像我是計師的理解來說，可以類比為在 Figma 中保留不同的設計版本和所有設計異動，方便進行回溯。
如何安裝 Git
從 Git 的官網進行安裝: https://git-scm.com/install/mac
如何使用 Git
可以透過 Terminal 或是 GUI 工具（https://git-scm.com/tools/guis）進行操作，也可以透過 Coding Agent 請 AI 執行。執行前，建議確認指令與修改內容；是否每次需要核准，取決於工具與權限設定。
操作 Git 前，先認識常用的終端機指令
| 名詞 | 指令 | 解釋 |
|---|---|---|
| List | ls | 列出目前資料夾的檔案與子資料夾 |
| Change Directory | cd | 切換到指定資料夾 |
| Move | mv | 移動或重新命名檔案與資料夾 |
| touch | touch | 檔案不存在時建立空白檔案；已存在時更新時間戳記 |
| Make Directory | mkdir | 建立新的資料夾 |
| Remove | rm | 刪除檔案 |
| Open | open | 使用預設應用程式開啟指定檔案或資料夾 |
GitHub 則提供線上的 Repository（儲存庫，簡稱 Repo），用來存放專案檔案與 Git 歷史，並加入協作功能，例如：
常見名詞
| 名詞 | 解釋 |
|---|---|
| Repository／Repo | 專案的檔案與版本歷史所在之處 |
| Commit | 記錄一次修改，建立存檔點 |
| Branch | 從某個版本分出一條開發路線，方便獨立修改 |
| Merge | 把不同分支的修改整合起來 |
| Clone | 把遠端儲存庫複製到電腦上，包含版本歷史 |
| Push | 把本機提交傳到遠端儲存庫 |
| Pull | 取得遠端更新，並整合到目前的本機分支 |
| Pull Request／PR | 在 GitHub 上提出合併修改的請求，供檢查與討論 |
如何使用 GitHub
從 GitHub 的官網進行註冊即可使用: https://github.com/
使用者設定，設定使用者 Email 以及名字
$ git config --global user.name "Astro"
$ git config --global user.email "Astro@examplemail.com"
檢查是否設定正確
$ git config --list
user.name=Astro
user.email=Astro@examplemail.com
建立 Repo 並進行 Git 初始化
$ mkdir breathe_project #建立一個目錄，名字為 breathe_project
$ cd breathe_project # 切換至 breathe_project 目錄
$ git init # 初始化這個目錄，讓 Git 對這個目錄開始進行版控
在 GitHub 新增 Repo
建立完後，將以下指令複製並貼到終端機執行，把本地的 Repo 放到 GitHub 上
完成後，就會在 GitHub 儲存庫頁面看到剛推送的檔案
接著，我們來測試在本地 Repo 新增一個 Hello World 的 HTML 檔案，先在本機建立 Commit，再透過 Push 推送到 GitHub。
建立 HTML 檔案 (終端機操作)
cat > index.html <<'EOF'
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello World</title>
</head>
<body>
<h1>Hello World！</h1>
<p>這是我的第一個 Git 與 GitHub 練習。</p>
</body>
</html>
EOF
用瀏覽器開啟，確認畫面：
open index.html
將檔案加入暫存區
git add index.html
建立 Commit
git commit -m "Add Hello World HTML page"
發佈到 GitHub
git push -u origin main
回到 GitHub 上，我們就可以看到 HTML 檔案和程式碼已經被傳上來。
今天完成 GitHub 設定後，開發前置的工具大致上介紹到這邊，明天會開始用 AI 把 PRD 內容拆分為讓 Coding Agent 可執行的開發任務，並正式進入開發階段。明天見，Cheers 🍻
iThome鐵人賽
看影片追技術