npm 图床（不需要本地部署）

本篇意在建立一个上传到 GitHub repo 自动发布 package 到 npm 空间的 npm 图床

前言

本篇为 picture-bed-using-freecdn 脚本的教程之一。脚本意在提高静态博客的 cdn 稳定性。

picture-bed-using-freecdn

脚本的另一篇使用教程在这里 [使用 freecdn-js 提高 hexo 博客的 cdn 稳定性]

建立用于储存图片等静态资源的 npm 图床

可以放置 js、css、图片（最好带上 hash）等不经常变动的资源。

准备工作

Note

准备工作网上有很多教程，这里不重复造轮子。请搜索“npm 图床”

需要：

npm 账号，创建一个 token；
GitHub 账号：创建一个 repo，并在 repo 的 setting 创建一个名为 NPM_TOKEN 的 secrets，值为上面的 token。

创建 package.json

该文件指定了要上传的图床的名字和图床版本（不需要事先在 npm 空间创建一个空的 package）；其中名字不能和现有的 package 重复，所以写的尽量长。

1
{
2
  "name": "",
3
  "version": "1.0.0",
4
  "description": "DO STUFF",
5
  "author": "XDF"
6
}

看好名称写就行，version 尽量和我一样就行。

创建 GitHub action

GitHub action 可以在你把文件 push 或者 release 到 repo 时自动执行自定义命令，这里我们让他自动把我们 push 的图片发布到 npm 空间，使资源能通过 npm cdn 访问。

在 reop 的上方点击 Action，然后点击 new workflow，之后点击 set up a workflow yourself ，名字随便（我这里是 npm-publish.yml），之后填入以下信息：

1
name: npm-publish
2

3
on:
4
  push:
5
    branches:
6
      - master
7
permissions:
8
  contents: write
9

10
jobs:
11
  publish-npm:
12
    runs-on: ubuntu-latest
13
    # Clone 仓库
14
    steps:
15
      - name: Checkout
16
        uses: actions/checkout@v4
17
        with:
18
          ref: master
19
      # 安装 Node.js
20
      - name: Setup Node
21
        uses: actions/setup-node@v4
22
        with:
23
          node-version: '20.x'
24
          registry-url: https://registry.npmjs.org/
25

26
      # 发布 NPM 包
27
      - name: Publish Package
28
        run: |
29
          git config --global user.email "zzy4on9@outlook.com"
30
          git config --global user.name "user_name"
31
          npm version patch
32
          npm publish
33
        env:
34
          NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}
35
      - name: Push
36
        run: |
37
          git push

其中的 master 要换成你 branch（分支）的名字。NPM_TOKEN 就是最开始在 secrets 填写的 token，因此名字要对应上。email 和 user_name 可以随便写。

上传图片

使用图床工具或者手动上传到 GitHub repo 就能自动发布到 npm 空间，可以看到 npm 包的版本 version 变化了（npm 不支持覆盖发布，所以版本一定会变化），同时 .json 文件里面的版本也变化了，这得益于 GitHub action。

这里推荐一个图床工具吧，只用于 GitHub 的，比较轻量，使用浏览器就行。

PicX 图床工具官方文档

使用图片

提供几个国内能用的 npm cdn

1
https://npm.onmicrosoft.cn/,
2
https://jsd.onmicrosoft.cn/npm/,
3
https://cdn.jsdelivr.net/npm/,
4
https://unpkg.com/

使用格式为：

1
https://{cdn}/{npm_name}@{version}/path/to/resource.ext

例如

1
https://unpkg.com/html-hosting-for-xp@1.0.1/%E5%9C%A8python%E4%B8%AD%E8%BF%90%E8%A1%8Cbash%EF%BC%88windows%EF%BC%89.html
2
https://jsd.onmicrosoft.cn/npm/p-hosting-for-xp@1.0.15/20230525/logo%20(2).ln5ua8psy9s.webp

Tip

freecdn-js 可以把资源的响应头中的 mime 改成 text/html（而不是原来的 text/plain），从而能够让浏览器渲染网页。我写的脚本支持自动把用于写作博客.md 文件转换为对应的 html cdn 列表。见前言

建立用于储存 html 静态资源的 npm 图床

同样图床可以储存 html 文件。我是在本地编译好博客然后发布到 GitHub repo 的，因而在 push 之后依然可以在 action 中把 html 发布到 npm 空间。

1
{
2
  "name": "",
3
  "version": "1.0.0",
4
  "description": "DO STUFF",
5
  "author": "XDF"
6
  "files": [
7
        "*.html"
8
    ]
9
}

这里的 package.json 多了一个 files 的 key，表示只发布 html 文件到 npm 空间。files 是一个列表（array），和.gitignore 文件的写作规则一样。

这里的 action 中的 .yml 文件和储存图片的 repo 的 .yml 一样，但是要删去 npm version patch 这行。

npm version patch 的作用是更新 version，在本地发布 html 之前（hexo d），在命令行输入 npm version patch 就能更新本地的 package.json 中的 version（换而言之，在更新 version 之前，本地的 package.json 和 .yml 内容和 目录 要和 GitHub repo 的一致，然后 push 更新了 version 之后的 .json 之后，让 action 自动部署，发布 html 到 npm 空间）

Warning

如果用我的命令行上传博客会多次 push 本地文件，但是只在 push html 之前会更新 version，那么之后的 push 会因为没有更新 version 而 action 部署失败，但是事实上没有什么影响

脚本的使用

脚本链接见前言。如果你要使用 npm 空间，要在 config.py 中写上你的 npm 包名，用于查询最新的 version。