利用Github + JsDelivr + PicGo实现自建图床

前言：

使用图床（Image Hosting）是我在写文章的流程当中非常重要的一部分。

我使用的博客引擎是Hugo，首先用Hugo生成出来一个Markdown的模版文件，比如new_article.md，然后用Typroa打开这个文件，接着在其中进行撰写，在写的时候，就会有许多需要插入图片的需求，这时候就会比较痛苦，有的时候是截图，有的时候是网图，还有可能是本地图片，这些图片在最终发布的时候都是需要上传到一个托管服务，之前一直用的是路过图床，但是上传图片及复制链接插入的过程还是很痛苦，一直没有很好的解决办法。后面有一天，我在Typora中发现了一个功能，在我嵌入图片的时候，菜单中有一个上传图片的按钮，如图所示：

然后在Typora的偏好设置中发现了PicGo: 一个优秀的图片上传工具。

接下来下载了PicGo的应用，在配置中看到了Github 图床：

于是就决定使用Github来做图片的托管服务。

创建Github仓库及相应配置

创建一个名为images的仓库用来存储图片，因为我已经创建过了，所以显示已存在。

接下来进行配置，打开PicGo的应用，在Github的配置项中进行配置：

其中，Token是Github的PersonalAccessToken，在里面生成一个拥有images仓库写读权限的Token，然后复制到配置框中。

另一个自定义域名我没有使用Github的访问路径域名，是因为如果在国内的话，Github的访问速度有时经常抽风，所以考虑这个问题，也去看了一些资料，有一些人会使用Gitee来同步Github库的图片文件，然后使用Gitee的域名来访问，但是这样只是解决了国内的问题，如果想让图片在全球范围内都拥有良好的访问速度，那就必须上CDN，这时候发现了JsDelivr，一个开源免费的CDN服务，天然的支持Github，以及npm和wordpress的内容托管，它提供了在全球范围内的内容加速，更重要的是提供了Works in China，使用起来也非常的简单明了，就选用它做了图片的托管服务。

图为JsDelivr在全球范围内的节点分布。

然后将包含你自己对应的Github信息及仓库信息的JsDeliver链接填入到PicGo的Github配置当中，这一步的配置就完成了。

上传测试

打开你的PicGo应用，打开到上传区，然后随便拖入一张图片，或者截图，使用剪切板图片，进行上传测试：

如果能够成功上传图片，而且上传成功后图片的链接是JsDelivr而且能够成功打开，那么最重要的一步就完成了。

为Typora进行配置

打开Typora的偏好设置，在Image Upload Setting中下拉框中选择PicGo.app，如果选择其他的也可以，需要自己再研究配置。

点击Test Uploader如果PicGo提示成功则配置，以后在使用Typora的时候就可以在插入图片的时候使用前文之前提到的一键上传功能了，并且可以自动将原来的图片链接替换为上传成功之后的JsDelivr的地址。

优化图片存储空间

虽然Github仓库大小没有限制，但是官方仍然推荐保持仓库在1GB以下。

所以我们需要尽可能地在不降低图片质量的图片下，让图片变得更小，这时候我们就要用到一个第三方的工具，ImageBot，打开之后选择Set up a plan。

接着选择Open source，然后选择Install it for free。

接下来完成订单并开始安装，并允许ImgBot对你的Github账户的OAuth授权，即可安装完成。

安装完成后，可以为所有仓库或者单独的一个仓库配置ImgBot，也可以在新建仓库的时候配置ImgBot。

配置完成之后，只要你的仓库中存在图片，ImgBot就回去递归的查找当前仓库中的图片，然后对其进行优化，当然这指的是无损压缩，当然想要有损压缩的话，可以自己对ImgBot的参数配置调整。

一段时间后，当你发现image仓库有新的Pull Request，如果是这样的话，那么ImgBot就是在正常工作了。

这一步的配置就完成了，接下来我们来进行下一步。

配置Github Action，自动合并Pull Request

接上一步，ImgBot向我们的image仓库提了PR，那我们就需要对其进行合并，一次两次还好，但是每次都要我们手动去点，是不是太麻烦了，这时候使用Github自带的Action功能来做自动化操作这样就讲我们的双手解放出来了。

先进入我们的image仓库，选择Action标签，如图：

如果之前没有配置过的话，就点击set up a workflow yourself。

然后对Yaml脚本进行配置然后保存：

脚本中的 uses 值为 pascalgn/automerge-action，它是一个autumerge的仓库，后面的v0.8.4为它最新的release版本。

文件中使用的代码如下：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

name: Merge Imgbot

on:
  pull_request:
    types:
      - opened
      - ready_for_review
  pull_request_review:
    types:
      - submitted
  status: {}

jobs:
  automerge:
    runs-on: ubuntu-latest
    steps:
      - name: automerge
        uses: "pascalgn/automerge-action@v0.8.4"
        env:
          GITHUB_TOKEN: "${{ secrets.GIT_MERGE_TOKEN }}"
          MERGE_LABELS: ""
          MERGE_METHOD: "squash"
          MERGE_COMMIT_MESSAGE: "pull-request-description"
          MERGE_FORKS: "false"
          MERGE_RETRIES: "2"
          MERGE_RETRY_SLEEP: "10000"
          UPDATE_METHOD: "rebase"

脚本中的 GIT_MERGE_TOKEN这个值需要在Github的Token页进行生成，与PicGo配置Github时操作一致，配置完成之后，还没有完成，因为它是一个密钥值不能暴露出去，所以需要在Secrets中额外进行配置，在image仓库选择Settings，点击Secrets。

在这里将生成的Token填写进去，命名为GIT_MERGE_TOKEN，然后在Yaml脚本中通过${{ secrets.GIT_MERGE_TOKEN }}就可以获取到这个值了。

接下来，就可以进行测试了，在上传一张图片之后，ImgBot发起了一个PR后，如果Action能够自动合并该PR，那么配置就是正确无误的。

到此，我们的个人图床就配置完成了。

小结

在配置的过程中，也踩了不少的坑，也接触到学习了很多新的东西，比如CDN、Github Actions等等，而且个人图床在实际使用过程中非常方便，在写文档、写文章的时候再也不用因为图片上传而浪费很多时间了，这件事情我觉得是有价值的，也希望对你也有帮助。