GitHub + NPM + PicList 图床方案
![](https://img.jinghuashang.cn/cover/img-bed.webp)
GitHub + NPM + PicList 图床方案
Jinghuashang免责声明
此方法并不道德,因为你只用付出精力,而别人需要给你提供存储和cdn加速
当然,白嫖万岁!!!
GitHub + NPM + PicList 图床方案
开始准备
- 一个功能强大的GitHub账号,成为您的得力助手,助您实现各种自动化操作,提高工作效率。
- 一个实用的NPM账号,不仅能存储图片,还能轻松将图片发布到CDN,让您的图片加载速度更快,用户体验更佳。
- PicList,一款方便快捷的工具,助您轻松上传图片,管理图片资源,让您的图片工作变得更加简单高效。
- 图片,如果没有准备好图片,那么您搭建的图床将无法发挥其存储和展示图片的功能,如同虚设。因此,准备好图片,让您的图床发挥其真正的价值。
准备前言
此方案专为那些希望拥有图床但又不具备自建能力的用户设计。它采用Github Action
来实现自动化流程,利用NPM
作为图床的存储后端,并通过PicList
这一便捷的上传工具来管理您的图片。此外,为了提升图片加载速度,我们还选择了NPM
提供的公益CDN服务进行内容分发。
需要特别注意的是,由于我们使用的是NPM
作为图床,每次更新图片时都需要更新版本号,这可能在一定程度上增加了操作的复杂性。如果您对这一点感到不便,可能需要考虑其他更适合自己的解决方案。
开始搭建
1. 创建Github仓库
创建一个仓库,仓库名随意,例如:
jinghuashang-img-bed
公共还是私有看你需要,毕竟不管哪个你都是要部署到公网。
2. 创建NPM仓库
对于熟悉npm
包创建流程的用户来说,这里的内容应该是不言自明的。如果您对如何创建npm
包已经很熟悉,那么您可以继续阅读下去,因为接下来的内容将基于您已经具备这一知识前提。如果您对npm
包的创建不是很了解,那么接下来的信息可能对您来说不够直观,您可能需要先补充相关知识。总之,这里我们默认您对npm
包的创建和发布有一定的了解。
- 创建包,包名随意,例如:
jinghuashang-img-bed
3. 配置PicList工具
4. 配置GitHub Action
先为Github仓库添加我们的上传和处理目录,在本地创建
raw
webp
imgs
三个目录,并使用git
上传目录。注意,在目录下要创建一个隐藏文件,不然上传后等于没上传,比如创建一个名为.keep
的文件,同时创建你npm包的package.json选择仓库Settings中的secrets/actions ,分别添加
EMAIL
NAME
NPM_TOKEN
ENAIL 为GitHub注册邮箱,NAME为Github用户名,NPM_TOKEN为NPM的token,至于token自己找创建仓库 Actions
填入代码如下
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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96name: img2webp & Deploy
# 手动执行
on:
release:
types:
- published
workflow_dispatch:
jobs:
publish-npm:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- uses: actions/setup-node@v1
with:
node-version: "12.x"
registry-url: https://registry.npmjs.org/
- name: hp
run: |
# 遍历指定目录中的每个文件
for file in raw/*; do
# 检查文件是否为普通文件(排除目录)
if [ -f "$file" ]; then
# 获取文件名(不包括路径)和扩展名
filename=$(basename "$file")
extension="${filename##*.}"
filename_without_extension="${filename%.*}"
# 使用mktemp生成一个新的随机文件名(不包含扩展名)
new_name=$(mktemp -u XXXXXXXXXX)
# 重建新的文件名,包括随机字符串和原始扩展名
new_filename="${new_name}.${extension}"
# 重命名文件,保留原始扩展名
mv "$file" "raw/$new_filename"
echo "Renamed $file to$new_filename"
fi
done
# 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
mv webp/*.webp imgs/
- name: Read package.json and bump version
id: bump-version
run: |
# 读取package.json中的版本号
version=$(cat package.json | grep -oP '"version": "\K[^"]+')
# 解析版本号并增加
IFS='.' read -ra VER <<< "$version"
((VER[2]++))
new_version="${VER[0]}.${VER[1]}.${VER[2]}"
# 更新package.json中的版本号
sed -i "s/\"version\": \"[^\"]*\"/\"version\": \"$new_version\"/g" package.json
# 输出新的版本号
echo "Old version: $version"
echo "New version: $new_version"
# 删除 raw/ 和 webp/ 下的所有文件
- name: Delete Files
run: |
rm -rf webp/*
rm -rf raw/*
touch webp/.keep
touch raw/.keep
# 获取文件名字
- name: ls Files
run: |
ls -R imgs/* > file.txt
# 发布 NPM 包
# 自行修改为自己的Github邮箱地址和用户名
- name: Publish Package
run: |
git config --global user.email "${{secrets.email}}"
git config --global user.name "${{secrets.name}}"
npm publish
env:
NODE_AUTH_TOKEN: ${{secrets.npm_token}}
- name: Push
run: |
git add -A
git commit -m "Publish"
git push origin main
第5步:上传文件
- 打开
PicList
工具,点击上传
按钮,选择您要上传的图片。
第6步:自动化图片处理
- 返回您的GitHub仓库,导航至
Actions
部分,启动脚本以执行自动化流程。
第7步:CDN发布
等待自动化脚本完成执行,这将处理您的图片并将它们发布到CDN。
确认图片已成功上传到CDN,并检查它们是否可以通过CDN链接访问。
请注意,每一步骤都可能需要您对相关工具和平台有一定的熟悉度。如果在任何步骤中遇到困难,建议查看相关工具的文档或寻求社区的帮助。
在脚本运行完成后,您需要在 file.txt
文件中查找您的图片名称。一旦找到,您需要在这些图片名称前添加CDN的URL前缀。例如,如果您的图片名称是 imgs/0DPgqcbczm.webp
,您需要将其修改为 https://cdn.cbd.int/jinghuashang-imgbed@0.0.1/imgs/0DPgqcbczm.webp
。在这个URL中,https://cdn.cbd.int/
是CDN的基地址,而jinghuashang-imgbed@0.0.1
部分则是您的npm包名称加上版本号。确保您使用的是正确的包名称和版本号,以便CDN能够正确地解析和提供您的图片资源。
请注意,在上传或更新图片后,务必及时更新您的
npm
包版本号。这是因为在npm
生态中,版本号是区分不同版本的唯一标识,也是确保依赖项正确更新的关键。更新版本号不仅能够确保您的项目使用的是最新的图片资源,还能让其他依赖您的项目的用户知道有新的内容可用。因此,遵循正确的版本控制实践对于维护和分发您的图床服务至关重要。