專為設計師而寫的GITHUB快速入門教程

 

　　李凱文( Tower設計師)：在互聯網行業工作的想必都多多少少聽說過GitHub的大名，除了是最大的開源項目托管平台，許多企業也都是用GitHub來協同開發工作，當然我們彩程也是其中之一。筆者最初決定學習Git也是因為在團隊內部設計方案初步被開發出來後，難免會有一些細節需要調整，而為了調整幾像素的問題再求前端工程師出馬，其實是很影響整體效率的，所以希望通過學習GitHub好在必要的時候直接參與開發，能發揮自己的一點CSS技術以更直接快速的解決問題。

　　但是期間竟然發現網上無一篇為設計師而備的Git教程，典型的，幾乎沒有一個教程講了GitHub的官方應用，而都是圍繞命令符做教程，對就是DOS那樣的命令符界面，這對於設計師和產品經理等非技術背景從業者來說多少有些難於上手，所以筆者打算結合個人體驗，自己動手寫一篇以使用網頁和客戶端為主的GitHub教程(暫時先僅以Mac版客戶端為例)，希望它能幫助大家以最快速度熟悉並逐漸開始使用GitHub。

　　為什麼要了解GitHub

　　在開始之前，還是得說說為什麼GitHub值得設計師學習。除了開篇所講的例子，可以將自己所了解的一點CSS或開發技能發揮出來，降低團隊合作中的溝通成本。這本質上還是設計師是否應該學習開發或學習到什麼程度的問題。不過我一直認為這沒什麼可探討的，只是每個人不同的選擇和追求。就像有些人是想成為家具設計師，有些人是真想親手打磨出自己心中最理想的那一把椅子;有些人想成為建築設計師，有些人只想在山腳下為家人蓋一座完美小屋。同樣，如果你是真的熱愛這個日新月異的行業，沒准某天也要自己創造點什麼，我想你一定會毫不猶豫的開始學習。

　　什麼是Github

　　按慣例，還是先簡介下究竟什麼是Git(有基本認識的同學可以直接跳過)。讓我們摒棄那些專業名詞，用設計師工作中經常遇到的情況來介紹什麼是Git：

　　• 你出了一版方案A，在大家討論後，你改到B，結果再討論，大家覺得還是不如用A，這時發現A沒有另存，還得再改回去!在GitHub中就不用擔心，它會記錄你提交的每個版本，並把這些都放在一個倉庫(Repository)裡，而每一次提交改變就是 Commit，你可以隨時回退到任意一個版本。

　　• 此外你還很可能遇到方案衍生的情況，在方案A的基礎上，改出了一種方案B，又改出了一種方案C，可能還分別衍生出B1、B2及C1、C2，在GitHub裡有分支(Branches)可以記錄這種方案的分化過程。

　　• 後來你覺得B1和C2方案中都有可取的地方，把它們融合一下就可以輸出終稿了，Git裡當然也支持這種分支合並(Merged)。

　　當你個人使用Git，涉及的基本概念就這麼幾條，是不非常簡單呢。下面我們來看看多人協同，也就是Git真正厲害的地方，當然也不復雜。

　　• 在稍大的團隊中，可能需要幾個設計師合作完成一個方案，怎麼樣統一進度呢，一種就是大家每天把文件拷在一起，這需要經常浪費時間去同步文件，顯然很不方便。另一種是每個人電腦裡都留一份，需要時就和雲端服務器同步，Git就是采用這樣的所謂分布式系統。好處是更安全，也更便捷。

　　• 那麼問題也就來了，如果大家都改同一個東西，萬一沖突了怎麼辦?不用擔心，Git會幫你對比並告訴你哪裡有沖突了，你可以逐個對沖突的地方做出抉擇。此外，前面不是講到可以衍生出分支(Branches)麼，在大家各自推進方案的時候，分別把內容放在不同的分支裡，就不會相互干擾了。

