使用npm作为图床
参考 我的图床解决方案 修改后发布
这段时间一直在网上探寻适合自己的图床,我发现了两个:
不使用jsDelivr+Github的原因是jsDelivr
速度降低严重,原因可以自行网上搜索,这里就不过多赘述
为了方便阅读,本文开启了目录树功能,可以点击页面右侧的箭头自行开启
准备工作
npm
- 需要注册一个npm账号
- 获取令牌:
- 登录npm ,点击右上角的头像,进入
Access Token
- 点击
Generate New Token
,选择Classic Token
- 勾选
Automation
,点击Generate Token
生成令牌
- 保存生成的令牌
Github
- 需要一个Github账号,以及一个已经创建好的仓库,名称随意,权限私有或者公开都可以
- 添加变量
- 选择
Settings
,选择Secrets
中的Actions
- 点击
New repository secret
添加一个新的Secret
Name
填写 NPM_TOKEN,Secret
填写 前面获取的npm的令牌
在仓库根目录中新建一个package.json
文件,内容如下:name
必须要小写,我在这里踩雷了version
随意
{
"name": "rainogo-filecdn",
"version": "0.0.0",
"description": "Somewhere to save the file from @Rainogo",
"author": "Peter(@Rainogo)"
}
发布图片
使用Github Actions
来自动转换&压缩
和发布
图片(如何发布图片在后文将会提供两种方法)
如何创建Github Actions
自行搜索,本文默认读者已经了解如何创建
转换&压缩图片
的方法
我们这里采用webp-batch-convert
来实现图片的转换&压缩
,具体的使用方法可以参考网上,我们这里只需要记住一部分就行了(其实不用记):
# # raw/ 作为原始图片存储,webp/ 作为压缩图片存储处,最后保存转换后的图片到 imgs/,其中的各个文件夹可以自行更改
cwebp-batch --in raw --out webp -q 75 -quiet
or
npx webp-batch-convert --in raw --out webp -q 75 -quiet
第一种方法:在 Release 发布时 或 手动执行
Github Actions代码
name: img2webp & Deploy
# 在 Release 发布时 或 手动执行
on:
release:
types:
- published
workflow_dispatch:
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/
# raw/ 作为原始图片存储,webp/ 作为压缩图片存储处,最后保存转换后的图片到 imgs/,可以自行修改为对应的文件夹位置
# 安装相关插件,转换图片
- name: Install & Convert
run: |
npm install -g webp-batch-convert@0.1.2
# 要注意这里的版本号需要添加,如果不添加默认使用@Latest会出现问题
cwebp-batch --in raw --out webp -q 75 -quiet
# npx webp-batch-convert --in raw --out webp -q 75 -quiet
mv webp/*.webp imgs/
# 发布 NPM 包
# 自行修改为自己的Github邮箱地址和用户名
- name: Publish Package
run: |
git config --global user.email "$GIT_EMAIL"
git config --global user.name "$GIT_USER"
npm version patch
npm publish
env:
NODE_AUTH_TOKEN: ${{secrets.npm_token}}
# 删除 raw/ 和 webp/ 下的所有文件
- name: Delete Files
run: |
rm -rf webp/*
rm -rf raw/*
touch webp/.keep
touch raw/.keep
- name: Push
run: |
git add -A
git commit -m "Publish"
git push origin master
如何发布
Release
- 点击
Draft a new release
tag
自行填写,Release title
自行填写,点击Publish release
进行发布
Release
发布之后,Actions
就会自动开始运行了
为什么使用Release
的发布来实现启动Actions
的运行
主要是方便对发布时间的统计,实现一篇文章一个Release
,便于规划,实现云端管理
第二种方法:在仓库发生变更时 或 手动执行
不是很推荐,感觉会有点儿问题,似乎会执行两次(我自己没用过,感觉会,不知道Actions上传的东西算不算一次修改?有兴趣的可以试一下),我也不知道咋解决
建议使用第一种,后续可能会推出第三种方法,说不定会咕咕
Github Actions代码
name: img2webp & Deploy
#检测到分支变动就进行提交Actions,2020年10月后github新建仓库默认分支改为main,但是可以修改仓库的默认分支为master,修改方法请自行搜索
on:
push:
branches:
- master
# - main
# 注意若分支为main,则请修改后使用
# paths-ignore:
# - package.json
workflow_dispatch:
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/
# raw/ 作为原始图片存储,webp/ 作为压缩图片存储处,最后保存转换后的图片到 imgs/,可以自行修改为对应的文件夹位置
# 安装相关插件,转换图片
- name: Install & Convert
run: |
npm install -g webp-batch-convert@0.1.2
# 要注意这里的版本号需要添加,如果不添加默认使用@Latest会出现问题
cwebp-batch --in raw --out webp -q 75 -quiet
# npx webp-batch-convert --in raw --out webp -q 75 -quiet
mv webp/*.webp imgs/
# 发布 NPM 包
# 自行修改为自己的Github邮箱地址和用户名
- name: Publish Package
run: |
git config --global user.email "$GIT_EMAIL"
git config --global user.name "$GIT_USER"
npm version patch
npm publish
env:
NODE_AUTH_TOKEN: ${{secrets.npm_token}}
# 删除 raw/ 和 webp/ 下的所有文件
- name: Delete Files
run: |
rm -rf webp/*
rm -rf raw/*
touch webp/.keep
touch raw/.keep
- name: Push
run: |
git add -A
git commit -m "Publish"
git push origin master
为什么使用
git push
来实现启动Actions
的运行更加方便,可以上传一张图片之后马上进行使用,不用进行
Release
的发布注意事项
如果你使用的是本文提供的
Actions
代码:- 请注意保存原始图片,在转换和压缩后,原始图片会在接下来的流程里面被删除掉
- 请将图片上传至
raw/
中(如果你没有修改代码的话) - 如果要上传
gif格式
的图片,建议直接上传至imgs/
中,防止格式转变的过程中让动图变为静止图片 - 不需要修改
package.json
文件中的version
,Actions
的时候会自动修改,但是如果要进行大版本的变动还是需要手动修改的
使用
CDN节点参考
[jsDelivr] https://cdn.jsdelivr.net/npm/:package@:version/:file
[百度,网宿国内节点] https://code.bdstatic.com/npm/:package@:version/:file
[饿了么,网宿国内节点] https://npm.elemecdn.com//npm/:package@:version/:file
本站代码
如果你使用的是本文提供的Actions
代码,可以参考图片链接格式如下:
https://npm.elemecdn.com/:name@latest/imgs/:imgname.webp
# name: package.json处写的
# imgname: 图片的名称
如何上传图片到Github
可以使用以下两种方式,具体使用方法请自行搜索或查看官方文档
本文作者:P3ter
本文标题:《使用npm作为图床》
本文链接:https://p3ter.me/posts/npm_imgbed.html
版权声明:本博客文章均采用CC BY-NC-SA 4.0许可协议,转载请注明出处!
通过国内镜像,确实访问很快!
有十分甚至九分的相似啊(x
快点儿看看置顶的参考资料@(泪),我加了的
大佬运行Actions报错 Error: The process '/usr/bin/git' failed with exit code 1咋办
我很早就没使用这个了,所以现在也不清楚,但是这个报错可以去网上搜索找找看,或者问问chatgpt看看
我看了报错是来自actions/checkout@v2,/usr/bin/git -c protocol.version=2 fetch --no-tags --prune --progress --no-recurse-submodules --depth=1 origin +refs/heads/master:refs/remotes/origin/master +refs/tags/master:refs/tags/master
The process '/usr/bin/git' failed with exit code 1
Waiting 19 seconds before trying again
检查一下仓库权限这些看看
权限都是能访问的
我觉得可能是+refs/heads/master:refs/remotes/origin/master +refs/tags/master:refs/tags/master内的master,因为github改版大部分都是main
可能是,因为当时我仓库的目录是master,我从main修改过去的