引言

我們平時(shí)的工作中，github是必不可少的代碼托管平臺(tái)，但是大多數(shù)同學(xué)也只是把它做為了托管代碼的地方，并沒有合理的去運(yùn)用。

[[330855]]

其實(shí)github里面有非常多好玩或者有趣的地方的。當(dāng)然，這些技巧也能對(duì)你的工作效率有很大的提升。

我整理了一些自己平時(shí)用的比較多的一些功能/技巧，也希望能給你的工作帶來(lái)一些幫助!

Gist

可能很多人并沒有聽過(guò)Gist。它在github首頁(yè)的子目錄下：

 

這是github提供的一個(gè)非常有用的功能。Gist作為一個(gè)粘貼數(shù)據(jù)的工具，就像 Pastie 網(wǎng)站一樣，可以很容易地將數(shù)據(jù)粘貼在Gist網(wǎng)站中，并在其他網(wǎng)頁(yè)中引用Gist中粘貼的數(shù)據(jù)。

作為GitHub的一個(gè)子網(wǎng)站，很自然地，Gist使用Git版本庫(kù)對(duì)粘貼數(shù)據(jù)進(jìn)行維護(hù)，這是非常方便的。

進(jìn)入Gist網(wǎng)站的首頁(yè)，就會(huì)看到一個(gè)大大的數(shù)據(jù)粘貼對(duì)話框. 只要提供一行簡(jiǎn)單的描述、文件名，并粘貼文件內(nèi)容，即可創(chuàng)建一個(gè)新的粘貼。

 

 

 

每一個(gè)新的粘貼稱為一個(gè)Gist，并擁有一個(gè)單獨(dú)的URL。

當(dāng)一個(gè)粘貼創(chuàng)建完畢后，會(huì)顯示新建立的Gist頁(yè)面, 點(diǎn)擊其中的embed(嵌入)按鈕，就會(huì)顯示一段用于嵌入其他網(wǎng)頁(yè)的JavaScript代碼，將上面的JavaScript代碼嵌入到網(wǎng)頁(yè)中，即可在相應(yīng)的網(wǎng)頁(yè)中嵌入來(lái)自Gist的數(shù)據(jù)，并保持語(yǔ)法高亮等功能。

 

 

 

通過(guò) web 界面創(chuàng)建文件

在有些時(shí)候，我們可能不太想用本地創(chuàng)建文件，然后通過(guò)git推送到遠(yuǎn)程這種方式去創(chuàng)建文件，那么有沒有簡(jiǎn)單高效的一種做法呢?

很簡(jiǎn)單，通過(guò)github提供的 web 界面創(chuàng)建方式(create new file)去創(chuàng)建就可以了：

 

 

 

 

 

文件查找

有時(shí)，我們想在一個(gè)龐大的 git 倉(cāng)庫(kù)中去查找某一個(gè)文件，如果一個(gè)一個(gè)的去看，可能需要一段時(shí)間(我之前時(shí)常感覺在github倉(cāng)庫(kù)中去查找一個(gè)文件真的好麻煩)。

其實(shí) github 提供了一個(gè)快捷的查找方式：按鍵盤'T'鍵激活文件查找器，按 ⬆️ 和 ⬇️ 上下選擇文件，當(dāng)然也可以輸入你要查找的文件名，快速查找。

 

github cli(命令行) 

 

 

 

當(dāng)我們將本地代碼提交到 GitHub 后，就可以在 GitHub 網(wǎng)站上查看到各種的交互信息了，例如其它開發(fā)者提的 Issue，或者提交的代碼合并請(qǐng)求等。但是，如果我們能在命令行上直接查看、處理這些信息，那么這一定非?？帷?/p>

下面讓我?guī)銖?0 到 1 上手GitHub CLI吧!

安裝

要安裝 GitHub CLI 非常簡(jiǎn)單。

在macOS下面可以使用Homebrew工具進(jìn)行安裝：

 

$ brew install github/gh/gh 
# 如果需要更新執(zhí)行下面的命令即可 
$ brew update && brew upgrade gh 

