​ 因PicGo只能将所有图片上传到单个目录下,强迫症的我感觉管理比较混乱,所以写了个脚本自动压缩图片并调用PicGo API上传到Github指定目录下,配合jsDelivr 为图片增加CDN功能

​ 适合自己的才是最好的,每个人习惯不同,所以这里仅是自己的做法。

效果

效果是每种类型的图片全部分目录存储

hexo-picgo-github目录展示

所需环境

名称 用途 参考
Github新仓库 存放图片的图床 链接
PicGo 上传图片的图床软件 链接
Exiftool 图片元信息查询工具 链接
Imageoptim 图片压缩工具 链接1,链接2

配置过程

  1. 创建好新的Github图床仓库

  2. 申请Github的Access Token

  3. 配置好PicGo的Github图床参数 #以上三步可以参考沧海一粟

  4. PicGo设置 –> 设置Server 里打开Server, 默认监听127.0.0.1:36677

    hexo-picgo-开启Server监听

  1. 安装图片压缩工具

    1. 安装imageoptim客户端, 去官网下载安装 下载地址
    2. 安装imageoptim命令行工具
    npm install -g imageoptim-cli
  2. 安装exiftool

    brew install exiftool
  3. 部署upload-images.sh脚本 (见下文)

脚本

图片URL 结构为: https://cdn.jsdelivr.net/gh/sungaomeng/blog-images/img/hexo/hexo-picgo-开启Server监听.png

https://cdn.jsdelivr.net/gh/: CDN地址

sungaomeng:Github用户名

blog-images:Github图床仓库名称

img:图片一级目录(脚本里写死了,可自行修改)

hexo:执行脚本时的$1

*.png:图片名

192:blog See$ cat upload-images.sh
#!/bin/bash

if [ $# != 2 ] ; then
echo "USAGE: $0 from to"
echo " e.g.: $0 GithubFolder ImageFile"
exit 1;
fi

Folder=$1
File=$2

#文件压缩
#防止多次压缩浪费时间,判断文件是否包含imageoptim标签,如果不存在则压缩并打上imageoptim标签
if ! $(exiftool $File|grep imageoptim >/dev/null)
then
imageoptim $File
exiftool -artist=imageoptim $File
fi

#判断配置的目录跟传参的目录是否匹配
if ! $(grep '"path": "img/'$Folder'/"' ~/Library/Application\ Support/picgo/data.json > /dev/null)
then
#修改上传目录
sed -i "" "/\"path\": /s/img\/.*\//img\/$Folder\//" ~/Library/Application\ Support/picgo/data.json

#重启picgo
pkill PicGo;sleep 0.5;open -a picgo
sleep 3
fi

#上传文件
Result=$(curl -s -X POST \
http://127.0.0.1:36677/upload \
-H 'cache-control: no-cache' \
-H 'content-type: application/json' \
-H 'postman-token: 7cff6cbb-e90f-584c-9621-034df7c9d21f' \
-d '{
"list": [
"'$File'"
]
}')

ImageUrl=$(echo $Result|awk -F'"' '{print $6}')
ImageName=$(echo $ImageUrl|awk -F'[/|\.]' '{print $11}')
echo "![$ImageName]($ImageUrl)"

执行过程

192:blog See$ sh -x upload-images.sh  hexo ~/Downloads/hexo-picgo-开启Server监听.png
+ '[' 2 '!=' 2 ']'
+ Folder=hexo
+ File=$'/Users/see/Downloads/hexo-picgo-开启Server监听.png'
++ exiftool $'/Users/see/Downloads/hexo-picgo-开启Server监听.png'
++ grep imageoptim
+ imageoptim $'/Users/see/Downloads/hexo-picgo-开启Server监听.png'
i Running ImageOptim...
✓ /Users/see/Downloads/hexo-picgo-开启Server监听.png was: 146kB now: 68.7kB saving: 77.3kB (52.96%)
✓ TOTAL was: 146kB now: 68.7kB saving: 77.3kB (52.96%)
✓ Finished
+ exiftool -artist=imageoptim $'/Users/see/Downloads/hexo-picgo-开启Server监听.png'
1 image files updated
++ grep '"path": "img/hexo/"' '/Users/see/Library/Application Support/picgo/data.json'
+ sed -i '' '/"path": /s/img\/.*\//img\/hexo\//' '/Users/see/Library/Application Support/picgo/data.json'
+ pkill PicGo
+ sleep 0.5
+ open -a picgo
+ sleep 3
+ curl -X POST http://127.0.0.1:36677/upload -H 'cache-control: no-cache' -H 'content-type: application/json' -H 'postman-token: 7cff6cbb-e90f-584c-9621-034df7c9d21f' -d '{
"list": [
"/Users/see/Downloads/hexo-picgo-开启Server监听.png"
]
}'
+ Result='{"success":true,"result":["https://cdn.jsdelivr.net/gh/sungaomeng/blog-images/img/hexo/hexo-picgo-开启Server监听.png"]}'
++ awk '-F"' '{print $6}'
++ echo '{"success":true,"result":["https://cdn.jsdelivr.net/gh/sungaomeng/blog-images/img/hexo/hexo-picgo-开启Server监听.png"]}'
+ ImageUrl=$'https://cdn.jsdelivr.net/gh/sungaomeng/blog-images/img/hexo/hexo-picgo-开启Server监听.png'
++ echo $'https://cdn.jsdelivr.net/gh/sungaomeng/blog-images/img/hexo/hexo-picgo-开启Server监听.png'
++ awk '-F[/|\.]' '{print $11}'
+ ImageName=$'hexo-picgo-开启Server监听.png'
+ echo '![Actions-Recovery配置](https://cdn.jsdelivr.net/gh/sungaomeng/blog-images/img/hexo/hexo-picgo-开启Server监听.png)'

![hexo-picgo-开启Server监听](https://cdn.jsdelivr.net/gh/sungaomeng/blog-images/img/hexo/hexo-picgo-开启Server监听.png)

#最终输出Markdown格式URL