專爲設計師而寫的GitHub快速入門教程

時間 2019-11-12 標籤專爲設計師寫的 github 快速入門教程

在互聯網行業工做的想必都多多少少據說過GitHub的大名，除了是最大的開源項目託管平臺，許多企業也都是用GitHub來協同開發工做，固然我們彩程也是其中之一。筆者最初決定學習Git也是由於在團隊內部設計方案初步被開發出來後，不免會有一些細節須要調整，而爲了調整幾像素的問題再求前端工程師出馬，實際上是很影響總體效率的，因此但願經過學習GitHub好在必要的時候直接參與開發，能發揮本身的一點CSS技術以更直接快速的解決問題。
html

可是期間居然發現網上無一篇爲設計師而備的Git教程，典型的，幾乎沒有一個教程講了GitHub的官方應用，而都是圍繞命令符作教程，對就是 DOS那樣的命令符界面，這對於設計師和產品經理等非技術背景從業者來講多少有些難於上手，因此筆者打算結合我的體驗，本身動手寫一篇以使用網頁和客戶端爲主的GitHub教程（暫時先僅以Mac版客戶端爲例），但願它能幫助你們以最快速度熟悉並逐漸開始使用GitHub。
前端

爲何要了解GitHub

在開始以前，仍是得說說爲何GitHub值得設計師學習。除了開篇所講的例子，能夠將本身所瞭解的一點CSS或開發技能發揮出來，下降團隊合做中的溝通成本。這本質上仍是設計師是否應該學習開發或學習到什麼程度的問題。不過我一直認爲這沒什麼可探討的，只是每一個人不一樣的選擇和追求。就像有些人是想成爲傢俱設計師，有些人是真想親手打磨出本身心中最理想的那一把椅子；有些人想成爲建築設計師，有些人只想在山腳下爲家人蓋一座完美小屋。一樣，若是你是真的熱愛這個突飛猛進的行業，沒準某天也要本身創造點什麼，我想你必定會絕不猶豫的開始學習。git

（插播廣告：歡迎加入「設計師學開發」 QQ羣 302258924 尋求幫助、分享學習經驗）github

什麼是Github

按慣例，仍是先簡介下究竟什麼是Git（有基本認識的同窗能夠直接跳過）。讓咱們摒棄那些專業名詞，用設計師工做中常常遇到的狀況來介紹什麼是Git：swift

你出了一版方案A，在你們討論後，你改到B，結果再討論，你們以爲仍是不如用A，這時發現A沒有另存，還得再改回去！在GitHub中就不用擔憂，它會記錄你提交的每一個版本，並把這些都放在一個倉庫（Repository）裏，而每一次提交改變就是 Commit，你能夠隨時回退到任意一個版本。
此外你還極可能遇到方案衍生的狀況，在方案A的基礎上，改出了一種方案B，又改出了一種方案C，可能還分別衍生出B一、B2及C一、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一個項目，作出本身的修改並提交給原做者的任務做爲基本案例，下面跟着我一步一步來吧，網快手快的同窗幾分鐘就能夠搞定啦。ide

第一步：註冊一個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上搭建了本身的博客，設計師們也快跟進吧。

推薦一些相關教程：