GitHub入門 Part.3 GIT版本控制實作教學

布丁布丁吃布丁

2月 05, 2013 0 Comments GitHub

GitHub入門 Part.3 GIT版本控制實作教學

繼前一篇配置好git運作環境之後，這篇就是開始教大家實際上的操作。這包括了之前概念介紹時用到的Pull、Push、Commit、Conflict、Branch跟Check out等等常用的動作，並且跟每天上下班的情境做個結合，讓大家能夠把git版本控制融入到日常作業中。

Part.1 版本控制介紹
Part.2 工具安裝與環境配置
Part.3 Git版本控制實作教學

投影片

(Google Doc、SkyDrive、Box.net)

這次也跟前一篇一樣做了投影片方便講解，但是投影片沒辦法寫很多細節，細節的部份請看下面文字敘述。

上班開始工作：Pull

上班囉！每天開工的第一件工作，就是先把遠端伺服器最新的程式碼下載下來，更新本機端的程式碼吧。

在儲存庫的資料夾底下按右鍵，開啟「Git 同步…」。

點下「拉取」(Pull)按鈕。如果順利的話，你的本機儲存庫就會直接跟遠端伺服器同步，把程式碼都更新為最新的狀態了。

工作中的習慣動作：Commit

當我們為了某些工作修改了儲存庫的原始碼之後，你會發現有些檔案的標示不太一樣。

那些被修改的檔案前面都會有紅色驚嘆號「！」的標示。這表示他的檔案狀態被標示為「已修改」。

其他「未修改」的檔案則是維持原本的綠色打鉤「ˇ」標示。

當我們修改告一段落之後，我們就可以把目前的版本狀態做一次commit。

首先是在儲存庫按右鍵，執行「Git 提交 –> "gh-pages"」。後面的「gh-pages」表示現在的分支，一般來說，通常會是「Master」主幹。

接著會跳出Commit對話視窗。上面訊息記錄你必須輸入一些文字，記錄你這次修改的內容與目的。中間的變動列表會列出所有你這次修改的檔案。確認無誤之後，按下確定。

出現藍色文字表示Commit成功。

Commit之後，剛剛呈現「已修改」紅色驚嘆號的「.gitignore」檔案已經恢復成「未修改」的綠色鉤鉤。

你可以時常Commit你的儲存庫，Commit的間隔越短越好，但是每次Commit的版本內容最好都是確定可以運作的狀態，而不是改到一半無法運作的系統。

到目前為止，每次Commit其實都是在你本機端進行而已。這跟遠端的GitHub沒有關係，也跟你團隊中其他夥伴的電腦檔案沒有關係。

下班收拾工作：Push

我們今天的工作已經告一個段落了，準備把修改過很多次的程式碼送回遠端伺服器，也就是GitHub上。這時候我們要做的動作就是Push。

跟Pull一樣的，我們在儲存庫資料夾按下右鍵，開啟「Git 同步…」。

不同的是，我們這次要做的動作是Push（推送），請按下「推送」按鈕開始把本機端的儲存庫送到遠端伺服器GitHub上。如果順利的話，你就可以看到藍色的成功文字。

還不能那麼快下班：Conflict

有很多時候Push並不會這麼順利。舉例來說，上圖Computer A跟Computer B對同一份檔案做修改，然後下班時分別將該份檔案Push到伺服器，這樣就會發生衝突 Conflict，其中一方的Push會失敗。

發生衝突的原因：互相衝突的程式碼

團隊合作中很容易發生衝突，現在Computer A跟Computer B都修改了index.html。以下是Computer A對index.html的修改內容：

   1: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

   2: "http://www.w3.org/TR/html4/loose.dtd">

   3: <html xmlns="http://www.w3.org/1999/xhtml">

   4:     <head>

   5:         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

   6:         <title>New Web Project</title>

   7:     </head>

   8:     <body>

   9:         <h1>New Web Project Page</h1>

  10:         <!-- test 2 -->

  11:     </body>

  12: </html>

然後是Computer B對index.html的修改內容：

   1: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

   2: "http://www.w3.org/TR/html4/loose.dtd">

   3: <html xmlns="http://www.w3.org/1999/xhtml">

   4:     <head>

   5:         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

   6:         <title>New Web Project</title>

   7:     </head>

   8:     <body>

   9:         <h1>New Web Project Page</h1>

  10:         <!-- test 1 -->

  11:     </body>

  12: </html>

其中這兩個檔案的第10行內容是不一樣的，這就是發生衝突的原因。

