Github入門教學

# Git 的四個核心概念在使用 GitHub 之前，有四個非常重要的概念需要先理解： 1. Repository（專案倉庫） 2. Commit（提交） 3. Branch（分支） 4. Pull Request（合併請求）理解這四個概念之後，大部分 GitHub 的操作就會變得非常清楚。 --- # 1 Repository（專案倉庫） Repository，簡稱 **Repo**，意思是「專案的資料庫」。你可以把 Repository 想像成一個 **專案資料夾 + 歷史紀錄系統**。它裡面會包含： * 所有專案檔案 * 所有修改歷史 * 所有參與者的貢獻例如一個 Repository 可能長這樣： ``` my-project ├ README.md ├ index.html ├ style.css └ script.js ``` 但 Git 的特別之處是： **每一次修改都會被記錄下來。** 所以 Repository 不只是檔案資料夾，也是 **專案的完整歷史**。 --- # 2 Commit（提交） Commit 就是 **一次修改的紀錄**。每當你修改了專案的檔案，你可以做一次 commit。例如： ``` Commit 1 新增首頁 index.html Commit 2 新增網站樣式 style.css Commit 3 修正登入錯誤 ``` 每一個 commit 都會包含： * 修改的檔案 * 修改的內容 * 作者 * 時間 * commit 說明所以 commit 就像是： **專案的時間軸紀錄。** 例如： ``` Commit A → Commit B → Commit C → Commit D ``` 如果某次修改出現問題，你可以回到任何一個舊的 commit。 --- # 3 Branch（分支） Branch 的意思是 **專案的平行版本**。假設你的專案目前是： ``` main ``` 現在你想新增一個新功能，例如登入系統。你可以建立一個新的 branch： ``` main └ feature-login ``` 在 `feature-login` branch 裡，你可以自由修改。例如： ``` main └ feature-login ├ login.html └ login.js ``` 這樣做有一個好處： **不會破壞主版本。** 等功能完成後，再把 branch 合併回 main。例如： ``` main ├ feature-login ├ feature-payment └ bugfix-navbar ``` 這就是 GitHub 可以讓很多人同時開發的原因。 --- # 4 Pull Request（合併請求） Pull Request（簡稱 PR）是一種 **請求把修改合併回專案** 的機制。流程通常是： ``` 建立 branch ↓ 修改程式 ↓ commit ↓ push ↓ 建立 Pull Request ``` 當你提出 Pull Request 時，專案的其他人可以： * 查看修改內容 * 討論 * 建議修改 * 最後決定是否合併例如： ``` feature-login ↓ Pull Request ↓ main ``` 如果審查通過，就會 **merge（合併）** 到主分支。 --- # GitHub 協作流程總覽整個 GitHub 的工作流程通常是： ``` Repository（專案） ``` ↓ ``` Branch（建立功能分支） ``` ↓ ``` Commit（提交修改） ``` ↓ ``` Push（上傳到 GitHub） ``` ↓ ``` Pull Request（提出合併） ``` ↓ ``` Review（審查討論） ``` ↓ ``` Merge（合併到 main） ``` --- # 簡單總結 | 概念 | 意思 | |-----|-----| | Repository | 專案與所有歷史 | | Commit | 一次修改紀錄 | | Branch | 平行開發版本 | | Pull Request | 請求合併修改 | 只要理解這四個概念，就已經掌握了 GitHub 的核心運作方式。 --- # [Github](https://www.github.com) 入門教學 ## 想像一種情況你有70個人，必須要協作一份重要的文件。每個人都有不同的想法，但是都想要文件變好。你要如何讓70個人良好討論呢？當然，你可以把他們分成許多組。70個人就分成七組，每組10個人。然後，每個小組再發下一些便利貼、布告版、或者是圖釘等等，讓大家集思廣益。問題來了，最後要整合所有小組意見的時候，你就會發現，每一個小組可能都有優點和缺點，沒有辦法完全整合起來。如果你的團隊是在使用Google doc為主，你會常常發現單一串流的版本控制是完全不夠用的。如果只有兩三個人的話，也有可能夠用，把所有不同意見保留，整合至新版本。 Github 這個社群媒體，提供一種更強大的協作平台，由 **Git 版本控制系統** 當作它的基底。 --- # [Github](https://www.github.com) 能解決什麼問題？ GitHub 主要解決三個問題： ### 1 版本管理 GitHub 可以記錄所有修改歷史，例如： * 誰修改了文件 * 修改了什麼 * 什麼時候修改如果出現錯誤，也可以回到以前的版本。 --- ### 2 多人協作 GitHub 允許： * 多人同時修改同一個專案 * 每個人可以在自己的分支(branch)開發 * 完成後再整合回主分支這樣可以避免互相覆蓋修改。 --- ### 3 討論與審查 GitHub 也提供討論工具，例如： * **Issues**：討論問題 * **Pull Request**：提出修改並讓大家審查 * **Projects**：管理專案進度因此 GitHub 不只是程式碼平台，也是一個 **協作平台**。 --- # 如何上手 Github？ ### 申請 GitHub 帳號前往： [https://github.com](https://github.com) 註冊帳號。建議帳號名稱使用： ``` 英文名字或英文暱稱 ``` 例如： ``` bestian alicechen tomwang ``` 完成註冊後，你就可以： * 建立 repository * 參與開源專案 * 發 issue * 提交 pull request --- ### 建立你的第一個 Repository 登入 GitHub 後：點擊右上角的 **"+"** 選擇： ``` New repository ``` 填寫： Repository name： ``` my-first-project ``` 建議勾選： ``` Add a README file ``` 然後點擊： ``` Create repository ``` 這樣你就建立了你的第一個 GitHub 專案。 --- # 如何克隆 (Clone) 一個專案以下是使用 **GitHub Desktop** 克隆 GitHub 專案的步驟： ### 安裝 GitHub Desktop 下載： [https://desktop.github.com](https://desktop.github.com) 安裝完成後開啟。 --- ### 登入帳戶第一次使用會要求登入 GitHub。登入後 GitHub Desktop 會與你的帳號同步。 --- ### 前往 GitHub 專案頁面打開瀏覽器，然後前往您想要克隆的 GitHub 專案頁面。例如： ``` https://github.com/user/project ``` --- ### 複製專案 URL 在 GitHub 專案頁面的右上角： ``` Code ``` 複製 URL，例如： ``` https://github.com/user/project.git ``` --- ### 在 GitHub Desktop Clone 回到 GitHub Desktop： ``` File Clone Repository ``` 選擇： ``` URL ``` 貼上 repository URL。 --- ### 選擇儲存位置選擇專案下載到電腦的資料夾。例如： ``` Documents/projects ``` --- ### 點擊 Clone GitHub Desktop 就會開始下載整個專案。完成後你就可以在本機修改檔案。 --- # 如何創建專案內部分支 branch 在 Git 專案中通常會有一個主分支： ``` main ``` 當我們要開發新功能時，建議建立新的 branch。例如： ``` main ├ feature-login ├ feature-ui └ bugfix-navbar ``` 這樣不同功能可以分開開發。 --- ### 從 main 建立主題分支在 GitHub Desktop： ``` Branch New Branch ``` 輸入 branch 名稱，例如： ``` feature-login ``` 建立後就可以在這個 branch 修改專案。 --- ### fetch fetch 的意思是： **取得遠端更新，但不會改變本機檔案。** 在 GitHub Desktop： ``` Fetch origin ``` 這樣可以知道遠端是否有新的更新。 --- ### merge merge 的意思是： **把另一個 branch 的修改整合進來。** 例如： ``` main ↓ feature-login ``` 把 main 的更新合併到 feature-login。在 GitHub Desktop： ``` Branch Merge into current branch ``` --- ### 完成功能後完成修改後： ``` commit push ``` 然後提出 **Pull Request**。 --- # 如何使用 Fork 與 Pull Request 協作如果你沒有專案的修改權限，可以使用： ``` Fork → 修改 → Pull Request ``` --- ### 創建 Fork 前往 GitHub 專案頁面。點擊右上角： ``` Fork ``` GitHub 會建立一份你的版本。例如： ``` original/project ↓ yourname/project ``` --- ### 修改 Fork Clone 你的 fork 到本機。修改程式或文件。完成後： ``` commit push ``` --- ### Pull Request 到原本專案回到 GitHub。點擊： ``` Contribute Open Pull Request ``` 說明： * 修改了什麼 * 為什麼要修改專案維護者可以 review。如果通過，就會 merge 到原本專案。 --- # 如果協作專案要在本機寫程式建議安裝 **Visual Studio Code**。下載： [https://code.visualstudio.com](https://code.visualstudio.com) --- ### 在 GitHub Desktop 設定 VS Code 為預設編輯器 Mac： ``` GitHub Desktop Settings Integrations External Editor ``` 選擇： ``` Visual Studio Code ``` --- # 如何在 Visual Studio Code 使用 Git 與 GitHub ### 安裝 Git 下載： [https://git-scm.com](https://git-scm.com) Mac 也可以使用： ``` brew install git ``` --- ### 確認 Git 安裝成功在 terminal 輸入： ``` git --version ``` 如果顯示版本號，就代表安裝成功。 --- ### 在 VS Code 登入 GitHub 打開 VS Code。左側選單： ``` Source Control ``` 點擊： ``` Sign in to GitHub ``` 登入後就可以： * clone repository * commit * push * pull --- # GitHub 基本工作流程常見工作流程如下： ``` clone 專案 ↓ 建立 branch ↓ 修改檔案 ↓ commit ↓ push ↓ Pull Request ↓ review ↓ merge ``` --- # GitHub 協作心法當團隊使用 GitHub 時，通常遵守幾個原則： ### 小步提交每一個 commit 只做一件事情。例如： ``` fix login bug add tutorial page update README ``` --- ### 不直接修改 main 建議流程： ``` branch ↓ Pull Request ↓ review ↓ merge ``` --- # 結語 GitHub 不只是工程工具。它其實是一個 **全球開源協作平台**。透過 GitHub，我們可以： * 與世界各地的人合作 * 參與開源專案 * 分享知識與工具善用 GitHub、Visual Studio Code 等工具，可以讓團隊的工作效率提高許多。

Syntax	Example	Reference
# Header	Header	基本排版
- Unordered List	Unordered List
1. Ordered List	Ordered List
- [ ] Todo List	Todo List
> Blockquote	Blockquote
Bold font	Bold font
Italics font	Italics font
~~Strikethrough~~	~~Strikethrough~~
19^th^	19^th
H~2~O	H₂O
++Inserted text++	Inserted text
==Marked text==	Marked text
[link text](https:// "title")	Link
![image alt](https:// "title")	Image
`Code`	`Code`	在筆記中貼入程式碼
```javascript var i = 0; ```	`var i = 0;`
:smile:		Emoji list
{%youtube youtube_id %}	Externals
$L^aT_eX$	L^aT_eX
:::info This is a alert area. :::	This is a alert area.