GitHub 快速入門教程

在網際網路行業工作的想必都多多少少聽說過 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」按鈕，提交申請，完成後我會收到通知，並將你補充的內容合併入原庫。

注意上圖圈紅的地方顯示了要合併的兩個分支，由於沒有新建分支，這裡就預設顯示兩個庫都僅有的 Master 主分支，你可以嘗試新建分支，並選擇其它分支申請合併，體驗 GitHub 的分支功能，本文作為入門教程這裡就先不贅述了，有問題的同學可以聯絡我。

圖片對比功能，設計師的真愛！

做完前面的案例，你會發現 GitHub 可以直接對比檔案間的改動，但也僅對程式、文字檔案有效，可我們設計師都是靠圖吃飯啊！好了別急，GitHub 一直在努力提升設計師的使用體驗，並且已經實現了很好的圖片對比功能，當然直接上傳可能巨大的 PSD 原始檔不太現實，但我們可以對比匯出後的版本，點選這裡看看 Demo 吧。

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

2-up：就是直接並排放在一起對比，會顯示尺寸：

Swipe：是將兩個圖摞在一起，透過拖動，改變上面的圖的顯示大小，使用者盯著拖動線附近的變化就可以快速發現區別了，如圖，當拖到貓眼附近就很容易看出一個戴了眼鏡。

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

GitHub 使用拓展-能做的遠不止這些！

版本管理，協同開發與設計，這只是 GitHub 最基本的用途，事實上利用 Git 的體系，可以實現很多其它事情。

用 GitHub 協作翻譯

蘋果釋出 Swift 語言，號稱更加容易上手，讓很多設計師都躍躍欲試。官方同時釋出了（翻譯成中文後）達 300 多頁的官方手冊，而國內一個自發組織起來的團隊，30 多個人用 9 天時間即將翻譯和校對工作全部完成，他們每人都還有自己的事情，上班、上線、創業，然而藉助 GitHub 他們僅用業餘時間在這麼短的時間內就完成了這一壯舉。他們的口號是「這一次，讓中國和世界同步」

點這裡可以看到他們的專案和翻譯成果。

用 GitHub 寫書

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

用 GitHub 進行專案管理

GitHub 最初是為了開發的管理而生，當然也就具備了專案管理的潛質，特別是與開發密切聯絡的專案中，它的優勢盡顯。這幾篇文章介紹瞭如何使用 GitHub 結合其它工具進行專案管理：《 Using Github for Project Management 》、《使用 GitHub 進行團隊合作》。當然，GitHub 還是很偏重開發的管理，一般的專案管理還是適合使用我們家 Tower 之類的產品：）

用 GitHub 搭建部落格、個人網站

一個線上的個人頁面，獨立部落格，幾乎是每個設計師的必備。過去，要自己租空間、安裝網站程式，搭個人網站，是個耗時又好錢的事。而 GitHub 本身提供免費的託管服務，又提供了貼心的 Pages 功能，可以繫結你自己的域名，讓這一切就水到渠成了。免費、高效、不限流量，做一個個人頁面綽綽有餘，比如前兩天碰巧看到的這個例子：jianglai.me 。不過其實很多工程師都已經在 GitHub 上搭建了自己的部落格，設計師們也快跟進吧。

推薦一些相關教程：