起因

最近在吾爱发帖,苦于福利区不能贴图,要用自己的图床,然后我用了又拍云,一个帖子,一天,3 元。

这个价格有点贵了 hhh,所以想要找个稳定的图床,本来用 jsd + GitHub 但是论坛屏蔽掉了 jsd 好像是因为会传播木马什么的,总之是不安全。

而且写教程还是蛮辛苦的,不想因为图床挂了而不能看,所以想要一个稳定的免费的图床,所以就想到了 npm

经测试 NPM 不会被论坛审核,可以使用

NPM 图床创建及日常使用

这里给店长打个广告,我也是通过店长cyfan才了解到 npm 图床的

npm 图床的使用

NPM 图床的自动化

流程如下

1
2
3
4
5
6
7
8
9
10

graph TD;
Picgo上传多张图片到GitHub --> Windows自动更新npm包版本;
Windows自动更新npm包版本-->自动查找替换链接;
Windows自动更新npm包版本--> GithubAction自动发包;
GithubAction自动发包 --> 图床更新完成;
自动查找替换链接-->push博客仓库;



Picgo 上传图片到 GitHub

这一步的目的是方便预览,而且为后面查找替换打个基础

而且这一步会遇到 GitHubaction 报错 这不重要 关掉通知 直接无视

GitHub Action 自动推送到 npm

这个教程里面有写,不再赘述npm 图床的使用

至于为什么使用 action 发包是因为图床很大,发包很慢

Windows 自动发包

利用 shell 脚本,这个脚本放到图床仓库根目录运行即可

1
2
3
4
5
git pull
git add .
git commit -m ' ty '
npm version patch
git push

内容其实很简单,就是简单的 git 命令

批量查找替换

`sed` 命令 挺好的~~~
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
这里是利用shell脚本的查找替换功能比如将`3.txt`中的 `npm.elemecdn.com/wxydeimage` 替换成 `npm.elemecdn.com/wxydeimage@1.0.23` 其中有转义符号

`sed -i 's/cdn.jsdelivr.net\/gh\/wxydejoy\/image/npm.elemecdn.com\/wxydeimage@1.0.23/g' 3.txt `

加上文件遍历,就变成了这个样子。这个脚本放在博客根目录即可

```shell
#!/bin/bash
#folder="./test"

function readfile ()
{
#这里`为esc下面的按键符号
for file in `ls $1`
do
#这里的-d表示是一个directory,即目录/子文件夹
if [ -d $1"/"$file ]
then
#如果子文件夹则递归
readfile $1"/"$file
else
#否则就能够读取该文件的地址
echo $1"/"$file
#读取该文件的文件名,basename是提取文件名的关键字
sed -i 's/cdn.jsdelivr.net\/gh\/wxydejoy\/image/npm.elemecdn.com\/wxydeimage@1.0.23/g' $folder/$file
fi
done
}
#函数定义结束,这里用来运行函数
folder="./source/_post"
readfile $folder
```

其中`wxydejoy image`是GitHub用户名和仓库`wxydeimage`是`npm`包名,`1.0.23` 是版本号

写着写着电脑黑屏了,吓死,幸亏是vscode自动保存了,有惊无险

## 完全自动化

我的目标是只要在提交之前运行一次脚本,无需手动修改版本号

==敬请期待==

## 后话

今天看到npm的图床是想换来着,但是跑了一下速度,还是又拍云香,npm就用来论坛发帖吧,不过这个方案比较适合没有又拍云的同学。