NPM 图床探究

起因#

最近在吾爱发帖，苦于福利区不能贴图，要用自己的图床，然后我用了又拍云，一个帖子，一天，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 命令

批量查找替换#

````求人不如求己，cyfan没看见就自己写，百度了一下 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

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

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