在Windows下可以使用如下命令行進(jìn)行安裝：

 

scoop bucket add github-gh https://github.com/cli/scoop-gh.git 
scoop install gh 

安裝完成后直接在命令行中執(zhí)行g(shù)h命令，看到如下圖所示的信息就說(shuō)明已經(jīng)安裝成功了：

 

其他平臺(tái)的安裝參考官方文檔即可: https://cli.github.com/manual/installation

 

 

使用

使用的時(shí)候需要我們進(jìn)行一次授權(quán)：

 

 

 

在命令行中輸入回車鍵就會(huì)在瀏覽器中打開授權(quán)頁(yè)面，點(diǎn)擊授權(quán)即可：

 

授權(quán)成功回到命令行，我們發(fā)現(xiàn)通過(guò)gh issue list指令已經(jīng)拿到了issue列表：

 

 

我這邊列舉幾個(gè)常用的操作。

創(chuàng)建 issue

我們通過(guò) CLI 先交互式地提交了一條issue，issue的 Body 需要通過(guò)nano編輯。

 

 

 

篩選 issue

issue列表往往存在有太多的條目，通過(guò)指定條件篩選issue是一個(gè)很常見的需求：

 

如上圖所示，它將篩選出label是動(dòng)態(tài)規(guī)劃的所有issue

 

 

快速瀏覽

找到一個(gè)你關(guān)注的issue過(guò)后，要想查看該issue的具體信息，可以使用如下命令在瀏覽器中快速將issue的詳細(xì)信息頁(yè)面打開：

 

接下來(lái)可以選擇打開網(wǎng)頁(yè)，預(yù)覽并提交。當(dāng)然，我們也可以選擇直接在命令行進(jìn)行提交。

 

 

這里我只是簡(jiǎn)單介紹了issue相關(guān)的幾個(gè)常用命令，更多的使用方式可以查看官方文檔了解更多：https://cli.github.com/manual/examples。

GitHub Actions 

 

GitHub Actions 是 GitHub 的持續(xù)集成服務(wù)。

 

 

通常持續(xù)集成是由很多操作組成的，比如抓取代碼、執(zhí)行腳本、登錄遠(yuǎn)程服務(wù)器、發(fā)布到第三方服務(wù)等。GitHub將這些操作稱作actions。

如果你需要某個(gè) action，不必自己寫復(fù)雜的腳本，直接引用他人寫好的 action 即可，整個(gè)持續(xù)集成過(guò)程，就變成了一個(gè) actions 的組合。

GitHub 做了一個(gè)官方市場(chǎng)，可以搜索到他人提交的 actions：

 

下面分別從基本概念和發(fā)布流程詳細(xì)說(shuō)明一下GitHub Actions。

 

 

基本概念

• workflow (流程)：持續(xù)集成一次運(yùn)行的過(guò)程，就是一個(gè) workflow。
• job (任務(wù))：一個(gè) workflow 由一個(gè)或多個(gè) jobs 構(gòu)成，含義是一次持續(xù)集成的運(yùn)行，可以完成多個(gè)任務(wù)。
• step(步驟)：每個(gè) job 由多個(gè) step 構(gòu)成，一步步完成。
• action (動(dòng)作)：每個(gè) step 可以依次執(zhí)行一個(gè)或多個(gè)命令(action)。

實(shí)例：React 項(xiàng)目發(fā)布到 GitHub Pages

這里通過(guò) GitHub Actions 構(gòu)建一個(gè) React 項(xiàng)目，并發(fā)布到 GitHub Pages。最終代碼都在這個(gè)倉(cāng)庫(kù)里面，發(fā)布后的網(wǎng)址為https://jack-cool.github.io/github-actions-demo/。

生成密鑰

由于示例需要將構(gòu)建成果發(fā)到GitHub倉(cāng)庫(kù)，因此需要 GitHub 密鑰。按照官方文檔，生成一個(gè)密鑰。然后，將這個(gè)密鑰儲(chǔ)存到當(dāng)前倉(cāng)庫(kù)的Settings/Secrets里面。

 

我這里環(huán)境變量的名字用的是ACCESS_TOKEN。

 

 

