引言

将博客图片独立存放于图床，而非与文章内容混为一体，这一做法背后蕴含着双重考量。首先，图片文件往往体积庞大，若直接嵌入文章，将不可避免地导致页面体积膨胀，进而拖慢加载速度。而图床的运用，则能有效地将图片从文章中剥离，缩减文章体积，加快页面加载，显著提升用户体验。此外，众多图床服务采用内容分发网络（CDN）来储存和分发图片，这进一步加速了图片的访问速度，尤其是在面对广泛地理分布的用户时。
在国内，图床服务要么需要备案，要么对HTTPS支持收费。而在国外，图床服务虽多，却可能随时面临被封的风险。
有鉴于此，本文将介绍一种结合npmjs与github的解决方案，它不仅免费、自主可控，而且无需备案，享有CDN加速的优势，且基本不会被封禁，为独立博客的图床设置提供了理想的选择。

安装与配置

npm 配置

注册 npm 账号，创建 Access Tokens

点击 Generate New Token，选择 Classic Token
勾选 Automation，点击 Generate Token 生成令牌

保存生成的令牌

github 配置

注册 github 账号，创建私有图床项目
点击 New repository secret 添加一个新的 Secret，Name 填写 NPM_TOKEN，Secret 填写 前面获取的 npm 的令牌

操作使用

创建 github action

找到我们之前创建的图床仓库，在本地合适的位置把它clone下来。username和AssetsRepo换成自己的。找个空文件夹打开终端输入

1
git clone https://github.com/[username]/[AssetsRepo].git

在 clone 下来的 AssetsRepo 文件夹内打开终端，输入以下指令切换回原生源

1
npm config set registry https://registry.npmjs.org

按图创建 github action 的配置文件 main.yml

编辑main.yml添加如下内容。大致意思是当提交到github 时自动发布 npm 包。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
name: Deploy to NPM CDN
'on':
  - workflow_dispatch
  - push
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v3
        with:
          node-version: "20"
      - run: npm install
      - uses: JS-DevTools/npm-publish@v3
        with:
          token: ${{ secrets.NPM_TOKEN }}

自动变更版本号

安装husky和semver依赖

1
2
3
npm i husky semver -D

husky init

package.json中添加

1
2
3
4
5
  "scripts": {

    "prepare": "husky install"

  },

项目根目录中添加update-version.js文件，内容如下

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
const semver = require('semver');  

const fs = require('fs');  

const path = require('path');  

const packageJsonPath = path.join(__dirname, 'package.json');  

const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf8'));  

// 获取当前的版本号  

const currentVersion = packageJson.version;  

// 根据你的策略来更新版本号  

// 例如，这里我们简单地增加补丁版本号  

const newVersion = semver.inc(currentVersion, 'patch');  

// 更新package.json中的版本号  

packageJson.version = newVersion;  

// 写回文件  

fs.writeFileSync(packageJsonPath, JSON.stringify(packageJson, null, 2));  

console.log(`Updated version to ${newVersion}`);

项目根目录的 .husky 目录下创建 pre-commit 文件，内容如下

1
2
3
node update-version.js

git add package.json

做完以上操作，在 git commit 代码后会自己更新版本号，推送到github时action会自动发布新版本

注意事项

  • 使用cdn访问图片链接
1
2
3
https://cdn.cbd.int/:package@:version/:file

https://cdn.cbd.int/blog-pic@latest/:file
  • @latest 版本因为缓存原因，很多时候不能立即生效，最好使用具体版本号。