#1 在GitHub.com上編輯代碼

先從一個(gè)大多數(shù)人都知道的開(kāi)始吧（盡管我是上個(gè)星期才知道的）

在GitHub上打開(kāi)一個(gè)文件（任何倉(cāng)庫(kù)的任何文件），在頁(yè)面的右上角有一個(gè)像小鉛筆的按鈕。點(diǎn)擊它，你就可以編輯文件了。當(dāng)你編輯完成，點(diǎn)擊Propose file change，GitHub將為你fork這個(gè)倉(cāng)庫(kù)，然后創(chuàng)建pull request。

你不再需要fork這個(gè)倉(cāng)庫(kù)，pull文件到本地，修改文件后再提交到GitHub創(chuàng)建一個(gè)pull request。

#2 粘貼圖片

你可以不僅限于用文字來(lái)評(píng)論或者bug描述。你可以直接復(fù)制一個(gè)圖片到剪貼板，當(dāng)你粘貼的時(shí)候，你的圖片將會(huì)自動(dòng)上傳到云，然后展示在頁(yè)面上。

#3 美化代碼

如果你想編寫(xiě)一個(gè)代碼塊，以三個(gè)反引號(hào)開(kāi)頭，GitHub會(huì)嘗試猜測(cè)你用的什么語(yǔ)言。

但是如果你直接粘貼一個(gè)段Vue，Typescript或者JSX代碼，你可以指定出來(lái)以得到正確的語(yǔ)法高亮。

注意第一行的 ```jsx :

意味著這段代碼可以正確的顯示：

(順便說(shuō)下，在gist中，如果你的gist文件后綴名是.jsx， 將自動(dòng)獲得JSX語(yǔ)法高亮)

這是所有支持?的語(yǔ)法列表.

#4 在PRs中巧妙關(guān)閉issues

如果你創(chuàng)建了一個(gè)pull request來(lái)修復(fù)問(wèn)題單 #234. 你可以在PR的描述中寫(xiě)fixes #234。

當(dāng)合并PR的時(shí)候，會(huì)自動(dòng)關(guān)閉那個(gè)issue。是不是很方便：）

#5 鏈接到評(píng)論

是否想要鏈接到某個(gè)特定的評(píng)論？

點(diǎn)擊評(píng)論框用戶名旁邊的時(shí)間，就可以得到鏈接了。

#6 鏈接到代碼

是否想要鏈接到一行特定代碼？

打開(kāi)一個(gè)文件，點(diǎn)擊代碼左邊的行號(hào)，或者按住shift選擇多行。

分享這個(gè)URL，可以鏈接到這些代碼。如果文件被修改了，會(huì)發(fā)生變化嗎？不會(huì)，因?yàn)檫@是永久鏈接。

#7 靈活使用GitHub地址欄

GitHub的頁(yè)面導(dǎo)航已經(jīng)做的很好了，但是有些時(shí)候直接在導(dǎo)航欄中輸入會(huì)更快。比如你想跳轉(zhuǎn)到一個(gè)分支，看下它與主干的區(qū)別，就可以直接在你倉(cāng)庫(kù)的后面輸入/compare/branch-name：

與主干對(duì)比，兩個(gè)分支對(duì)比，輸入

對(duì)于快捷鍵的話，ctrl+L或者cmd+L` 光標(biāo)將跳轉(zhuǎn)到地址欄，這使得在兩個(gè)分支切換變得很方便。

#8 Create lists, in issues

你是否想在你提交的issue中看到復(fù)選框列表？

以及在issue列表中，看到“2/5”的進(jìn)度條？

交互式復(fù)選框語(yǔ)法如下：

 - [ ] Screen width (integer)
 - [x] Service worker support
 - [x] Fetch support
 - [ ] CSS flexbox support
 - [ ] Custom elements 

在項(xiàng)目管理界面使用也一樣：

如果你不知道項(xiàng)目管理是什么，我接下來(lái)就講。

#9 在GitHub中進(jìn)行項(xiàng)目管理

我在大項(xiàng)目中通常使用Jira來(lái)管理項(xiàng)目，對(duì)于單人項(xiàng)目我一般用Trello。

就在幾周前我了解到GitHub也提供項(xiàng)目管理。就在你的倉(cāng)庫(kù)中找到Projects，我都有點(diǎn)想把我在Trello的工作項(xiàng)移植過(guò)來(lái)了。

在GitHub中一模一樣的項(xiàng)目管理：

如果你想把你的issues添加到你的項(xiàng)目管理中來(lái)，你可以在頁(yè)面右上方點(diǎn)擊Add Cards搜索你想添加的，這里的搜索有特殊的語(yǔ)法，比如輸入is:pr is:open，意味著你可以找到所有打開(kāi)的PRs，如果你想修復(fù)bugs，輸入label:bug。

你可以把存在的notes轉(zhuǎn)換成issues。

或者在issues界面，把issue添加到項(xiàng)目管理中。