創(chuàng)建 React 項(xiàng)目

使用create-react-app初始化一個(gè) React 應(yīng)用：

 

$ npx create-react-app github-actions-demo 
$ cd github-actions-demo 

在項(xiàng)目的package.json中，添加一個(gè)homepage字段(表示該應(yīng)用發(fā)布后的根目錄)

 

"homepage": "https://jack-cool.github.io/github-actions-demo" 

創(chuàng)建 workflow 文件

在項(xiàng)目的.github/workflows目錄，創(chuàng)建一個(gè)workflow文件，這里用的是ci.yml。

上面已經(jīng)提到GitHub有一個(gè)官方的市場(chǎng)，這里我們直接采用的是JamesIves/github-pages-deploy-action：

 

name: GitHub Actions Build and Deploy Demo 
on: 
  push: 
    branches: 
      - master 
jobs: 
  build-and-deploy: 
    runs-on: ubuntu-latest 
    steps: 
      # 拉取代碼 
      - name: Checkout 
        uses: actions/checkout@v2 # If you're using actions/checkout@v2 you must set persist-credentials to false in most cases for the deployment to work correctly. 
        with: 
          persist-credentials: false 
      # 安裝依賴、打包 
      - name: Install and Build 
        run: | 
          npm install 
          npm run-script build 
 
      # 部署到 GitHub Pages 
      - name: Deploy 
        uses: JamesIves/github-pages-deploy-action@releases/v3 
        with: 
          ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }} 
          BRANCH: gh-pages 
          FOLDER: build 

這里梳理下配置文件都做了些什么：

1、 拉取代碼。這里用的是 GitHub 官方的 action: actions/checkout@v2

2、安裝依賴、打包

3、部署到GitHub Pages。使用了第三方作者的 action：JamesIves/github-pages-deploy-action@releases/v3。我這里詳細(xì)介紹下這個(gè) action：

使用 with 參數(shù)向環(huán)境中傳入了三個(gè)環(huán)境變量：

ACCESS_TOKEN：讀取 GitHub 倉(cāng)庫(kù) secrets 的 ACCESS_TOKEN 變量，也就是我們前面設(shè)置的

BRANCH：部署分支 gh-pages(GitHub Pages 讀取的分支)

FOLDER：需要部署的文件在倉(cāng)庫(kù)中的路徑，也就是我們使用 npm run build 生成的打包目錄

這里有一點(diǎn)需要注意：我使用的是 v3 版本，需要使用 with 參數(shù)傳入環(huán)境變量，且需要自行構(gòu)建;網(wǎng)上常見的教程使用的是 v2 版本，使用 env 參數(shù)傳入環(huán)境變量，不需要自行構(gòu)建，可使用 BUILD_SCRIPT 環(huán)境變量傳入構(gòu)建腳本。

到這里，配置工作就完成了。

以后，你每次有代碼 push 到 master 分支時(shí)，GitHub 都會(huì)開始自動(dòng)構(gòu)建。

分享具體代碼

平時(shí)我們可能有一行非常好的代碼，想分享給其他同事看，那么可以在url后面加上#L 行號(hào)，比如：https://github.com/Jack-cool/rest_node_api/blob/master/app/models/users.js#L17，效果如下圖：

 

 

 

如果是想分享某幾行的，可以在url后面添加如#L 開始行號(hào)-L 結(jié)束行號(hào)，像https://github.com/Jack-cool/rest_node_api/blob/master/app/models/users.js#L17-L31，效果如下圖：

 

 

 

通過(guò)提交的msg自動(dòng)關(guān)閉 issue

我們先來(lái)看一下關(guān)閉issues的關(guān)鍵字：

• close
• closes
• closed
• fix
• fixes
• fixed
• resolve
• resolves
• resolved

關(guān)閉同一個(gè)倉(cāng)庫(kù)中的 issue

如果是在同一個(gè)倉(cāng)庫(kù)中去關(guān)閉issue的話，可以使用上面列表中的關(guān)鍵字并在其后加上issue編號(hào)的引用。

