如何使用 SourceTree 做版本控制（上）

在開始介紹 SourceTree 的基本操作之前，先來說說一些 Git 的小觀念。
筆者花了好多時間理解（真心佩服全天底下的工程師們！）

什麼是 Git？

Git 是一套版本控制系統，使用 Git 來進行專案的版本控制或多人的團隊合作，是開發過程中不可或缺的強力工具。

身為設計師的筆者，其實看了很多資料跟指令還是一頭霧水，要做什麼的版本控制？設計師需要版本控制嗎？我們不就是一直瘋狂 Ctrl+C、Ctrl+V 再搭配 N 個超大容量的硬碟，就足以掌控我們的檔案了嗎？（現實生活絕對掌控不了）

直到筆者看到了這篇文章，喔喔！真心推薦剛接觸 Git 的朋友先去看看：

什麼是 Git？為什麼要學習它？

簡單的說，Git 就像玩遊戲的時候可以儲存進度一樣。
為了避免打頭目輸了而損失裝備，又或是打倒頭目卻沒有掉落期望的珍貴裝備，你也許在每次要去打頭目之前記錄一下，在發生狀況的時候可以載入舊進度，再來挑戰一次。

看到這段簡直是醍醐灌頂！！

對！沒錯！設計師應該都會有個永遠也無法完稿的檔案吧。（被客戶被老闆瘋狂修改到第 N 個版本）
它的命名就會產生了以下變化：

name-完稿.psd
name-最終完稿.psd
name-最終最終完稿.psd
name-最終 BOSS 大魔王完稿.psd
name-你才完稿你全家都完稿.psd

扯遠了！簡單來說，Git 可以控制、保存你手上所有專案修改過的版本，做一個紀錄和保留，若不小心刪除了某一份檔案，也可以馬上救回來。多人共同開發一個專案時，也可以清楚看到誰做了什麼事，修改了哪個部分。不慎出錯了就可以一群人磨刀霍霍請他喝杯咖啡（？

但是 Git 對於剛準備要入門前端的設計師來說，還是有些複雜艱深，需要記住的指令太多，於是本篇主要介紹以 Git 為基礎誕生的 SourceTree 圖形化工具。

SourceTree

SourceTree 是一款以 Git 為基礎設計的 GUI 圖形化工具（GUI，全名：Graphical User Interface，中文：圖形使用者介面），關於 GUI 的詳細解釋可以看看這篇文章。

簡單來說，它就是 Git 的 UI 介面，將複雜且無形的指令，轉為有型的視覺化圖形。它是個很棒的輔助工具，讓使用者可以透過視覺化的介面，更好的使用 Git 做版本控制。
接下來將會以詳細的圖文教學，如何使用 GitHub + SourceTree 做一個專案的版本控制，有興趣的朋友請接著看下去。

安裝

首先請到 SourceTree 的官網載點，下載並安裝。
接著我們會利用 GitHub 創立一個新的專案，才能使用這個專案做版本控制：

新增專案

請先開啟 GitHub 並登入您的帳戶，按下右上角的「＋」，選擇 New repository（新增資料庫）

接著在 Repository name 取個專案名字（本篇使用 hello-world），下方 Add a license 可以選擇此專案的授權方式（預設為 None），關於各種專案的授權條款，可以參考這篇文章：常見的五個開源專案授權條款，使用軟體更自由，設定好後按下 Create repository。

創立成功後，畫面就會跳轉到你的新專案 GitHub 頁面了，恭喜你新增好了第一個專案！

註：上圖為新增專案時沒有設定授權條款的畫面，空空的沒有東西。

註：上圖為新增專案時有設定授權條款的畫面，多了一個 LICENSE 的項目。

開啟 SourceTree

第一個專案新增好後，請開啟剛剛安裝好的 SourceTree 並登入你的 GitHub 帳戶。若登入帳戶的提示沒有跳出，請按下右上角的齒輪，選擇第一個 Accounts（帳戶）。

接著按下左下角的 Add（新增）

依序輸入你的：

Host（專案託管、放置的位置，請選擇 GitHub）
Auth Type（驗證類型，請選擇基本 Basic）
Username（帳號）
Password（密碼）
Protocol（通訊協定，請選擇 HTTPS），關於 Protocol 的解釋可以參考這篇文章

Save 完成後，就會出現你的 Github 帳戶了！

將專案加入 SourceTree 做版本控制 - 方法一

