NPM 图床探究

本文最后更新于 <span id="expire-date"></span> 天前，文中部分描述可能已经过时。

起因

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

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

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

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

NPM 图床创建及日常使用

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

npm 图床的使用

NPM 图床的自动化

流程如下


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

Picgo 上传图片到 GitHub

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

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

GitHub Action 自动推送到 npm

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

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

Windows 自动发包

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

git pull
git add .
git commit  -m ' ty '
npm version patch
git push

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

批量查找替换

`sed` 命令挺好的~~~

这里是利用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就用来论坛发帖吧，不过这个方案比较适合没有又拍云的同学。�

本文作者：wxy

本文链接： https://c.undf.top/posts/50ee91a2/

文章默认使用 CC BY-NC-SA 4.0 协议进行许可，使用时请注意遵守协议。
本站不设评论,网站底部邮件图标可以联系博主

文章写于2021-11-07 文章更新于2023-06-08

💻Hexo

起因