利用 Gist 在博客中同步代码的一种方法

如果想在博客中分享代码片段，我们可以直接把代码复制过来，也可以利用 Github 的 Gist 代码片段来分享代码。

现在考虑这样一种情况，如果想分享的代码来自于一个 repo 中的文件，博客中需要引用其中的代码。比如在我的上一篇文章使用 Nodejs 遍历文件夹中，所有的代码都来自于这个 repo: traverse-folder。如果直接复制代码，则不能保证 repo 和博客间的代码同步。当 repo 中的文件发生改动时，除非手动编辑博客相应位置，否则博客中的就是旧的代码。而在博客中引用 gist，虽然 gist 的更新会直接展示在博客中，但是仍然需要手动更新 gist。

基于此，我们可以采用这样的一种思路，通过某种方式自动将 repo 中的文件同步至 gist，然后在博客中引用 gist，从而保证更新了 repo 中的文件后，博客中的代码也会自动更新。

Github Actions

这里的某种方式就是用 Github Actions 来实现的。Github Action 提供了自动运行的工作流，可以在某些时机触发然后执行相应任务。我们要实现的功能可以在我们每次 push 代码的时候触发，然后同步 gist。

Github 的市场提供了很多官方及第三方的 action，可以从中挑选合适的 action 来实现需求，以下的两个 action 都可以用于实现我们的目的：

以 actions-deploy-gist 为例，需要这么几步：

先创建一个新的 gist
在这里创建一个新的 token，scope 选择 gist。这里会拿到一个类似于 ghp_3vDXRBAzjXA5rtDMyWMofSNeLwxL4W3***** 的 access token，会在下一步用到。
进入 repo 的 Settings > Secrets -> Actions 页面，添加一个 secret，名称为 GIST_TOKEN（名字可随意，只要与后面的配置文件保持一致），值为上面的 token。
创建一个新的 action，编辑 action 的配置文件，填入相应的文件信息

- uses: actions/checkout@v2
- name: Deploy
  uses: exuanbo/actions-deploy-gist@v1
  with:
    # 名字可以是 TOKEN 或 GIST_TOKEN 等等，只要和上面第三步中保持一致即可
    token: ${{ secrets.TOKEN }}
    gist_id: from_your_gist_url
    gist_description: 'foo bar'
    gist_file_name: foo.bar
    file_path: ./dist/foo.bar

完整的配置可参考我在这个项目中的配置文件：

有趣的一点，注意到上面的这个 gist 引用中的内容就是 action 的配置，而这个 gist 本身就是靠其中的内容实现了同步，形成了一个“自指”。

因为我需要同步多个文件至一个 gist 中，所以我重复了 uses: exuanbo/actions-deploy-gist@v1.1.2 多次。（这里可能会有更佳的写法，待更新）

完成以上工作后，每次更新 repo，相应的 gist 就会改变了。

Gist 中多文件如何引用

接下来我们看下如何在博客中引用 gist：

<!-- 使用 script 标签是通用的方法 -->
<script src="https://gist.github.com/noiron/f6be6840739c7c0fc356659d64db96fc.js"></script>

<!-- 在使用 Hexo 建立的博客中还可以这样写 -->
{% gist f6be6840739c7c0fc356659d64db96fc %}

这里有一个小问题，如果一个 gist 中包含有多个文件，上面的方式会将所有的文件都展示出来，如果想只展示其中一个文件，可以加上文件名，如下：

<!-- 在 url 上用 file 参数带上文件名 -->
<script src="https://gist.github.com/noiron/f6be6840739c7c0fc356659d64db96fc.js?file=traverseFolderList.js"></script>

<!-- 在 gist id 后面再加上文件名 -->
{% gist f6be6840739c7c0fc356659d64db96fc traverseFolderList.js %}

如果文件名中有空格：

<!-- 使用 %20 来代替空格，注意 encodeURIComponent(' ') == '%20' -->
<script src="https://gist.github.com/noiron/f6be6840739c7c0fc356659d64db96fc.js?file=Example%20File"></script>

<!-- Hexo 中可以选择用双引号包裹文件名 -->
{% gist f6be6840739c7c0fc356659d64db96fc "Example File" %}

经过上面的操作后，就可以在博客中引用 repo 中的文件了，更新 repo 后，博客中的文件也会保持同步。