抱歉,您的浏览器无法访问本站
本页面需要浏览器支持(启用)JavaScript
了解详情 >

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

前言

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

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

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

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

准备工作

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

需要:

  • npm账号,创建一个token
  • GitHub账号:创建一个repo,并在repo的setting创建一个名为NPM_TOKEN的secrets,值为上面的token

创建package.json

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

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

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

创建GitHub action

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

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

npm-publish.yml
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
30
31
32
33
34
35
36
37
name: npm-publish

on:
push:
branches:
- master
permissions:
contents: write

jobs:
publish-npm:
runs-on: ubuntu-latest
# Clone 仓库
steps:
- name: Checkout
uses: actions/checkout@v2
with:
ref: master
# 安装 Node.js
- name: Setup Node
uses: actions/setup-node@v1
with:
node-version: "12.x"
registry-url: https://registry.npmjs.org/

# 发布 NPM 包
- name: Publish Package
run: |
git config --global user.email "email@email.com"
git config --global user.name "user_name"
npm version patch
npm publish
env:
NODE_AUTH_TOKEN: $
- name: Push
run: |
git push

其中的master要换成你branch(分支)的名字。NPM_TOKEN就是最开始在secrets填写的token,因此名字要对应上。emailuser_name可以随便写。

上传图片

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

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

使用图片

提供几个国内能用的npm cdn

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

使用格式为:

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

例如

npm cdn
1
2
https://jsd.onmicrosoft.cn/npm/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
https://jsd.onmicrosoft.cn/npm/p-hosting-for-xp@1.0.15/20230525/logo%20(2).ln5ua8psy9s.webp

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

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

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

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

这里的package.json多了一个fileskey,表示只发布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空间)

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

脚本的使用

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

同样需要注意替换你的branch

bash
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
f:
cd f:/blog #博客根目录
hexo clean && hexo g
cd f:/blog/package_json #储存package.json和.yml的文件夹(注意.yml路径!!)
npm version patch
cd f:/blog
gulp
# 上传之前确保./public存在package.json和.yml(注意.yml路径!!)
xcopy .\package_json .\public /e/h
hexo d
cd f:/blog/.deploy_git
python ../import_to_db_with_hexo_blog.py
python ../import_to_db_with_urls_txt.py
freecdn find --save
freecdn manifest --merge ../pic.conf
freecdn manifest --merge ../custom.conf -o manifest-full.txt #用于生成外置的freecdn-manifest.txt
freecdn js --make --cdn "https://jsd.cdn.zzko.cn/gh/user/repo@main/freecdn-internal/ver/freecdn-main.min.js unpkg jsdelivr elemecdn " #此命令为配置cdn链接用于加速.min.js文件,详细请查看freecdn项目的GitHub
git add --all
git commit -m "update"
git push origin main #如果需要添加origin地址,请自行添加。
python ../generate_external_manifest_file.py
git add --all
git commit -m "update"
git push origin main #如果“is_refresh_tag”为 “True”需要上传多次
python ../refresh_cdn_cache.py #可能没用

评论