簡評：解放生產力的，GitHub 使用指南

1在 Github 上編輯程式碼

我要先說一個很多人都知道的事兒。

當你使用 GitHub，看一些檔案（任何的文字檔案或者倉庫），能看到一個頂部右側有一個小鉛筆圖示。點選即可編輯文件。完成後，按照提示點選「Propose file change」，GitHub 會為你 fork 這個倉庫並建立一個 pull request。

很帥吧，GitHub 為你建立了一個分支。

不需要 fork / pull / 改變 locally / push / 建立 PR，只需點選一下，就可以建立分支。

這對於改一些排版錯誤或者防惡意篡改是很有幫助的。

2貼上影像

對於 issue 和 comment，你還可以直接貼上圖片，當你貼上時圖片會被上傳至雲端，然後以 MarkDown 格式顯示。

非常簡潔。

3格式化程式碼

如果你想寫一個 code block，你可以在開始處寫三個反引號，然後 GitHub 會試圖猜出你在寫什麼語言。

但是如果你釋出如 Vue、Typescript、JSX 這樣的語言，你可以明確寫出來，以獲取正確的高亮。

下圖第一行使用了 ```jsx：

片段呈現：

（這可以擴充套件到 gist，順便一提，如果你給了 gist 定義成 .jsx 副檔名，那麼你會得到 JSX 的高亮）。

4使用魔術詞在 PR 中關閉 issue

比如你在建立一個 pull request 去修復 issue #234。那你可在 PR 輸入「fixes #234」，就可以自動合併 PR 並關閉這個 issue，是不是很酷。

（提交資訊裡可以使用 fix/fixes/fixed , close/closes/closed 或者 resolve/resolves/resolved等關鍵詞）

5連結到 comment

你甚至想連結到一個特定的評論，但無法做到？我在這裡告訴你，點選名字旁邊的日期/時間就萬事大吉。

6連結到程式碼

既然能連結到 comment，那你想問能不能連結到程式碼上？可以的。

試試這個操作：在檢視檔案時，點選程式碼邊上的行數。

哇喔，你看到了麼？URL 隨之更新。如果你按住 Shift 並單擊另一個行號，URL 會再次更新，並且高亮這兩個行數之間的所有程式碼段。

你現在可以分享這個 URL 了，但等等，這些還是當前分支，如果檔案變化了呢？你需要一個永久連結。

我比較懶，但是下面這一個截圖已經能夠表達如何獲取永久連結了（Copy Permalink）：

7像使用命令列一樣使用 GitHub URL

既然說到了 URL，那麼久接著聊一下。使用 UI 瀏覽 GitHub 很方面也很好，不過很多時候最快的方式是使用 URL 來瀏覽。舉個例子，如果我想跳轉到正在處理的分支上，並想檢視分支和 master 的差異，我可以在我的倉庫名後面輸入 /compare/branch-name。

下簡單說，檢視 master 和分支的區別，如下圖：

可以在名字後面再加上...XXX（分支名）比如我寫的 mkdocs...pre-release，如下圖：

這一步你可以配合鍵盤快捷鍵，Ctrl + L 或者 cmd + L，可以讓游標直接移動到 URL 中（最起碼 chrome 是這樣）。這些加一起能提高生產力。

專業提示：用鍵盤移動 chrome URL 上的某一條網頁記錄，使用 Shift+Delete 或 Shift+fn+Delete 來刪除某一條記錄。（比如合併了分支之後就可以刪除了）

8在 issue 中建立 list

你想在你的 issue中看到可多選的 list 麼？

當你檢視問題時，你想不想讓它變成 2 of 5 這樣的形式。

如果想，你可以在 issue 中使用以下句法：

- [ ] Screen width (integer) 

- [x] Service worker support 

- [x] Fetch support 

- [ ] CSS flexbox support 

- [ ] Custom elements

9GitHub 上的 project board

我總是用 Jira 做大專案，獨立專案用 Trello，這兩者我都很喜歡。

後來我知道，GitHub 也有類似的 project board：

我個人為了方便把它們都新增為 note。board 極為方便的幫助你做倉庫管理。

你可以點選右上角 Add Cards 來新增東西。這裡有些特殊語法方便搜尋，比如： is:pr is:open，你就可以把任何公開的 PR 拖到 board 上。

更多語法可以參考 search syntax 。

你也可以把現存的 note 轉化為 issue。

你也可以選擇 issue 直接新增到 projects 。

這些意味著，從現在開始，你可以明確責任制度，每一行程式碼的分配都可以在 GitHub 上的 Project board 上完成而不用去 Jira 或者 Trello 上。

不過它也有些缺點，比如功能比較少。你也可以試試 ZenHub，它有效的擴充套件 GitHub。

10GitHub WiKi

GitHub WiKi 能夠幫助我們處理非結構化的頁面集合，就像維基百科那樣。我自己 NodeJS docs 就被我弄成 wiki 的樣子。幾個頁面，然後自定義側邊欄。具體方法網上很多，我的頁面可以供你參考一下。

建議：如果你有個特別長的單頁面 README.md 檔案，並且想和其他人有所區別，你可以試試這種形式。

11GitHub Pages（JekyII）

你可能已經知道了能使用 GitHub Pages 來託管靜態網站。那本條就特別介紹一下如何使用 JekyII 來構建站點。

以最簡單的方式，GitHub Pages + JekyII 將以最漂亮的主題來呈現你的 README.md，例如，你可以看一下 about-github 的自述檔案。

在 GitHub 的 my site 中，點選 setting，開啟 GitHub Pages，選擇一個 JekyII 主題

就會得到一個 Jekyll 主題頁面：

它的優點是：

• 輕量級網站，響應速度快

• 網站更安全，無資料庫，無動態資料

• 無需通入過多精力維護

注意，他需要 Ruby 在本地執行，Mac 自帶，Windows 使用者自行安裝。

12把 GitHub 當 CMS 用

你的網站需要顯示一些文字，但是你還不想直接放在 HTML 裡面，那你可以把 GitHub 作為你儲存內容的一個地方。這樣，就可以讓任何一個非程式設計師通過修改 Markdown 來修改 HTML 網頁的內容。

我的方法是：在你的 GitHub 倉庫中使用 markdown 檔案來儲存文字。在你網站的前端用一個元件來抓取這些文字並呈現在網頁上。

我是玩 React 的，這裡有個<Markdown>元件，用以抓取，解析並呈現到 HTML 上。

class Markdown extends React.Component {

 constructor(props) {

 super(props);class Markdown extends React.Component {

    constructor(props) {

      super(props);

      

      // replace with your URL, obviously

      this.baseUrl = 'https://raw.githubusercontent.com/davidgilbertson/about-github/master/text-snippets';

      

      this.state = {

        markdown: '',

      };

    }

    componentDidMount() {

      fetch(`${this.baseUrl}/${this.props.url}`)

        .then(response => response.text())

        .then((markdown) => {

          this.setState({markdown});

        });

    }

    render() {

      return (

        <div dangerouslySetInnerHTML={{__html: marked(this.state.markdown)}} />

      );

    }

}

（/text-snippets 這個資料夾是儲存我的 markdown）

下面這段程式碼是上面元件的示例：

const Page = () => (

 <div className="page">

   <div className="about-us">

     <Markdown url="about-us.md" />

   </div>

   

   <div className="disclaimer">

     <p>A very important disclaimer:</p>

     

     <Markdown url="disclaimers/home-page-disclaimer.md" />

   </div>

 </div>

);

所以現在 GitHub 也是你的 CMS，無論你想要樣大小的文字都可以。

推薦一個 GitHub 工具

Octotree Chrome extension

它可以讓你在看任何倉庫時，獲得一個左邊的樹狀圖。

希望能夠對你有所幫助！

轉自猿份，侵刪。

雲端計算免費課程火熱開講中，5天運維經典課程免費學，會雲端計算的運維人才到底需要掌握哪些技術，未來前景發展怎麼樣？跟隨行業大咖一起剖根究底，點選文末“閱讀原文”或長按下方二維碼即可報名免費課程！抓住今年最後一次免費學習的機會，逆襲2019~~

PS:記得查收小編送你的免費大禮包呦~

福利 | 一萬多套PPT模板等你免費來拿！無條件領取！

免費送 | 1000多套簡歷模板免費拿，附贈簡歷製作教程！

免費領 | 《Shell指令碼 100例》電子書免費拿，運維必備乾貨~

▼▼點選【閱讀原文】，5天運維免費課程，開講在即！