你可能不知道的15个有用的 Github 功能

布满荆棘的人生 2023-02-25 02:08 81阅读 0赞

## 引言 ???? ##

我们平时的工作中，`github`是必不可少的代码托管平台，但是大多数同学也只是把它做为了托管代码的地方，并没有合理的去运用。

其实`github`里面有非常多好玩或者有趣的地方的。当然，这些技巧也能对你的工作效率有很大的提升。

我整理了一些自己平时用的比较多的一些功能/技巧，也希望能给你的工作带来一些帮助！

## Gist ???? ##

可能很多人并没有听过`Gist`。它在`github`首页的子目录下：![format_png][]

这是`github`提供的一个非常有用的功能。`Gist`作为一个粘贴数据的工具，就像 `Pastie` 网站一样，可以很容易地将数据粘贴在`Gist`网站中，并在其他网页中引用`Gist`中粘贴的数据。

作为`GitHub`的一个子网站，很自然地，`Gist`使用`Git`版本库对粘贴数据进行维护，这是非常方便的。

进入`Gist`网站的首页，就会看到一个大大的数据粘贴对话框. 只要提供一行简单的描述、文件名，并粘贴文件内容，即可创建一个新的粘贴。![format_png 1][]

每一个新的粘贴称为一个`Gist`，并拥有一个单独的`URL`。

当一个粘贴创建完毕后，会显示新建立的`Gist`页面, 点击其中的`embed`（嵌入）按钮，就会显示一段用于嵌入其他网页的`JavaScript`代码，将上面的`JavaScript`代码嵌入到网页中，即可在相应的网页中嵌入来自`Gist`的数据，并保持语法高亮等功能。![format_png 2][]

## 通过 web 界面创建文件 ???? ##

在有些时候，我们可能不太想用本地创建文件，然后通过`git`推送到远程这种方式去创建文件，那么有没有简单高效的一种做法呢？

很简单，通过`github`提供的 web 界面创建方式（`create new file`）去创建就可以了：

![format_png 3][]

## 文件查找 ???? ##

有时，我们想在一个庞大的 git 仓库中去查找某一个文件，如果一个一个的去看，可能需要一段时间（我之前时常感觉在`github`仓库中去查找一个文件真的好麻烦）。

其实 github 提供了一个快捷的查找方式：按键盘'T'键激活文件查找器，按 ⬆️ 和 ⬇️ 上下选择文件，当然也可以输入你要查找的文件名，快速查找。![format_png 4][]

## github cli(命令行) ???? ##

![format_png 5][]

当我们将本地代码提交到 `GitHub` 后，就可以在 `GitHub` 网站上查看到各种的交互信息了，例如其它开发者提的 `Issue`，或者提交的代码合并请求等。但是，如果我们能在命令行上直接查看、处理这些信息，那么这一定非常酷。

下面让我带你从 0 到 1 上手`GitHub CLI`吧！

### 安装 ###

要安装 `GitHub CLI` 非常简单。

在`macOS`下面可以使用`Homebrew`工具进行安装：

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

在`Windows`下可以使用如下命令行进行安装：

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

安装完成后直接在命令行中执行`gh`命令，看到如下图所示的信息就说明已经安装成功了：![format_png 6][]其他平台的安装参考官方文档即可: `https://cli.github.com/manual/installation`

### 使用 ###

使用的时候需要我们进行一次授权：![format_png 7][]

在命令行中输入回车键就会在浏览器中打开授权页面，点击授权即可：![format_png 8][]授权成功回到命令行，我们发现通过`gh issue list`指令已经拿到了`issue`列表：![format_png 9][]

我这边列举几个常用的操作。

#### 创建 issue ####

我们通过 CLI 先交互式地提交了一条`issue`，`issue`的 `Body` 需要通过`nano`编辑。![format_png 10][]

#### 筛选 issue ####

`issue`列表往往存在有太多的条目，通过指定条件筛选`issue`是一个很常见的需求：![format_png 11][]如上图所示，它将筛选出`label`是`动态规划`的所有`issue`

