Github+jsDelivr+Coding 免费高速稳定图床get!
发布笔记随写19 分钟读完 (大约2830个字)  次访问

Github+jsDelivr+Coding 免费高速稳定图床get!

图床一直是影响博客撰写体验的重要工具，之前我一直用的是sm.ms图床，配合Typora的图片上传功能，可谓写作体验极佳。sm.ms图床虽然才成立没几年，但作为免费图床，自带https，免账号上传，注册就有有后台管理，就已经吊打不少家了。总体而言，他的速度还算不错，但免不了有时候抽风，而且毕竟一小厂，现在又近乎用爱发电，万一哪天跑路了，博客里挂着的那些图岂不全没了。所以既想有稳定的体验，又想免费白嫖，可谓鱼和熊掌不可兼得啊。

不过最近我还真就发现了这近乎完美的解决方案。用GitHub作为存储，jsDelivr作为CDN加速，如有必要，还可加上国内的Coding作为跳板，提升稳定性。

首先这几个都是大厂完全不必担心跑路。GitHub就不必说了，jsDelivr由ProspectOne维护的公共库，免费提供了npm和GitHub仓库的静态文件加速服务，可以说非常的良心，而且它在中国大陆也有数百个节点，可以说访问速度极佳，一张3mb的图片加载速度不到1秒钟！

之所以我还多用了个腾讯的Coding，是因为国内的GitHub访问真的太不稳定了，上传失败的概率非常高。虽然Coding有放外链机制，速度也不是很快，但不妨让他做个跳板，帮我们自动把图片同步到GitHub仓库。

下面正式开始教程：

Github仓库配置

新建GitHub仓库

这一步就不必多说了，直接登录账号点击New新建一个仓库即可。可以选择放个readme作为初始化。注意一定要选择Public公开仓库，不然jsDelivr就无法访问你的仓库数据了。

生成Token

点击右上角头像选择setting

然后选择Developer settings

选择Personal access tokens，点击Generate new token

输入名称，勾选第一个repo权限，点击下方Generate token按钮

之后会显示出生成的token，⚠注意不要立刻关闭这个页面！注意不要立刻关闭这个页面！注意不要立刻关闭这个页面！这个token只显示一次！

不过就算忘记保存了也没事，再点击那条记录，点Regenerate即可。

PicGo配置

安装

点击前往下载，根据readme里的安装教程即可。

image-20200824234150945

配置GitHub图床

填写如下配置：

  • 设定仓库名：按照用户名/图床仓库名的格式填写

  • 设定分支名：master

  • 设定Token：粘贴之前生成的Token

  • 指定存储路径：填写想要储存的路径，如img\，这样就会在仓库下创建一个名为img的文件夹，图片将会储存在此文件夹中

  • 设定自定义域名：它的的作用是，在图片上传后，PicGo会按照【自定义域名+上传的图片名】的方式生成访问链接，放到剪贴板上，因为我们要使用jsDelivr加速访问，所以可以设置为https://cdn.jsdelivr.net/gh/用户名/图床仓库名

    关于jsDelivr引用资源的链接格式

    1. 访问仓库文件：https://cdn.jsdelivr.net/gh/user/repo/file

    2. 访问最新文件：https://cdn.jsdelivr.net/gh/user/repo@latest/file

    3. 按版本号访问：https://cdn.jsdelivr.net/gh/user/repo@1.2/file

    • 需要在GitHub上发布release，作为图床不适用

    注：jsDelivr缓存机制未知，格式2大部分时候是实时更新的，有时可能需要等待一段时间

到此为止，GitHub+jsDelivr图床已配置完毕，可以使用PicGo一键上传图片了~再设置好Typora自动上传图片，写作效率++！

注意事项

  1. GitHub图床不支持同名文件上传，可以在设置里调整为以时间戳命名。
  2. GitHub国内访问较不稳定，上传失败可能性较大，解决方案可参考下文配置Coding图床+GitHub自动同步

配置Coding图床+GitHub自动同步

Coding是基于腾讯云的一个在线项目管理平台，相比Gitee功能更丰富，以及拥有类似GItHub Action的功能，可以配置自动工作流。同时因其支持Pages服务，我将它作为了博客的国内的分流站点，提升国内访问速度。详情可参考我的另一篇文章：Hexo折腾系列（一）博客访问速度优化

这里我将把它作为一个中间跳板，解决GitHub图床上传不稳定的问题。

创建Coding仓库

如果你已经有腾讯云账号，从这个🔗链接 进入；

如果你没有腾讯云账号，可以直接从🔗Coding官网注册。

⚠注意这两个账号不互通！

切换到项目一栏，点击右上角创建项目，一定是新建一个项目，不是原有项目里的一个仓库！

创建项目

选择DevOps项目，注意要勾选开源仓库，不然外链无法访问！