　　• 開源的項目是任何人都可見，你可以Fork一個項目，這相當於在你的賬號下從原項目新建了一個分支，你可以在此基礎上改動，如果有希望提交給原作者的成果，可以發合並申請到原庫(Pull Request)，原作者可以看到通知並決定是否合並。通過這種方式，大家就可以合力將某個開源項目變得更好。

　　最後我們還得明確一下概念，Git和GitHub有什麼區別，引用知乎上Fluyy的解釋“git是一個版本控制工具，github是一個用git做版本控制的項目托管平台。”這有點類似於Wordpress和Wordpress.com的關系，前者是一個任何有都可以用的免費博客系統，後者是一個平台，在這個平台上你可以通過注冊來直接使用Wordpress寫博客。

　　說到這裡我想你已經對GitHub是怎麼回事有了基本的認識，下面就讓我們撸起袖子，以一個簡單的案例來看看GitHub到底是怎麼使用吧。

　　案例學習：做一遍全明白!

　　我們以Fork一個項目，做出自己的修改並提交給原作者的任務作為基本案例，下面跟著我一步一步來吧，網快手快的同學幾分鐘就可以搞定啦。

　　第一步：注冊一個GitHub賬號並登錄

　　這個流程就不說了，完成後可以下載GitHub官方App，並登錄。

　　第二步：Fork倉庫

　　點這裡打開我用馬甲專為本教程建立一個庫 Designers-Learn-Git，可以看到創建者名(我的馬甲)寫在/前面：Tower-KevinLi。然後點擊右上角的Fork按鈕。

　　完成後你會發現跳到一個新的頁面，Tower-KevinLi變成了你的GitHub賬戶名(cnkevinlee是我的另一個馬甲…)，這表示你的賬號下已經“復制了”一份Designer-Learn-Git，然後你就可以做修改了。

　　第三步：修改文件

　　可以看到Designers-Learn-Git這個倉庫裡只有兩個文件“README.md”(項目說明)和“花名冊.txt”，這裡我們只需嘗試修改後者(道理和修改有很多文件的倉庫是一樣的)。可以直接在線修改，也可以先克隆到本機再修改，對於比較復雜的項目肯定是要采取後者，不過這裡我們可以先看看在網頁上直接修改怎麼操作。

　　在線修改：直接在頁面上點”花名冊.txt“的名字，進入如下詳情頁，再點擊”Edit“。

　　這裡設計的任務內容是在花名冊上隨便寫寫你的ID和Tiitle，初衷是能通過這個和學習這個教程的同學有一個互動，看看你能排到第幾位。

　　在編輯頁面編輯完後，滾動到頁面底部，點擊綠色的“Commit Changes”按鈕確認提交。

　　本地修改：另一種辦法是把項目克隆到本地後再修改，打開客戶端(這裡以Mac最新版為例)，點擊右上角的“+”號，切換到“Clone”，找到“Designers-Learn-Git”後點擊右下的“Clone Repository”按鈕。

　　然後從本地找到克隆的文件夾，打開“花名冊.txt”，編輯並保存。這時再切換到GitHub應用的窗口，你會發現它在“Changes”頁已經檢測到並列出了你的改變，然後點擊Commit & Sync按鈕，將修改提交並同步到GitHub。注意，提交和同步是兩個動作，需要先將下圖那個綠色的按鈕激活，這兩個動作才會同時執行，否則你就需要在提交後再點整個界面右上角的Sync(適用於做出多個修改後統一提交的情況)。

　　第四步：申請合並

　　在確認已經對自己Fork了的倉庫修改成功後，你可以將提交合並申請，申請將你的版本合並入最初的項目也就是我創建的 Designers-Learn-Git，步驟如下：

　　在網頁上打開你Fork的Designers-Learn-Git的頁面，點擊這個醒目的綠色按鈕。

　　再點擊“Create pull request”按鈕，提交申請，完成後我會收到通知，並將你補充的內容合並入原庫。