然後他們修改之後各別Push到了伺服器上，這順序是這樣：

Computer A Push了index.html，Push成功。
GitHub上最新的index.html是Computer A的版本。
Computer B Push了index.html，Push失敗。

現在Computer B嘗試Push，可是他失敗了，因為衝突發生，GitHub無法直接把Computer B的儲存庫加入伺服器中。

接下來，我就是要介紹發生衝突的時候，怎麼使用TortoiseGit來做合併、解決衝突。

1. 發生衝突的話就先Pull吧

既然遠端伺服器不接受你的Push，那就代表遠端伺服器有比較新的版本。我們必須先Pull取回遠端伺服器的版本來做個檢查。

2. 處理衝突清單

這份衝突清單會列出Git發現本機端跟伺服器端不同的檔案。請雙擊檔案名稱，我們來一一解決這些衝突。

3. 合併

TortoiseGit提供了一個精美的編輯器來合併程式碼：TortoiseGitMerge。從上圖中你可以看到左上角是「對方的 – REMOTE」程式碼，也就是代表位於GitHub上最新的程式碼端；右上角則是「我的 – LOCAL」，也就是本機端的程式碼；而下方「已合併 – index.html」則是合併雙方程式碼之後的結果。

請試著把遠端與本地端做個整合，然後再按照上圖所示位置「標記為已解決」。

4. Commit已解決的版本

解決這些已衝突的檔案之後，記得還是要做一次Commit喔。

5. 再度Push

接著我們再做一次Push。

這次的Push就會成功了。

如果又失敗，那可能是又發生衝突了。請再繼續Merge吧！

新功能開發：開啟Branch

接下來我們來實作分支的功能。現在我們試著在下一次commit的時候建立一個新的分支，叫做「demo-branch」。

要建立一個分支很容易，就是在Commit的時候，把「新建分支」打鉤，然後在「提交至」設定新分支的名稱「demo-branch」就可以了。

於是現在儲存庫所在的分支就會變成你新建的分支。按下右鍵時Git提交後面的名稱就是現在所在的分支。

接著你就可以在這個分支修改你要的功能，而不用擔心常常跟其他人衝突囉。

完成新功能開發：合併Branch

當我們的新功能已經開發完成之後，接下來我們就要把分支demo-branch現在的狀態合併到主幹master上。在TortoiseGit裡面有一套作法，請照著以下步驟來操作看看。

1. 切換分支：Checkout

首先，我們要先把儲存庫目前的版本HEAD切換回主要分支master上。這個動作叫做Checkout。

作法是在儲存庫按右鍵，進入TortoiseGit中的「切換/取出」。

先切換到你最終要保留的分支。雖然上圖是寫gh-pages，但通常會是master，也就是穩定的版本。

這個Checkout功能也可以用來切換到標籤、特定版本，方便我們快速回溯到之前的狀態，以便我們偵錯。

2. 合併分支

當你按右鍵的時候，會看到目前儲存庫的狀態移到了分支gh-pages中。然後接著我們使用的是TortoiseGit中的「合併」功能。

請選擇你要拿來合併的分支，也就是你剛剛開發完新功能的分支。

如果你的修改只是比master多推進幾個版本，Git會用Fast-forward merge來進行合併，這不太會有問題。如果順利的話，就會看到上圖藍字的訊息，表示成功。

3. 發生衝突

如果在你開了新分支之後，master又有往前推進幾個commit，那麼合併時就比較容發生衝突。按下左下角的「解決」吧。

這時候跳出了commit對話視窗，下面有變動的檔案清單。

回到檔案總管來看，index.html被標示了黃色三角形驚嘆號，代表這個檔案發生了衝突，需要我們解決。

4. 解決衝突

在發生衝突的檔案index.html上按右鍵，然後進入TortoiseGit選擇「編輯衝突」。

然後會跳出TortoiseGitMerge編輯器。就跟之前在處理Push的衝突一樣，請在下方把衝突處理完，然後點選「標記為已解決」。

5. Commit解決衝突的版本

接著我們再做一次Commit，把解決衝突的版本儲存起來。到目前為止，我們順利地把demo-branch合併到master分支，但這只是本機端作業而已。

6. Push已合併的版本

最後我們把已經修改好了版本Push到GitHub。因為我自己測試時做了幾次解決衝突的過程，所以中間版本列表很多。其中你可以看到最上面一層會有Merge branch的訊息，表示在這之間我們的確做了一次合併分支。

