在互聯(lián)網(wǎng)行業(yè)工作的想必都多多少少聽說過GitHub的大名，除了是最大的開源項(xiàng)目托管平臺，許多企業(yè)也都是用GitHub來協(xié)同開發(fā)工作，當(dāng)然我們彩程也是其中之一。筆者最初決定學(xué)習(xí)Git也是因?yàn)樵趫F(tuán)隊(duì)內(nèi)部設(shè)計(jì)方案初步被開發(fā)出來后，難免會(huì)有一些細(xì)節(jié)需要調(diào)整，而為了調(diào)整幾像素的問題再求前端工程師出馬，其實(shí)是很影響整體效率的，所以希望通過學(xué)習(xí)GitHub好在必要的時(shí)候直接參與開發(fā)，能發(fā)揮自己的一點(diǎn)CSS技術(shù)以更直接快速的解決問題。

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

為什么要了解GitHub

在開始之前，還是得說說為什么GitHub值得設(shè)計(jì)師學(xué)習(xí)。除了開篇所講的例子，可以將自己所了解的一點(diǎn)CSS或開發(fā)技能發(fā)揮出來，降低團(tuán)隊(duì)合作中的溝通成本。這本質(zhì)上還是設(shè)計(jì)師是否應(yīng)該學(xué)習(xí)開發(fā)或?qū)W習(xí)到什么程度的問題。不過我一直認(rèn)為這沒什么可探討的，只是每個(gè)人不同的選擇和追求。就像有些人是想成為家具設(shè)計(jì)師，有些人是真想親手打磨出自己心中最理想的那一把椅子；有些人想成為建筑設(shè)計(jì)師，有些人只想在山腳下為家人蓋一座完美小屋。同樣，如果你是真的熱愛這個(gè)日新月異的行業(yè)，沒準(zhǔn)某天也要自己創(chuàng)造點(diǎn)什么，我想你一定會(huì)毫不猶豫的開始學(xué)習(xí)。

什么是Github

按慣例，還是先簡介下究竟什么是Git（有基本認(rèn)識的同學(xué)可以直接跳過）。讓我們摒棄那些專業(yè)名詞，用設(shè)計(jì)師工作中經(jīng)常遇到的情況來介紹什么是Git：

• 你出了一版方案A，在大家討論后，你改到B，結(jié)果再討論，大家覺得還是不如用A，這時(shí)發(fā)現(xiàn)A沒有另存，還得再改回去！在GitHub中就不用擔(dān)心，它會(huì)記錄你提交的每個(gè)版本，并把這些都放在一個(gè)倉庫（Repository）里，而每一次提交改變就是 Commit，你可以隨時(shí)回退到任意一個(gè)版本。
• 此外你還很可能遇到方案衍生的情況，在方案A的基礎(chǔ)上，改出了一種方案B，又改出了一種方案C，可能還分別衍生出B1、B2及C1、C2，在GitHub里有分支（Branches）可以記錄這種方案的分化過程。
• 后來你覺得B1和C2方案中都有可取的地方，把它們?nèi)诤弦幌戮涂梢暂敵鼋K稿了，Git里當(dāng)然也支持這種分支合并（Merged）。

當(dāng)你個(gè)人使用Git，涉及的基本概念就這么幾條，是不非常簡單呢。下面我們來看看多人協(xié)同，也就是Git真正厲害的地方，當(dāng)然也不復(fù)雜。

• 在稍大的團(tuán)隊(duì)中，可能需要幾個(gè)設(shè)計(jì)師合作完成一個(gè)方案，怎么樣統(tǒng)一進(jìn)度呢，一種就是大家每天把文件拷在一起，這需要經(jīng)常浪費(fèi)時(shí)間去同步文件，顯然很不方便。另一種是每個(gè)人電腦里都留一份，需要時(shí)就和云端服務(wù)器同步，Git就是采用這樣的所謂分布式系統(tǒng)。好處是更安全，也更便捷。
• 那么問題也就來了，如果大家都改同一個(gè)東西，萬一沖突了怎么辦？不用擔(dān)心，Git會(huì)幫你對比并告訴你哪里有沖突了，你可以逐個(gè)對沖突的地方做出抉擇。此外，前面不是講到可以衍生出分支（Branches）么，在大家各自推進(jìn)方案的時(shí)候，分別把內(nèi)容放在不同的分支里，就不會(huì)相互干擾了。
• 開源的項(xiàng)目是任何人都可見，你可以Fork一個(gè)項(xiàng)目，這相當(dāng)于在你的賬號下從原項(xiàng)目新建了一個(gè)分支，你可以在此基礎(chǔ)上改動(dòng)，如果有希望提交給原作者的成果，可以發(fā)合并申請到原庫（Pull Request），原作者可以看到通知并決定是否合并。通過這種方式，大家就可以合力將某個(gè)開源項(xiàng)目變得更好。

