# 一步一步教你用 GitHub + SourceTree 做版本控制 #### GitHub + SourceTree 操作流程詳細圖文版 若今天想要新增一個專案 並且利用GitHub做雲端版控 可以照著下面的流程操作 --- ### Local 端版控流程 1. 在開發環境開啟新專案 ex. Android Studio (New Project: GitTest) ![](https://i.imgur.com/2mt2pQS.png ) --- 2. 開啟SourceTree 並登入你的 GitHub ![](https://i.imgur.com/0KxtnDd.png ) --- 3. 將剛剛的新專案加到本地git版控 ![](https://i.imgur.com/UpN6y13.png ) --- 4. 找到剛剛建立的專案位址 ![](https://i.imgur.com/7i7neD9.png) --- 5. 加到本地git版控 ![](https://i.imgur.com/5p2QWI7.png) --- 6. 可以看到轉出現在 Local 頁籤 master 前面的數字表示你還沒Commit 到版控的檔案數量 ![](https://i.imgur.com/1RTLADP.png) --- 7. 點進該專案可以看到下面詳細的內容 這時候可以選擇要將哪些檔案加到版控之中 ![](https://i.imgur.com/wlNxS3K.png ) --- 8. 勾選後會移到上方,然後在下面輸入這次更動的註解 完成後點選右下角的 Commidt ![](https://i.imgur.com/UW7cSj3.png) --- 9. 就可以看到你把這個專案加到"本機端"的版控之中了 ![](https://i.imgur.com/wsyFDdy.png) ---- ### Remote 端版控流程 當你完成了本地端的版控流程之後, 再利用雲端服務來進行Remote的Git版控 這邊用[GitHub](https://zh.wikipedia.org/wiki/GitHub)來做示範, 你的程式碼將會是公開的 任何人都可以看到你發布的內容 因此如果具有機密性的專案就要升級成付費版 或是不要放在GitHub,選擇其他的服務供應商 --- 1. 到GitHub上 右上角(New)新增一個 Repository ![](https://i.imgur.com/MHLp0x1.png) --- 2. 名稱就和剛剛本地端的相同即可 ![](https://i.imgur.com/CiO4HKM.png) --- 3. 完成後會看到這樣的畫面 這邊我們會需要的是Https的URL ![](https://i.imgur.com/ZsODc0t.png) --- 4. 接者把網頁上的URL複製下來 ![](https://i.imgur.com/vlnRYLt.png) --- 5. 回到SourceTree 在該專案 右上角點選Setting > Remote ![](https://i.imgur.com/HbfXpUy.png) --- 6. Remote name 輸入剛才新增專案的名稱 如果和本地的名稱不同,這邊要輸入Remote端的Name 然後貼上URL、選擇服務供應商(GitHub)...等 ![](https://i.imgur.com/HY8kUcl.png) --- 7. 確認: 以上的動作是將你的 Local Repository 關聯到 Remote Repository 但是你的檔案還沒上到遠端! ![](https://i.imgur.com/4xCt5Pg.png) --- 8. 將檔案傳到Remote 的動作稱作 Push 接下來就是要將本地的檔案Push上去 點選你目前的進度 也就是master 的地方 然後點 Push ![](https://i.imgur.com/8QueAEN.png) --- 9. 確認之後你的檔案就會傳到雲端做版控 ![](https://i.imgur.com/9Nr8A9q.png) --- 10. 完成後到左邊REMOTE頁籤查看 可以看到你遠端目前的專案進度 ![](https://i.imgur.com/SZ0NhQz.png) --- 11. 此時再回到GitHub網站上 就可以看到你Push上去的檔案了 ![](https://i.imgur.com/sk8sfgf.png) --- 12. 可以看到程式碼的內容 ![](https://i.imgur.com/Jg9TjYV.png) #### 那麼我們如果修改或是新增程式碼,該怎麼在Remote更新? ---- ## 更新流程 假設今天你在IDE中對程式碼做了更動 ex.多了一些註解、或是新的功能...等 ![](https://i.imgur.com/FYga5uW.png) --- 1. SourceTree 就會偵測到你的程式變更 幫你標上底色 清楚看到差異在哪裡 ![](https://i.imgur.com/jBQrLHs.png) --- 2. 和之前流程相同 把變更完確定要上傳的部分打勾 並且加上這次變更的註解 然後 Commidt ![](https://i.imgur.com/nncQ7cd.png) --- 3. 注意! 現在一樣程式只在Local 端的版控異動而已 所以接下來需要 Push 到 Remote ![](https://i.imgur.com/mG1qrNT.png) --- 4. 方法和前述相同 ![](https://i.imgur.com/pxTl6zm.png) --- 5. 完成之後查看你的 REMOTE 頁籤 就可以發現多了一個新的節點 這個節點就是你這次Push之後新增出來的 ![](https://i.imgur.com/voMkUdH.png) --- 6. 隨著你的程式逐漸增長,持續Push 節點也會跟著變多 培養做版控的習慣,就算以後不小心改爛了 還可以還原到某個時間點的程式碼狀態! --- ## 這樣就完成了基本的雲端版控流程了! [返回 GitHub 版本控制](https://hackmd.io/s/Bk2AaU6o) ---