版本控制分為本機端（Local）與 遠端（Remote）。
本機端可以在離線的狀態下開發專案，等到連上網路之後再上傳到遠端更新。這也是做版本控制的好處之一，萬一網路掛掉了，還是可以繼續工作。

以下將分為 Local 端與 Remote 端兩個部分解說：

Local 端的步驟

首先在本機的開發環境中，新增一個專案，名稱與在 GitHub 上新增的專案一致。
筆者使用 VS Code，新增了一個 hello-world 的專案資料夾，裡面有 index.html 的檔案。

接著將剛剛新增好的專案加入 SourceTree 做版本控制，請點選 New…，選擇 Add Existing Local Repository（加入現有的專案）。

找到剛剛建立好的專案位置。

加到本機端的 Git 版本控制，確認資料夾無誤後按下 Create。

接著就可以看到你的專案新增到 Local 內了！
右方的「master」代表你的主要版本，前面灰色的數字表示還沒 Commit（提交）到版控的檔案數量。

點進該專案可以看到下圖詳細的內容，左上角的 Commit 會提醒你還沒有提交到版本控制的檔案數。因為筆者只有一份 index.html 的檔案，所以會顯示 1。

這時候可以勾選要將哪些檔案加到版控之中，並且在下方輸入這次更動的註解或提醒。
完成後點選右下角的 Commit。

成功把專案加到本機端的版本控制了！拍手！

Remote 端的步驟

完成了本機端的版控流程之後，接著要設定 Remote （遠端）的位置。
請到稍早在 Github 新增的專案頁面，按下 Clone or download 並複製該網頁的 URL。（畫面一或畫面二）

回到 SourceTree，在專案的右上角點選 Setting > Remote 並按下 Add（新增）

Remote name 請輸入在 Github 新增專案的名稱（hello-world），並貼上 URL、選擇服務供應商（GitHub）和你的 Username，按下 OK。

這樣就設定好你的專案遠端位置囉！（注意：檔案還沒有上傳到遠端！）

以上步驟是將你的 Local Repository（本機資料庫）關聯到 Remote Repository（遠端資料庫），本機的檔案還沒有上傳到遠端，接著會繼續講解如何將本機檔案上傳遠端，再加把勁就完成了！

將 Local 端檔案更新到 Remote 端

筆者在到達這一步時，發生了無法解決的問題，就差這麼臨門一腳！卻無法上傳我的專案，實在難過｡ﾟヽ(ﾟ ´Д`)ﾉﾟ｡
和筆者一起努力的朋友，順順利利的將檔案推上了雲端，幸福果然是比較出來的！
筆者會找時間把問題紀錄成一篇文章，再看看有沒有大神可以解答疑問。

以下教大家第二種將專案做版控的方式，如果有使用方法一卻不能成功推進度上雲端的朋友，請試試看以下的方法二。

將專案加入 SourceTree 做版本控制 - 方法二

方法一 是教大家在本地端建立專案，再與遠端建好的專案位置做連結，最後將本地檔案推上遠端的方式。
方法二 教大家使用 clone（複製）專案的方式，將遠端已建好的專案 clone 到自己本地端，這樣的方式就不用另外設定遠端位置，SourceTree 會自動幫你設定好。

Remote 端的步驟

我們先到在 Github 新增好的專案頁面，複製該網頁的 URL。

Local 端的步驟

接著請在自己的本地端新增一個「名稱與線上專案名一致」的資料夾。（裡面沒有東西沒關係）
新增好後請到 SourceTree > New… > 選擇 Clone from URL

在 Source URL 貼上剛剛複製好的網址，並在 Destination Path 找到建立好的資料夾位置。按下 Clone！

成功將專案 Clone 下來之後，會跳到這個畫面。因為目前的專案內沒有東西，所以會顯示 Nothing to commit（沒有東西可以提交）

接著請使用你慣用的開發工具，在專案資料夾內新增一個 index.html 的檔案。
筆者使用 VS Code，在 hello-world 的專案資料夾內，新增了 index.html。

新增好後，請回到 SourceTree，你會看到畫面中出現了一個 index.html 的檔案，右邊則是 index 的內容。SourceTree 幫我們偵測到了此專案的更新項目！
接下來我們要把這份更新檔案推送到本地端做版本控制，請把 index.html 打勾，下方寫上這次更新的說明，再按下右下角的 Commit（提交）。