最后我們還得明確一下概念，Git和GitHub有什么區(qū)別，引用知乎上Fluyy的解釋“git是一個(gè)版本控制工具，github是一個(gè)用git做版本控制的項(xiàng)目托管平臺?！边@有點(diǎn)類似于Wordpress和Wordpress.com的關(guān)系，前者是一個(gè)任何有都可以用的免費(fèi)博客系統(tǒng)，后者是一個(gè)平臺，在這個(gè)平臺上你可以通過注冊來直接使用Wordpress寫博客。

說到這里我想你已經(jīng)對GitHub是怎么回事有了基本的認(rèn)識，下面就讓我們擼起袖子，以一個(gè)簡單的案例來看看GitHub到底是怎么使用吧。

案例學(xué)習(xí)-做一遍全明白！

我們以Fork一個(gè)項(xiàng)目，做出自己的修改并提交給原作者的任務(wù)作為基本案例，下面跟著我一步一步來吧，網(wǎng)快手快的同學(xué)幾分鐘就可以搞定啦。

第一步：注冊一個(gè)GitHub賬號并登錄

這個(gè)流程就不說了，完成后可以下載GitHub官方App，并登錄。

第二步：Fork倉庫

點(diǎn)這里打開我用馬甲專為本教程建立一個(gè)庫 Designers-Learn-Git，可以看到創(chuàng)建者名（我的馬甲）寫在/前面：Tower-KevinLi。然后點(diǎn)擊右上角的Fork按鈕。

完成后你會(huì)發(fā)現(xiàn)跳到一個(gè)新的頁面，Tower-KevinLi變成了你的GitHub賬戶名（cnkevinlee是我的另一個(gè)馬甲…），這表示你的賬號下已經(jīng)“復(fù)制了”一份Designer-Learn-Git，然后你就可以做修改了。

第三步：修改文件

可以看到Designers-Learn-Git這個(gè)倉庫里只有兩個(gè)文件“README.md”（項(xiàng)目說明）和“花名冊.txt”，這里我們只需嘗試修改后者（道理和修改有很多文件的倉庫是一樣的）?？梢灾苯釉诰€修改，也可以先克隆到本機(jī)再修改，對于比較復(fù)雜的項(xiàng)目肯定是要采取后者，不過這里我們可以先看看在網(wǎng)頁上直接修改怎么操作。

?

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

這里設(shè)計(jì)的任務(wù)內(nèi)容是在花名冊上隨便寫寫你的ID和Tiitle，初衷是能通過這個(gè)和學(xué)習(xí)這個(gè)教程的同學(xué)有一個(gè)互動(dòng)，看看你能排到第幾位。

在編輯頁面編輯完后，滾動(dòng)到頁面底部，點(diǎn)擊綠色的“Commit Changes”按鈕確認(rèn)提交。

?

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

然后從本地找到克隆的文件夾，打開“花名冊.txt”，編輯并保存。這時(shí)再切換到GitHub應(yīng)用的窗口，你會(huì)發(fā)現(xiàn)它在“Changes”頁已經(jīng)檢測到并列出了你的改變，然后點(diǎn)擊Commit & Sync按鈕，將修改提交并同步到GitHub。注意，提交和同步是兩個(gè)動(dòng)作，需要先將下圖那個(gè)綠色的按鈕激活，這兩個(gè)動(dòng)作才會(huì)同時(shí)執(zhí)行，否則你就需要在提交后再點(diǎn)整個(gè)界面右上角的Sync（適用于做出多個(gè)修改后統(tǒng)一提交的情況）。

第四步：申請合并

在確認(rèn)已經(jīng)對自己Fork了的倉庫修改成功后，你可以將提交合并申請，申請將你的版本合并入最初的項(xiàng)目也就是我創(chuàng)建的 Designers-Learn-Git，步驟如下：

在網(wǎng)頁上打開你Fork的Designers-Learn-Git的頁面，點(diǎn)擊這個(gè)醒目的綠色按鈕

再點(diǎn)擊“Create pull request”按鈕，提交申請，完成后我會(huì)收到通知，并將你補(bǔ)充的內(nèi)容合并入原庫。

注意上圖圈紅的地方顯示了要合并的兩個(gè)分支，由于沒有新建分支，這里就默認(rèn)顯示兩個(gè)庫都僅有的Master主分支，你可以嘗試新建分支，并選擇其它分支申請合并，體驗(yàn)GitHub的分支功能，本文作為入門教程這里就先不贅述了，有問題的同學(xué)可以聯(lián)系我。

圖片對比功能，設(shè)計(jì)師的真愛！

做完前面的案例，你會(huì)發(fā)現(xiàn)GitHub可以直接對比文件間的改動(dòng)，但也僅對程序、文本文件有效，可我們設(shè)計(jì)師都是靠圖吃飯?。『昧藙e急，GitHub一直在努力提升設(shè)計(jì)師的使用體驗(yàn)，并且已經(jīng)實(shí)現(xiàn)了很好的圖片對比功能，當(dāng)然直接上傳可能巨大的PSD源文件不太現(xiàn)實(shí)，但我們可以對比導(dǎo)出后的版本，點(diǎn)擊這里看看Demo吧。