#### 快速浏览 ####

找到一个你关注的`issue`过后，要想查看该`issue`的具体信息，可以使用如下命令在浏览器中快速将`issue`的详细信息页面打开：![format_png 12][]接下来可以选择打开网页，预览并提交。当然，我们也可以选择直接在命令行进行提交。

这里我只是简单介绍了`issue`相关的几个常用命令，更多的使用方式可以查看官方文档了解更多：`https://cli.github.com/manual/examples`。

## GitHub Actions ???? ##

![format_png 13][]`GitHub Actions` 是 `GitHub` 的持续集成服务。

通常`持续集成`是由很多操作组成的，比如抓取代码、执行脚本、登录远程服务器、发布到第三方服务等。`GitHub`将这些操作称作`actions`。

如果你需要某个 `action`，不必自己写复杂的脚本，直接引用他人写好的 `action` 即可，整个持续集成过程，就变成了一个 `actions` 的组合。

`GitHub` 做了一个官方市场，可以搜索到他人提交的 `actions`：![format_png 14][]下面分别从基本概念和发布流程详细说明一下`GitHub Actions`。

### 基本概念 ###

*  `workflow` （流程）：持续集成一次运行的过程，就是一个 workflow。
 *  `job` （任务）：一个 workflow 由一个或多个 jobs 构成，含义是一次持续集成的运行，可以完成多个任务。
 *  `step`（步骤）：每个 job 由多个 step 构成，一步步完成。
 *  `action` （动作）：每个 step 可以依次执行一个或多个命令（action）。

### 实例：React 项目发布到 GitHub Pages ###

这里通过 `GitHub Actions` 构建一个 `React` 项目，并发布到 `GitHub Pages`。最终代码都在这个仓库里面，发布后的网址为`https://jack-cool.github.io/github-actions-demo/`。

#### 生成密钥 ####

由于示例需要将构建成果发到`GitHub`仓库，因此需要 `GitHub` 密钥。按照官方文档，生成一个密钥。然后，将这个密钥储存到当前仓库的`Settings/Secrets`里面。![format_png 15][]我这里环境变量的名字用的是`ACCESS_TOKEN`。

#### 创建 React 项目 ####

使用`create-react-app`初始化一个 React 应用：

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

在项目的`package.json`中，添加一个`homepage`字段（表示该应用发布后的根目录）

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

#### 创建 workflow 文件 ####

在项目的`.github/workflows`目录，创建一个`workflow`文件，这里用的是`ci.yml`。

上面已经提到`GitHub`有一个官方的市场，这里我们直接采用的是`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`。我这里详细介绍下这个 `action`：

使用 `with` 参数向环境中传入了三个环境变量：

*  `ACCESS_TOKEN`：读取 `GitHub` 仓库 `secrets` 的 `ACCESS_TOKEN` 变量，也就是我们前面设置的
 *  `BRANCH`：部署分支 `gh-pages`（`GitHub Pages` 读取的分支）
 *  `FOLDER`：需要部署的文件在仓库中的路径，也就是我们使用 `npm run build` 生成的打包目录

> ❝
> 
> 这里有一点需要注意：我使用的是 `v3` 版本，需要使用 `with` 参数传入环境变量，且需要自行构建；网上常见的教程使用的是 `v2` 版本，使用 `env` 参数传入环境变量，不需要自行构建，可使用 `BUILD_SCRIPT` 环境变量传入构建脚本。
> 
> ❞

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

以后，你每次有代码 `push` 到 `master` 分支时，`GitHub` 都会开始自动构建。

## 分享具体代码 ???? ##

平时我们可能有一行非常好的代码，想分享给其他同事看，那么可以在`url`后面加上`#L 行号`，比如：`https://github.com/Jack-cool/rest_node_api/blob/master/app/models/users.js#L17`，效果如下图：![format_png 16][]

如果是想分享某几行的，可以在`url`后面添加如`#L 开始行号-L 结束行号`，像`https://github.com/Jack-cool/rest_node_api/blob/master/app/models/users.js#L17-L31`，效果如下图：![format_png 17][]

