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