先在項(xiàng)目管理中把類別分好，再確定你把issues放入那個(gè)類目中。

缺點(diǎn)

我在最近的三周開(kāi)始使用GitHub來(lái)替代Jira來(lái)進(jìn)行管理項(xiàng)目（一個(gè)小項(xiàng)目）。越用越喜歡。

但是我不敢想象用它來(lái)進(jìn)行敏捷開(kāi)發(fā)，因?yàn)槲蚁胍_的評(píng)估和計(jì)算所有事物。

好消息是，GitHub的項(xiàng)目管理功能很清爽簡(jiǎn)潔，不需要太大的學(xué)習(xí)成本，就可以輕松上手。

ZenHub彌補(bǔ)了GitHub不足，可以評(píng)估自己的issues，創(chuàng)建依賴，還有速度和燃盡圖?？雌饋?lái)很牛逼。

了解更多

#10 GitHub wiki

非結(jié)構(gòu)化網(wǎng)頁(yè)集合，也就是說(shuō)你所有的網(wǎng)頁(yè)沒(méi)有從屬關(guān)系，沒(méi)有上一段和下一段按鈕，也沒(méi)有面包屑導(dǎo)航。

我先創(chuàng)建一個(gè)GitHub wiki，我從NodeJS文檔找了幾個(gè)頁(yè)面作為wiki的頁(yè)面，然后創(chuàng)建一個(gè)側(cè)邊導(dǎo)航來(lái)模擬實(shí)際的結(jié)構(gòu)。側(cè)邊欄一直存在，不會(huì)對(duì)當(dāng)前頁(yè)面高亮。

鏈接需要手動(dòng)維護(hù)，但總的來(lái)說(shuō)已經(jīng)滿足需求了。 查看Demo 。

我的建議：如果你的 README.md 文件太大了，而且你需要幾個(gè)頁(yè)面來(lái)更詳細(xì)的描述你的文檔，那么GitHub wiki是很適合你的。如果你的頁(yè)面需要導(dǎo)航或者結(jié)構(gòu)化，那么你需要想其他辦法了。

#11 靜態(tài)博客

你可能已經(jīng)知道你可以使用GitHub部署靜態(tài)網(wǎng)頁(yè)，這個(gè)部分我將告訴你用Jekyll（簡(jiǎn)單博客靜態(tài)網(wǎng)站生成器）生成靜態(tài)網(wǎng)頁(yè)

非常簡(jiǎn)單，Jekyll會(huì)用漂亮的主題去渲染你的README.md文件。比如這個(gè)README頁(yè)面（鏈接）:

點(diǎn)擊設(shè)置，選擇Jekyll主題。

我將得到一個(gè)Jekyll主題的頁(yè)面:

我們通過(guò)一個(gè)markdown文件就創(chuàng)建一個(gè)靜態(tài)網(wǎng)站，編輯修改非常方便，所以GitHub基本上可以當(dāng)內(nèi)容管理系統(tǒng)來(lái)用了。

React和Bootstrap的網(wǎng)站已經(jīng)怎么做了。

#12 用GitHub作為CMS(內(nèi)容管理系統(tǒng))

你有一個(gè)網(wǎng)站需要展示一些文本，但是你又不想把文本存成HTML。

您想將文本塊存儲(chǔ)在某個(gè)地方，而且可以很方便的編輯，且不需要開(kāi)發(fā)。

我的建議是文本寫(xiě)在markdown文件中，然后存到你的倉(cāng)庫(kù)。接著在前端寫(xiě)一個(gè)組件來(lái)請(qǐng)求文件然后渲染。

我用喜歡用React，所以這是一個(gè)React組件的例子：得到markdown文件路徑，然后請(qǐng)求，解析，最后渲染成HTML。

class Markdown extends React.Component {

constructor(props) {

  super(props);

  // 這里需要替換成你的url

  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 (

  


  );

}

} 

(我用的是marked 插件來(lái)解析markdown)

然后你可以這樣使用組件:

const Page = () => (


    
A very important disclaimer:


    
); 

至此，你可以把GitHub當(dāng)成你的CMS了。

GitHub 谷歌插件

我只用這個(gè) octobox谷歌插件一段時(shí)間了，現(xiàn)在我推薦給你。

它在左側(cè)生成一個(gè)面板，通過(guò)樹(shù)形結(jié)構(gòu)來(lái)瀏覽你的倉(cāng)庫(kù)。

這個(gè)視屏了解如何使用 octobox谷歌插件。

說(shuō)到顏色，我怎么容忍一個(gè)蒼白的GitHub呢？

插件組合： Stylish（這個(gè)插件允許你把主題應(yīng)用到任何一個(gè)網(wǎng)站） 和 GitHub 黑色主題。 為了看上去統(tǒng)一，把谷歌開(kāi)發(fā)工具換成黑色（這個(gè)是內(nèi)置的，在設(shè)置中打開(kāi)），然后換成Atom One Dark 黑色主題 。

最后

就這些。 希望對(duì)你有用，祝你生活愉快。