## 通过提交的`msg`自动关闭 issue ???? ##

我们先来看一下关闭`issues`的关键字：

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

### 关闭同一个仓库中的 issue ###

如果是在同一个仓库中去关闭`issue`的话，可以使用上面列表中的关键字并在其后加上`issue`编号的引用。

例如一个提交信息中含有`fixes #26`，那么一旦这次提交被合并到默认分支，仓库中的 26 号`issue`就会自动关闭。

> ❝
> 
> 如果这次提交不是在默认分支，那么这个`issue`将不会关闭，但是在它下面会有一个提示信息。这个提示信息会提示你某人添加了一个提交提到了这个`issue`，如果你将它合并到默认分支就会关闭该`issue`。
> 
> ❞

### 关闭不同仓库中的 issue ###

如果想关闭另一个仓库中的`issue`，可以使用`username/repository/#issue_number`这样的语法。

例如，提交信息中包含`closes Jack-cool/fe_interview/issues/113`，将会关闭`fe_interview`中的`113`号`issue`。

> ❝
> 
> 关闭其他仓库`issue`的前提是你将代码`push`到了对应的仓库
> 
> ❞

## 查看项目的访问数据 ???? ##

在自己的项目下，点击 `Insights`，然后再点击 `Traffic`，里面有 `Referring sites` 和 `Popular content` 的详细数据和排名。![format_png 18][]

其中 `Referring sites` 表示大家都是从什么网站来到你的项目的，`Popular content` 则表示大家经常看你项目的哪些文件。

## 任务清单 ???? ##

有时候我们需要标记一些任务清单去记录我们接下来要做的事情。

### 创建任务列表 ###

`issues` 和 `pull requests` 里可以添加复选框，语法如下（注意空白符）:

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

效果如下：![format_png 19][]

普通的`markdown`文件中可创建`只读`的任务列表，比如在`README.md`中添加 `TODO list`:

### 接下来要做的事 ????
    - [x] 数据结构与算法
    - [ ] react源码
    - [ ] docker

效果如下：![format_png 20][]

### 对任务排序 ###

你可以单击任务左边的复选框并拖放至新位置，对单一评论中的任务列表重新排序。![format_png 21][]

## `issues` 模版和 `pull request` 模版 ???? ##

> ❝
> 
> 这里以`issue`模版举例，`pr`模板类似
> 
> ❞

这个`issue`模版我是在给`element ui`提`issue`时发现的：![format_png 22][]

在`GitHub`中，代码库维护者如果提供有定制的 `issues` 模版和`pull request` 模版，可以让人们有针对性的提供某类问题的准确信息，从而在后续维护中能够进行有效地对话和改进，而不是杂乱无章的留言。

### 创建`issues`模版 ###

*  在代码库根目录新建`.github`目录
 *  在 `.github` 目录下添加 `ISSUE_TEMPLATE.md` 文件作为 `issues` 默认模版。当创建 `issue` 时，系统会自动引用该模版。

如我在项目根目录下新建了`.github/ISSUE_TEMPLATE.md`：

## 概述
    
    bug 概述
    
    ## 重现步骤
    
    1. aaa
    2. bbb
    3. ccc
    
    ## Bug 行为
    
    Bug 的表现行为
    
    ## 期望行为
    
    软件的正确行为
    
    ## 附件
    
    附上图片或日志，日志请用格式：
    
    > ```
    > 日志内容
    > ```

在该仓库新建`issue`时就会出现上面预设的`issue`模版：![format_png 23][]

## GitHub Wiki ???? ##

![format_png 24][]

大家平时的项目，一般都使用 `Markdown` 来编写项目文档和 `README.md` 等。`Markdown` 一般情况下能够满足我们的文档编写需求，如果使用得当的话，效果也非常棒。不过当项目文档比较长的时候，阅读体验可能就不是那么理想了，这种情况我想大家应该都曾经遇到过。