例如一個(gè)提交信息中含有fixes #26，那么一旦這次提交被合并到默認(rèn)分支，倉(cāng)庫(kù)中的 26 號(hào)issue就會(huì)自動(dòng)關(guān)閉。

如果這次提交不是在默認(rèn)分支，那么這個(gè)issue將不會(huì)關(guān)閉，但是在它下面會(huì)有一個(gè)提示信息。這個(gè)提示信息會(huì)提示你某人添加了一個(gè)提交提到了這個(gè)issue，如果你將它合并到默認(rèn)分支就會(huì)關(guān)閉該issue。

關(guān)閉不同倉(cāng)庫(kù)中的 issue

如果想關(guān)閉另一個(gè)倉(cāng)庫(kù)中的issue，可以使用username/repository/#issue_number這樣的語(yǔ)法。

例如，提交信息中包含closes Jack-cool/fe_interview/issues/113，將會(huì)關(guān)閉fe_interview中的113號(hào)issue。

關(guān)閉其他倉(cāng)庫(kù)issue的前提是你將代碼push到了對(duì)應(yīng)的倉(cāng)庫(kù)

查看項(xiàng)目的訪問(wèn)數(shù)據(jù)

在自己的項(xiàng)目下，點(diǎn)擊 Insights，然后再點(diǎn)擊 Traffic，里面有 Referring sites 和 Popular content 的詳細(xì)數(shù)據(jù)和排名。

 

 

 

其中 Referring sites 表示大家都是從什么網(wǎng)站來(lái)到你的項(xiàng)目的，Popular content 則表示大家經(jīng)?？茨沩?xiàng)目的哪些文件。

任務(wù)清單

有時(shí)候我們需要標(biāo)記一些任務(wù)清單去記錄我們接下來(lái)要做的事情。

創(chuàng)建任務(wù)列表

issues 和 pull requests 里可以添加復(fù)選框，語(yǔ)法如下(注意空白符):

 

- [ ] 步驟一 
- [ ] 步驟二 
  - [ ] 步驟2.2 
  - [ ] 步驟2.3 
- [ ] 步驟三 

效果如下：

 

 

 

普通的markdown文件中可創(chuàng)建只讀的任務(wù)列表，比如在README.md中添加 TODO list:

 

### 接下來(lái)要做的事 🦀 
- [x] 數(shù)據(jù)結(jié)構(gòu)與算法 
- [ ] react源碼 
- [ ] docker 

效果如下：

 

 

 

對(duì)任務(wù)排序

你可以單擊任務(wù)左邊的復(fù)選框并拖放至新位置，對(duì)單一評(píng)論中的任務(wù)列表重新排序。

 

issues 模版和 pull request 模版 

這里以issue模版舉例，pr模板類似

這個(gè)issue模版我是在給element ui提issue時(shí)發(fā)現(xiàn)的：

 

在GitHub中，代碼庫(kù)維護(hù)者如果提供有定制的 issues 模版和pull request 模版，可以讓人們有針對(duì)性的提供某類問(wèn)題的準(zhǔn)確信息，從而在后續(xù)維護(hù)中能夠進(jìn)行有效地對(duì)話和改進(jìn)，而不是雜亂無(wú)章的留言。

創(chuàng)建issues模版

• 在代碼庫(kù)根目錄新建.github目錄
• 在 .github 目錄下添加 ISSUE_TEMPLATE.md 文件作為 issues 默認(rèn)模版。當(dāng)創(chuàng)建 issue 時(shí)，系統(tǒng)會(huì)自動(dòng)引用該模版。

如我在項(xiàng)目根目錄下新建了.github/ISSUE_TEMPLATE.md：

 

## 概述 
 
bug 概述 
 
## 重現(xiàn)步驟 
 
1. aaa 
2. bbb 
3. ccc 
 
## Bug 行為 
 
Bug 的表現(xiàn)行為 
 
## 期望行為 
 
軟件的正確行為 
 
## 附件 
 
附上圖片或日志，日志請(qǐng)用格式： 
 
> ``` 
> 日志內(nèi)容 
> ``` 