GitHub的圖片對比工具提供了三種對比方法幫你找不同，我們來挨個(gè)看一下：

2-up：就是直接并排放在一起對比，會(huì)顯示尺寸：

?

Swipe：是將兩個(gè)圖摞在一起，通過拖動(dòng)，改變上面的圖的顯示大小，用戶盯著拖動(dòng)線附近的變化就可以快速發(fā)現(xiàn)區(qū)別了，如圖，當(dāng)拖到貓眼附近就很容易看出一個(gè)戴了眼鏡。

Onion Skin：也是將兩個(gè)圖摞在一塊，圖下方有一個(gè)拖動(dòng)條，控制上面一張圖的透明度，這樣在拖動(dòng)改變透明度的時(shí)候，就能感覺到有區(qū)別的地方了。

GitHub使用拓展-能做的遠(yuǎn)不止這些！

版本管理，協(xié)同開發(fā)與設(shè)計(jì)，這只是GitHub最基本的用途，事實(shí)上利用Git的體系，可以實(shí)現(xiàn)很多其它事情。

用GitHub協(xié)作翻譯

蘋果發(fā)布Swift語言，號稱更加容易上手，讓很多設(shè)計(jì)師都躍躍欲試。官方同時(shí)發(fā)布了（翻譯成中文后）達(dá)300多頁的官方手冊，而國內(nèi)一個(gè)自發(fā)組織起來的團(tuán)隊(duì)，30多個(gè)人用9天時(shí)間即將翻譯和校對工作全部完成，他們每人都還有自己的事情，上班、上線、創(chuàng)業(yè)，然而借助GitHub他們僅用業(yè)余時(shí)間在這么短的時(shí)間內(nèi)就完成了這一壯舉。他們的口號是“這一次，讓中國和世界同步”

點(diǎn)這里可以看到他們的項(xiàng)目和翻譯成果。

用GitHub寫書

說到了前一個(gè)例子，就不得不提GitBook，一個(gè)結(jié)合GitHub和Markdown來制作精美在線讀物的工具。你可以自己或和任何人合作，編著一本在線書籍，還能夠銷售，當(dāng)作家不再只是夢。

用GitHub進(jìn)行項(xiàng)目管理

GitHub最初是為了開發(fā)的管理而生，當(dāng)然也就具備了項(xiàng)目管理的潛質(zhì)，特別是與開發(fā)密切聯(lián)系的項(xiàng)目中，它的優(yōu)勢盡顯。這幾篇文章介紹了如何使用GitHub結(jié)合其它工具進(jìn)行項(xiàng)目管理：《Using Github for Project Management》、《使用GitHub進(jìn)行團(tuán)隊(duì)合作》。當(dāng)然，GitHub還是很偏重開發(fā)的管理，一般的項(xiàng)目管理還是適合使用我們家Tower之類的產(chǎn)品 ：）

用GitHub搭建博客、個(gè)人網(wǎng)站

一個(gè)在線的個(gè)人頁面，獨(dú)立博客，幾乎是每個(gè)設(shè)計(jì)師的必備。過去，要自己租空間、安裝網(wǎng)站程序，搭個(gè)人網(wǎng)站，是個(gè)耗時(shí)又好錢的事。而GitHub本身提供免費(fèi)的托管服務(wù)，又提供了貼心的Pages功能，可以綁定你自己的域名，讓這一切就水到渠成了。免費(fèi)、高效、不限流量，做一個(gè)個(gè)人頁面綽綽有余，比如前兩天碰巧看到的這個(gè)例子：jianglai.me。不過其實(shí)很多工程師都已經(jīng)在GitHub上搭建了自己的博客，設(shè)計(jì)師們也快跟進(jìn)吧。

推薦一些相關(guān)教程：

• 《通過GitHub Pages建立個(gè)人站點(diǎn)（詳細(xì)步驟）》
• 《如何搭建一個(gè)獨(dú)立博客——簡明Github Pages與Hexo教程》
• 《搭建一個(gè)免費(fèi)的，無限流量的Blog—-github Pages和Jekyll入門》

更多進(jìn)階教程推薦

鑒于本文只是一篇拋磚引玉的入門教程，就不再詳述更多的細(xì)節(jié)，如果對Git感興趣的同學(xué)，可以看看下面這些，它們可以幫助你成為一名專家、至少是設(shè)計(jì)師中的Git專家 ??

• 《git-簡明指南》
• 《Pro Git》
• 《Git Magic》
• 一個(gè)學(xué)習(xí)Git的在線互動(dòng)教程
• 知乎上關(guān)于GitHub學(xué)習(xí)資料的問題

作者：KevinLi