`GitHub` 每一个项目都有一个单独完整的 `Wiki` 页面，我们可以用它来实现项目信息管理，为项目提供更加完善的文档。我们可以把 `Wiki` 作为项目文档的一个重要组成部分，将冗长、具体的文档整理成 `Wiki`，将精简的、概述性的内容，放到项目中或是 `README.md` 里。

关于`Wiki`的使用，这里就不展开说明了，具体可以参考官方文档

## 查看提交记录热度图 ????‍???? ##

查看文件时，可以按`b`查看提交记录和显示每一行的最近修改情况的热度图。它会告诉你每行代码的提交人，并且提供一个可以点击的链接去查看完整提交。

![format_png 25][]

> ❝
> 
> 中间有一个橙色的竖条。颜色越鲜艳，更改的时间就越近。
> 
> ❞

## Git Submodules vs Git Subtrees ????‍???? ##

![format_png 26][]

### 为什么使用 Submodules or Subtrees? ###

团队中一般都会有公共的代码库，`submodule`和`subtrees`可以让我们在不同项目中使用这些公共的代码，避免因拷贝产生重复代码，甚至导致相同代码出现不同修改产生多个版本。

### 区别 ###

`subtree` 和 `submodule` 的目的都是用于 `git` 子仓库管理，二者的主要区别在于，`subtree` 属于拷贝子仓库，而 `submodule` 属于引用子仓库。

### 使用 ###

关于实践，官方文档写的已经非常清楚了，我这里直接放上链接：

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

## GitHub 插件推荐 ???? ##

![format_png 27][]

`GitHub`的插件有很多很多，这里就推荐一下我常用的三个插件。

### Octotree ###

![format_png 28][]

我们有时经常需要在`github`上查找文件，但如果文件结构嵌套很深，查找起来是非常麻烦的，这时使用`Octotree`可以在仓库左侧显示当前项目的目录结构，让你可以在`github`上像使用`Web IDE`一样方便。![format_png 29][]

### isometric-contributions ###

![format_png 30][]这个是可以更酷炫的 3D 立体式渲染`github`贡献。![format_png 31][]

### Enhanced GitHub ###

![format_png 32][]这个插件支持在仓库中显示仓库大小、每个文件的大小以及每个文件的下载链接。![format_png 33][]

## GitHub 吉祥物 `Octocat` ???? ##

哈哈 这个就比较有意思了 我也是刚知道原来`github`也有自己的吉祥物。

这里贴下网站，顺便选了几个感觉很萌的，大家也可以去上面选几个作为自己的头像什么的。![format_png 34][]

![format_png 35][] ![format_png 36][]

### 参考 ###

*  阮一峰老师 《GitHub Actions 入门教程》

##  ##

## ❤️ 看完三件事 ##

如果你觉得这篇内容对你挺有启发，我想邀请你帮我三个小忙：

1.  点赞，让更多的人也能看到这篇内容（收藏不点赞，都是耍流氓 -\_-）
2.  关注公众号「前端劝退师」，不定期分享原创知识。
3.  也看看其它文章

![format_png 37][]

劝退师个人微信：**huab119**

也可以来我的`GitHub`博客里拿所有文章的源文件：

**前端劝退指南**：https://github.com/roger-hiro/BlogFN 一起玩耍呀。~

