Picgo + GitHub Action + npm 搭建图床

发布于 2022/07/08

请确保你使用的cdn提供商允许这种用法，避免滥用。

图床，用于将本地的图片上传到互联网并生成唯一的直接链接，常常用于在网站中插入图片。目前市面上有许多的公用图床，体验也都还可以，但自己的图片放在别人的服务器多少有点不放心，要是跑路了更是直接玩完。

Step.1 搭建npm图床

市面上有非常多的npm cdn，通过这些cdn，我们可以引用发布到npm的文件，例如本站的npm包是 redish101-blog，最新版本为 1.3.656820088，需要获取 /public/index.html，通过Jsdelivr Fastly引用，直接链接就是这样的:

https://jsd.onmicrosoft.cn/npm/[email protected]/public/index.html

这里为什么使用Fastly而非主域名(cdn1.tianli0.top)：

最近,Jsd的主域名被dns污染了，Fastly是亚洲节点，所以没有受到影响，但电信访问Fastly绝对能急死人，所以，在目前情况下来看，在生产环境下使用jsd作为cdn是非常愚蠢的行为，这将大幅度拖慢网页加载速度。

20220702更新: 一个不幸的消息，Fastly也炸了🙁

同理，也可以获取发布到npm的图片。

具体操作

在搭建npm图床之前，需要安装npm

首先，我们在本地创建一个npm包：

mkdir redish101-pic # 新建文件夹以初始化npm包
cd redish101-pic # 进入上一步创建的文件夹
npm init # 将文件夹初始化为npm包

之后，我们可以在这个目录中存入图片。将需要的图片存入到目录之后发布到npm：

npm login # 登录到npm
npm publish # 上传到npm

可以看到，第一次上传没有出现任何问题，但如果再试一次，会出现以下报错：

这是因为npm不允许发布重复的版本，我们需要手动更新 package.json中的 version字段更改版本，版本号需要符合语义化版本。

上传之后，我们就可以获取图片的直接链接了，格式一般为这样：

https://你的cdn地址/包名@版本号/图片的相对路径

但jsd是个例外：

https://jsd.onmicrosoft.cn/npm/包名@版本号/相对路径

至于哪里有npm cdn可以用，请自行谷歌，101推荐eleme。

Step.2 集成到Github

像上面这样在本地操作图片未免有些太麻烦了，要是换了个设备就需要重装了，那么，就让我们把图片放到Github。

具体操作

首先，我们在Github新建一个仓库，仓库名随意，然后把所有图片存到这个仓库里。然后前往npm官网，生成一个 Access Tokens，保留备用。

回到Github，打开仓库设置=>secrets=>Action，新建一个Secret，名字为 NPM_TOKEN，内容为刚才生成的Access Token，保存。

之后，写一个ci用于自动发布npm包，在仓库 .github/workflows目录新建一个yml文件作为ci配置文件，名称随意，粘贴下面的内容：

name: Deploy to NPM CDN
"on":
  - workflow_dispatch
  - push
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v1
        with:
          node-version: 16.x
      - uses: JS-DevTools/npm-publish@v1
        with:
          token: ${{ secrets.NPM_TOKEN }}

试试上传一张图片，等待一会，图片就自动上传到了npm，但我们再上传一遍，会出现之前版本号重复的问题，如果你不想每次上传都更改 packages.json，可以像我一样写一个小小的脚本，并在ci中运行，下面是参考：

脚本：

# new_version.py

import json;
import time;

with open("package.json",'r',encoding='utf-8') as f:
    jspack = json.load(f)

new_version = '1.1.'+str(int(time.time()))[1:11:1]
jspack['version']=new_version
with open("package.json",'w',encoding='utf-8') as f:
    json.dump(jspack, f,ensure_ascii=False)

ci配置：

name: Deploy to NPM CDN
"on":
  - workflow_dispatch
  - push
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v1
        with:
          node-version: 16.x
      - run: python3 new_version.py
      - uses: JS-DevTools/npm-publish@v1
        with:
          token: ${{ secrets.NPM_TOKEN }}

到这里就完成搭建了。

Step.3 集成到Picgo

Picgo是一个图床客户端，支持Github图床，可以更加方便的上传图片。

首先，我们去到Picgo的仓库，进入releases，随意选择一个版本，打开附件列表，下载对应系统的安装包，安装，并且打开Picgo，进入图床设置=》GitHub图床，进行配置：

  • 仓库名：储存图片的GitHub仓库，格式为 用户名/仓库名
  • 分支名：储存图片的仓库分支
  • Token：你的GitHub密钥，在这里生成，按这张图片填写信息
  • 图片路径：不用管
  • 自定义域名：你的npm包在npm的路径，版本选择latest，这里以jsd为例：https://jsd.onmicrosoft.cn/npm/包名@latest/图片路径

保存配置并设置为默认图床。

编者的话

终于把这篇文章写出来了，最近还搞好了新的评论系统——Artalk，大家可以在下面评论。

正在加载评论...