DevOps项目

接下来申请token，步骤跟GitHub类似，同样这个token只显示一次，一定要记下来！！！

申请token

PicGo-Coding插件配置

PicGo本体是不支持Coding的，但已经有大佬开发了插件，在插件中心搜索coding即可。🔗插件地址

coding插件安装

安装完成后重启一下PicGo，在图床设置里就能找到Coding图床了。

Coding插件配置

  • 团队名称: coding.net团队名称
  • 项目名称: 需要保存图片的库名
  • token: coding.net’s api token
  • 分支: 需要存放图片的分支。默认master
  • 存储文件夹: 需要存放照片的指定文件夹
  • 按年月日存放: 图片自动按日期路径存放与库中，可以存储文件夹混合使用

以我的仓库为例：

团队名称为luzy999，项目名称为cdn，分支为master，指定的文件夹为img

到此为止Coding图床已经搭建完毕了，可以上传图片试试。

但这还不是我的最终目的，Coding的国内访问速度还算可以，但相比强大的jsDelivr，差距还算不小的，但jsDelivr只提供GitHub仓库的加速。那有没有办法让他也加速Coding呢？

对此我想出了一个迂回方法，Coding不是有构建计划功能吗，那我每次提交图片到Coding，让他再自动同步到GitHub不就成了！

配置Coding自动同步功能

在持续集成菜单下有个构建计划功能，点击创建。

选择自定义构建过程

切换到文本编辑器：

输入以下代码：

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
28
29
pipeline {
  agent any
  stages {
    stage('检出') {
      steps {
        checkout([
          $class: 'GitSCM',
          branches: [[name: env.GIT_BUILD_REF]],
          userRemoteConfigs: [[url: env.GIT_REPO_URL, credentialsId: env.CREDENTIALS_ID]]
        ])
      }
    }
    stage('拉取合并') {
      steps {
        sh '''url="https://${username}:${token}@github.com/${username}/${repo}.git"
git pull $url'''
        echo '合并成功！'
      }
    }
    stage('推送部署') {
      steps {
        echo '正在推送文件...'
        sh '''url="https://${username}:${token}@github.com/${username}/${repo}.git"
git push -f $url HEAD:master'''
        echo '已完成推送.'
      }
    }
  }
}

添加环境变量

  • username为GitHub用户名

  • token为GitHub的token，注意是GitHub的，如果忘了，再去申请一个就行。👉回上面看看

  • repo为GitHub上的仓库名

点击触发规则，设置推送到master时自动触发：

image-20200825145630557

可以点击立即构建测试一下是否成功。

看看效果：

效果对比

同样一张3.1mb的图片，Coding加载花了1.3s，而jsDelivr只花了363ms！加速效果还是很明显的！

最后再来提几点注意事项：

  • Coding免费版每周可以免费构建200次，也就是说可以推送200张图片，也基本够用了。

  • 由于picgo-coding插件暂时不支持自定义域名，所以返回的图片url还是Coding仓库的地址，如果要替换成jsDelivr的地址，只能写完后再全局搜索替换一下了，也不是很麻烦。
  • 【更新】作者非常给力，提交了issue，立刻就上线了自定义域名这个功能，不过由于同步需要时间，就不能实时显示图片了，可以说有利有弊吧。

配置Github Action自动压缩图片

✨这几天碰巧看到一篇文章，我的 gitee 图床，自动上传、压缩、获取图片 url，可以利用GitHub Action实现自动压缩图片。

安装ImgBot

为 github 仓库安装 ImgBot 机器人。 打开 ImgBot 网站，点击 【try for free】， ImgBot 声称开源项目能够一直免费使用其服务。 从 ImgBot 网站跳转到 github 网站后，点击 【Set up a plan】 按钮，在下一步中选择 【Open Source】 这一个免费计划。下一步是【Install it for free】。 最后到这下图这个步骤，选择为刚刚创建的图床仓库打开 ImgBot。

这个Bot会自动检索仓库中的图片文件，进行压缩后提交Pull Request，但需要手动点击合并，就很麻烦。但别担心，强大的GitHub Action同样可以自动化处理合并请求。

配置自动合并Workflow

点击GitHub仓库中的【Actions】，选择【New Workflow】，输入如下代码：

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.9.0"
        env:
          GITHUB_TOKEN: "${{ secrets.GIT_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"

这其实是使用了一个auto-merge插件，详细配置见官方文档。一般也不用修改。

最后别忘了在仓库的setting中加入GitHub Token

看看压缩效果：

Github+jsDelivr+Coding 免费高速稳定图床get!

https://blog.luzy.top/posts/214001566/

作者

江风引雨

发布于

2020-08-24

更新于

2024-07-10

许可协议

CC BY 4.0

#

喜欢这篇文章？打赏一下作者吧

评论

×