[format_png]: /images/20230209/e6c7b4e7b82e457d98774273b1338b96.png
[format_png 1]: /images/20230209/0dea2ac1401e4eb5b74d9876e0403c2e.png
[format_png 2]: /images/20230209/92e9e6a5053f471db47d9e78140fea29.png
[format_png 3]: /images/20230209/db0841d6e3c04583ab038d83664acc9d.png
[format_png 4]: /images/20230209/ae6ba327e35d4ba0ab98b72222e77467.png
[format_png 5]: /images/20230209/126ec178b57e479abe61e4113a991e96.png
[format_png 6]: /images/20230209/1e09cd65383a4d2aa5cef8c9a1e5bbc7.png
[format_png 7]: /images/20230209/96d886facbf047bea3eeabdca21e94f7.png
[format_png 8]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9MTnJXbDRuNVhJSTUxOEpTNzd5Q0Z0NkVCYXRLOVhHT3c1VDJaVE1MY3U3elZQREdkc2VyaWJnaWFYTE56SmtZc1ZXYlBFNUpjM0dhRFhqbFZleVl1QnhBLzY0MA?x-oss-process=image/format,png
[format_png 9]: /images/20230209/e1f6d963191548d489506085cfbe39fc.png
[format_png 10]: /images/20230209/4f9c383b294e485fa117a1c2facf9b69.png
[format_png 11]: /images/20230209/140193d853414bf89ba22bd3309f8079.png
[format_png 12]: /images/20230209/ae45bc6dd3f943ff8a93fb684018dea0.png
[format_png 13]: /images/20230209/6a82defc4b8a4e568052d52b4e4fadc3.png
[format_png 14]: /images/20230209/e56d86c7909f497ea049b383e5c1b4b5.png
[format_png 15]: /images/20230209/fa17db78046942478cd453ad7da88c08.png
[format_png 16]: /images/20230209/bd98469e7fb94bd999172a21c984e370.png
[format_png 17]: /images/20230209/819183e862fa43efa142399166d1519f.png
[format_png 18]: /images/20230209/3f719f4303b8467aae73a585c4f31bc8.png
[format_png 19]: /images/20230209/1c2d37e3cc734e8a92f0a2bb93badc6c.png
[format_png 20]: /images/20230209/9afb522c008a4dae88b0bdc0fbae2ee5.png
[format_png 21]: /images/20230209/ab07ec3fab5744dfa6844fc5d2e1110f.png
[format_png 22]: /images/20230209/4368283fb18543bc939c249de5c8f6f8.png
[format_png 23]: /images/20230209/c30ac1d8c9ad4d2ab90e5208be848ae8.png
[format_png 24]: /images/20230209/ebd9bbf39aef4c3a9f9b290d90f55d5c.png
[format_png 25]: /images/20230209/6378784f1feb4fab9d546cdbb91fd8f3.png
[format_png 26]: /images/20230209/204c77484248431fac5b3629e5c8f9d8.png
[format_png 27]: /images/20230209/e272dae1bb4c482e8d19b83ad8b68a8c.png
[format_png 28]: /images/20230209/3f73ed42506d4d818b311f524373e0cf.png
[format_png 29]: /images/20230209/f4d055da68b54a3ebcc7f4c9855bb32d.png
[format_png 30]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9MTnJXbDRuNVhJSTUxOEpTNzd5Q0Z0NkVCYXRLOVhHT3lvRFMzNnYxMFMwTm5rSW10WkI5Z0dMSmVYTDNBTHlMbmxJdVpuWndycGtUd01wTnB2TUs5QS82NDA?x-oss-process=image/format,png
[format_png 31]: /images/20230209/c7d8e69b2eaa4c70bc02b18912397e88.png
[format_png 32]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9MTnJXbDRuNVhJSTUxOEpTNzd5Q0Z0NkVCYXRLOVhHT3lEaWJwbExyNXVOTmxGVzQ0QTg0NjIwMGVNeVRxdVB0aWJqVkh0OEtZc2Q3d1FCQTY0U1ZVbFRBLzY0MA?x-oss-process=image/format,png
[format_png 33]: /images/20230209/024db3262c524300a25e7f5ef68032a8.png
[format_png 34]: /images/20230209/2d112c86bd9840859328b1b9e7ef1b08.png
[format_png 35]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9MTnJXbDRuNVhJSTUxOEpTNzd5Q0Z0NkVCYXRLOVhHT0loZDhZV29wdENPcW5LaWFvSU4wTzg5NlNmM0RpY2ljS1lTUkVjY1A2RG5QMFJlMWJ4Y2ljVEZsbEEvNjQw?x-oss-process=image/format,png
[format_png 36]: /images/20230209/6c31c01fab2b400bb2c20523defa8518.png
[format_png 37]: /images/20230209/8525f0719e604146a9d8786ce9a3b92b.png