如果Push成功，那麼我們合併分支的工作就大功告成囉！

結語：Git還有很多功能！

我在跟實驗室的同學們介紹完上述的基本功能之後，大家對於Git還是有很多好奇的地方。像是有沒有單一檔案回溯功能啦、或是應該安排時間統一進行Merge，以免一直發生Conflict。大家的意見都很有意思，也加深了我對Git的期許。

上述的基本功能只是基本中的基本，實務上Git還有重新接樹Rebase、全新樹Stashing、里程碑Tag等功能，而GitHub常見的開發模式也並非上述介紹的單一中心式（所有人都連到KALS儲存庫做開發）、而是聯合管理員式（大家都Fork各自的KALS標註系統，然後透過Pull Request來整合到正統Blessed的KALS標註系統，可以想像成是大型Branch的感覺）等方式。想更進一步了解這些概念的人可以參考Littlebtc的「寫給大家的Git教學」投影片。

而TortoiseGit還有許多功能是我們尚未探索到。可能隨著協同作業複雜化，未來我們會繼續探究更多其他的功能吧。

希望透過這些文章的介紹，大家也能一起來co-work，Coding Together吧！

(more...)

GitHub入門 Part.2 工具安裝與環境配置

布丁布丁吃布丁

2月 04, 2013 3 Comments GitHub

GitHub入門 Part.2 工具安裝與環境配置

續前一篇介紹完版本控制基本概念之後，這一篇則是要介紹如何配置GitHub版本控制的環境。

Part.1 版本控制介紹
Part.2 工具安裝與環境配置
Part.3 Git版本控制實作教學

這篇我是針對Windows 7/8的環境，以TortoiseGit + MSysGit來跟GitHub配合，將XAMPP底下的KALS標註系統做版本控制。然而其實能使用Git的工具，包括IDE，應該都能順利跟GitHub搭配做版本控制。這篇只是入門，未來有機會我會試著研究NetBean跟Aptana的Git功能，好打造一個內建版本控制的開發環境。

投影片

(Google Doc、SkyDrive、Box.net)

雖然這次也是做了投影片，不過投影片反而沒有這麼細。這種細節操作還是Blog的強項。以下請一邊看圖文步驟，一邊跟著操作看看吧！

工具軟體安裝

必要元件：TortoiseGit與MSysGit

為了要讓自己Windows 7/8 64位元版本的電腦具有Git版本控制的功能，首先我們必須先安裝一些工具軟體。這邊使用的是版本控制知名工具TortoiseSVN的Git版本：TortoiseGit，以及TortoiseGit必要元件MSysGit。

TortoiseGit-1.8.0.0-64bit.msi
（原檔案連結、免費空間、Box.net）
TortoiseGit-LanguagePack-1.8.0.0-64bit-zh_TW.msi 中文語系檔
（原檔案連結、免費空間、Box.net）
MSysGit: Git-1.7.11-preview20120710.exe
（原檔案連結、免費空間、Box.net）

照順序安裝完上述軟體之後，請重新開機才會生效。

版本控制對象：XAMPP中的KALS標註系統

這次我們要來做版本控制的是XAMPP網頁伺服器，我的目標是把GitHub上KALS專案的原始碼複製到本機端的XAMPP中，好讓我能在本機端開發之餘還能用版本控制上傳到GitHub。

ApacheFriends XAMPP Portable 1.8.1

必須注意的是，KALS標註系統還需要搭配後端PostgreSQL資料庫才能順利運作。不過資料庫的建置不在本篇討論範圍內，這篇主要是介紹原始碼版本控制的作法而已。

註冊GitHub

基本上GitHub的註冊跟使用都是免費的，注意密碼有7字以上的限制，並且必須是小寫英文與數字的混合。

GitHub免費的帳戶有個限制：所有原始碼都必須公開。如果你想要開一些私人程式碼專案、不想讓其他人看到你的原始碼，那你可以選擇付費帳戶。

對於GitHub必須公開原始碼的限制，我想到的是用.gitignore將敏感檔案排除在版本控制範圍之外，例如設定檔。敏感檔案就在我們團隊內部另外再找方法來傳送即可。

如果仍覺得GitHub必須公開的限制太麻煩，你也可以考慮使用Dropbox + Git或是用Gitolite自己架一個Git Server，不過這些就是不是本篇的討論範圍之內了。

連接本機跟GitHub

關於SSH金鑰