在該倉(cāng)庫(kù)新建issue時(shí)就會(huì)出現(xiàn)上面預(yù)設(shè)的issue模版：

 

GitHub Wiki 

 

大家平時(shí)的項(xiàng)目，一般都使用 Markdown 來(lái)編寫項(xiàng)目文檔和 README.md 等。Markdown 一般情況下能夠滿足我們的文檔編寫需求，如果使用得當(dāng)?shù)脑?，效果也非常棒。不過(guò)當(dāng)項(xiàng)目文檔比較長(zhǎng)的時(shí)候，閱讀體驗(yàn)可能就不是那么理想了，這種情況我想大家應(yīng)該都曾經(jīng)遇到過(guò)。

GitHub 每一個(gè)項(xiàng)目都有一個(gè)單獨(dú)完整的 Wiki 頁(yè)面，我們可以用它來(lái)實(shí)現(xiàn)項(xiàng)目信息管理，為項(xiàng)目提供更加完善的文檔。我們可以把 Wiki 作為項(xiàng)目文檔的一個(gè)重要組成部分，將冗長(zhǎng)、具體的文檔整理成 Wiki，將精簡(jiǎn)的、概述性的內(nèi)容，放到項(xiàng)目中或是 README.md 里。

關(guān)于Wiki的使用，這里就不展開說(shuō)明了，具體可以參考官方文檔

查看提交記錄熱度圖

查看文件時(shí)，可以按b查看提交記錄和顯示每一行的最近修改情況的熱度圖。它會(huì)告訴你每行代碼的提交人，并且提供一個(gè)可以點(diǎn)擊的鏈接去查看完整提交。

 

 

 

中間有一個(gè)橙色的豎條。顏色越鮮艷，更改的時(shí)間就越近。

Git Submodules vs Git Subtrees 

 

為什么使用 Submodules or Subtrees?

團(tuán)隊(duì)中一般都會(huì)有公共的代碼庫(kù)，submodule和subtrees可以讓我們?cè)诓煌?xiàng)目中使用這些公共的代碼，避免因拷貝產(chǎn)生重復(fù)代碼，甚至導(dǎo)致相同代碼出現(xiàn)不同修改產(chǎn)生多個(gè)版本。

區(qū)別

subtree 和 submodule 的目的都是用于 git 子倉(cāng)庫(kù)管理，二者的主要區(qū)別在于，subtree 屬于拷貝子倉(cāng)庫(kù)，而 submodule 屬于引用子倉(cāng)庫(kù)。

使用

關(guān)于實(shí)踐，官方文檔寫的已經(jīng)非常清楚了，我這里直接放上鏈接：

• submodule: https://git-scm.com/book/en/v2/Git-Tools-Submodules
• subtree: https://einverne.github.io/post/2020/04/git-subtree-usage.html

GitHub 插件推薦 

 

 

 

GitHub的插件有很多很多，這里就推薦一下我常用的三個(gè)插件。

Octotree

 

 

 

 

我們有時(shí)經(jīng)常需要在github上查找文件，但如果文件結(jié)構(gòu)嵌套很深，查找起來(lái)是非常麻煩的，這時(shí)使用Octotree可以在倉(cāng)庫(kù)左側(cè)顯示當(dāng)前項(xiàng)目的目錄結(jié)構(gòu)，讓你可以在github上像使用Web IDE一樣方便。

 

 

 

isometric-contributions

 

 

這個(gè)是可以更酷炫的 3D 立體式渲染github貢獻(xiàn)。

 

 

Enhanced GitHub

 

 

這個(gè)插件支持在倉(cāng)庫(kù)中顯示倉(cāng)庫(kù)大小、每個(gè)文件的大小以及每個(gè)文件的下載鏈接。

 

 

GitHub 吉祥物 Octocat

哈哈 這個(gè)就比較有意思了 我也是剛知道原來(lái)github也有自己的吉祥物。

這里貼下網(wǎng)站，順便選了幾個(gè)感覺很萌的，大家也可以去上面選幾個(gè)作為自己的頭像什么的。

[[330860]]

 

 

[[330861]]

[[330862]]