git的使用認證都是靠SSH金鑰(key)進行。所謂的金鑰，其實也就是一長串的加密亂碼。一組金鑰包含兩個檔案，各別是公鑰(Public Key)──可以公開地交給其他人(GitHub)、與私鑰(Private Key)──自己必須小心收藏。當公鑰與私鑰配對成功之後，我們就可以認定電腦與GitHub之間的資料交換是通過認證的合法行為。

SSH金鑰機制是一項很常見的工具，其背後的原理也頗有巧思，對於在資訊界打混的人來說是必備的常識。

那麼我們接下來就要在電腦建立金鑰，然後把公鑰交給GitHub、私鑰自己設定好，這樣未來就能夠順利地直接在GitHub做版本控制了喔！

用Puttygen建立金鑰

當TortoiseGit安裝完之後就可以在裡面找到Puttygen，這是建立金鑰的工具。

開啟Puttygen之後，按下Generate按鈕，開始產生金鑰。

接著上方畫面會出現一條綠色的進度條。在進度條底下的空白處不斷移動滑鼠，進度條就會逐漸累積。

最後Puttygen會產生兩種檔案。上面是公鑰的OpenSSH authorized_keys版本，待會我們要把它加入GitHub中；下面有個「Save private key」（儲存私鑰），則是儲存我們待會會用到的私鑰。

當儲存私鑰時，PuTTYgen會提示你最好輸入加密密碼。在這邊我們從簡不使用加密密碼，直接按下「是」即可。

伺服器端：GitHub設定公鑰

請先登入GitHub，然後在Account Settings中的SSH Keys中，按下右上角的「Add SSH Key」設定公鑰。

Title請寫你的電腦名字，而下面的Key則是剛剛用Puttygen產生的公鑰，開頭會是ssh-rsa。輸入完之後再按下「Add key」。

儲存完成。

本地端：pageant設定私鑰

本地端這邊也要設定私鑰，好讓Git交換資料時能夠通過身分認證。在此使用的是TortoiseGit提供的pageant來實作，而且是讓pageant在每次開機時就自動載入私鑰，不需要我們每次都去設定。

你可以在開始功能表中TortoiseGit目錄底下找到pageant，或是來到TortoiseGit的安裝目錄，pageant預設路徑為C:\Program Files\TortoiseGit\bin\pageant.exe。

接著我們要找到自己電腦開始程式集上的「啟動」或「Startup」，按右鍵「開啟」他的目錄。

接著我們把pageant.exe建立一個捷徑到啟動資料夾中，如上圖。在啟動裡面的捷徑或程式會在每次開機時自動執行，也就是說，我們的目的是讓電腦開機時就能夠自動執行pageant。

接著我們要設定捷徑的目標，請在pageant捷徑上按右鍵進入內容，找到「捷徑」頁籤底下的「目標」一欄，再把私鑰的路徑作為參數加在後面。

舉例來說，原本的目標的資料是pageant的路徑：

"C:\Program Files\TortoiseGit\bin\pageant.exe"

而剛剛我們在Puttygen把私鑰儲存在以下路徑：

"C:\User\pulip_000\Documents\pulipulichen-private.ppk"

那麼私鑰作為參數添加在pageant捷徑後的資料就是：

"C:\Program Files\TortoiseGit\bin\pageant.exe" "C:\User\pulip_000\Documents\pulipulichen-private.ppk"

注意，兩個路徑前後必須加上雙引號「"」，兩個路徑中間必須以空格「」隔開。

設定完成之後，再雙擊開啟設定好的pageant捷徑。順利的話右下角通知會出現pageant的圖示，如上圖。

你可以按右鍵打開View Keys看看私鑰有沒有順利載入，上途中已經把我設定的金鑰載入進去了。如果只是開啟pageant的話，清單裡面會是空白的。

設定TortoiseGit

還有兩個小細節需要設定，包括中文化語系與使用者資訊。

開啟TortoiseGit設定

在任意資料夾按右鍵進入TortoiseGit裡面的「設定」。TortoiseGit大部分操作也都是這樣做的。

設定語系

你可以在「一般設定」中找到「語系」的選項設定。不過由於TortoiseGit翻譯有些地方也很奇怪，不見得一定要用中文語系，學學英文也好。

是說這些截圖我都是用中文語系下去操作的，忘記改成英文了XD

設定Git使用者資料

接著到「Git」中設定「使用者資料」。這邊主要填寫的是你的名字與電子郵件即可。這些資料會用於每次commit時的記錄，表示這個修改版本的聯絡人。

管理者的工作：建立與分享儲存庫

Git的運作環境已經配置好了，現在我們可以在GitHub上開啟新的儲存庫，好讓其他團隊的成員可以一起編輯。

1. 在GitHub建立新的儲存庫

登入GitHub之後，右上角就可以看到「Create a new repo」。

在這邊要輸入Repository Name、Description（選填）以及其他選項。必須注意的是，免費帳號只能用Public，付費帳號才能用Private。

下面有個選項可以加入.gitignore，不過我更傾向於自己編輯這份版本控制排除清單。

2. 設定排除清單.gitignore

當儲存庫建立好之後，你可以在上圖的位置找到「Create a new file here」的功能按鈕。

然後我們建立一個名稱為「.gitignore」的檔案。檔案內容就是加入你要排除在版本控制之外的目錄或檔案路徑。舉例來說，我們要排除「aptana」跟「nbproject」這兩個IDE會擺放暫存資料的目錄，以及擺放設定檔的「config」目錄，那我們可以這樣寫：（#開頭表示注釋）

# IDE metadata. Don't track them!
aptana/
nbproject/

# Configuration. Keep private, don't track!
config/

這些檔案不會在版本控制之內，也不會上傳到GitHub。我們可以用.gitignore方式避免密碼或敏感的機密程式被放到GItHub上。

3. 新增儲存庫的合作者

儲存庫預設只有建立者自己擁有Read/Write（讀取/寫入）的權限，其他人只能夠Read（讀取）。如果要讓其他人也能夠Write（寫入），必須要把他們的GitHub帳號加入Collaborators的設定中。

請進入儲存庫右上角的「Settings」設定。

在左邊找到Collaborators，然後把其他成員的GitHub帳號輸入進去就可以了！

開發者的工作：複製儲存庫

（其實上圖要表達的意思是fork，這是GitHub很盛行的作法，不過在本篇中我們用不到這個進階的作法XD）

好的，現在我們不僅Git運作環境配置妥當，GitHub上也有一個儲存庫可以用了。不論你是從空的儲存庫開始、還是想要複製既有的專案，我們都可以用以下的步驟來輕鬆地取得GitHub上程式碼。

1. 取得儲存庫的網址

每個儲存庫都有他獨一無二的網址。而這個網址又可以分成HTTP格式或是SSH格式。我們在這邊主要是用SSH來進行傳輸，所以請點選SSH，然後複製右邊的網址。以KALS標註系統專案為例，它的SSH網址就是「git@github.com:pulipulichen/kals.git」。

2. 指定本機儲存庫的位置

現在要在本機端找個地方來擺儲存庫。一開始練習的時候，你可以隨便找個空的資料夾作為本機儲存庫的位置。因為我希望這個儲存庫程式碼是可以直接搭配XAMPP運作，所以我把它擺在「D:\xampp\htdocs\」底下。一台電腦你可以複製很多個儲存庫沒有問題，請盡情地練習吧。

不過必須注意的是，待會我們要複製的儲存庫名稱叫做「kals」，所以待會複製儲存庫時會自動建立一個資料夾，也叫做「kals」。請確認你的資料夾底下不要有同名的檔案或資料夾，以免發生衝突。

在你要複製的目錄底下，按右鍵開啟「Git 克隆…」（Git Clone…），接著就要設定複製儲存庫的細節。

3. 複製儲存庫

在Git Clone設定中，URL要輸入儲存庫的網址。以KALS為例，就是輸入「git@github.com:pulipulichen/kals.git」，然後確認一下目錄是否如你指定路徑。其他的設定則用預設值即可。確認無誤之後按下「確定」，然後等待Git從GitHub下載儲存庫吧。

下載完成，最新的程式碼都在你的電腦裡面囉！

小結：配置Git方式還有百百種

本篇是講用TortoiseGit這個Client端GIT GUI連到GitHub，但其實還有很多種方法可以讓你跟GitHub一起工作。一開始我用的是GitHub for Windows這個Client端操作，但是他的合併、衝突必須要用指令列來處理，不太方便。然後我就是用現在這個TortoiseGit，他結合了Windows檔案總管，很容易上手。後來我發現像是NetBeans跟Aptana Studio都提供了Git的功能，你在開發環境中就可以直接用Git做版本控制，想必對開發來說更有幫助。

總之，這幾篇只是入門，應用方式還很多，等待大家發掘囉。下一篇則是繼續用TortoiseGit，Step by step地介紹如何操作Pull、Commit、Push與處理Conflict等常見的動作。

(more...)