Hexo博客七牛图床最优做法

就在昨天,我的新域名备案成功并正式上线了,于是就想到了去七牛做一个图片图床来加速网站访问速度。

令人欣喜的是七牛有10GB的免费存储和20GB下载流量,而且还享有20元/月配额的音视频处理。

所以我果断从七牛和又拍云之间选择了七牛来做图床。

搜了一下关于七牛图床相关的文章,结果发现都不是自己想要的效果,我想要达到的效果有:

  1. 不能破坏本地markdown书写和预览图片的方便性。
  2. 不能破坏迁移和修改的方便性。
  3. 不影响之前发布的文章,并且能快速切换到七牛图床和其他图床。
  4. 无感知的自动完成,不需要关心这层操作。

基于上面这些想法,我就有了一个基本思路,首先复制备份,然后通过qshell来实现批量上传和同步图片,接着批量替换文章中的<img src=” 字符串后面追加七牛存储的自定义域名。

复制备份

复制备份的目的是为了让发布的代码实现七牛图床,本地编写的markdown文件依然是本地预览,方便以后扩展和替换。

1
2
3
4
edit_path="/home/shuihan/Documents/我的博客"
gitee_path="/home/shuihan/Documents/blog-temp"
rm -rf $gitee_path/source/*
cp -a -f $edit_path/source/* $gitee_path/source

qshell同步

qshell是七牛提供的方便同步和维护对象存储的工具。Github地址:https://github.com/qiniu/qshell

因为我用的是linux,所以下载了对应Linux平台的工具,并配置好环境变量。假设我的qshell存放在tools目录下,在~/.bashrc中配置环境变量如下:

1
export PATH=$PATH:/home/jemy/tools

接下来设置秘钥, 其中your_qiniu_ak是你七牛账号下的AccessKey, your_qiniu_sk是SecretKey.

1
$ qshell account your_qiniu_ak your_qiniu_sk

然后我们使用qupload命令来实现文件批量上传和同步。

1
2
qshell qupload 20 qshell-post
qshell qupload 20 qshell-images

上面的20是同步线程数,你也可以设置为其他值,qshell-post和qshell-images是我创建的两个预设上次文件, 内容如下:

qshell-post

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{
"src_dir" : "/home/shuihan/Documents/blog-temp/source/_posts",
"bucket" : "dp2px",
"overwrite" : true,
"check_exists" : true,
"check_hash" : false,
"check_size" : false,
"rescan_local" : true,
"skip_fixed_strings" : ".svn,.git",
"skip_suffixes" : ".DS_Store,.md",
"log_file" : "upload.log",
"log_level" : "info",
"log_rotate" : 1,
"log_stdout" : false,
"file_type" : 0
}

关于该文件具体的配置方法请阅读对应文档:https://github.com/qiniu/qshell/blob/master/docs/qupload.md

全局替换路径

在Linux系统中全局替换可以方便的使用sed来完成。

1
2
3
gitee_path="/home/shuihan/Documents/blog-temp"

sed -i "s#img\ src=\"#&/#g" `grep img\ src=\" -rl $gitee_path/source/_posts`

这样就可以批量的替换post目录下的所有文件中的img src=”字符串为img src=”

编译发布

我们再来归纳一下整个过程:

工作区文件目录和发布区文件目录关系如图:

  1. 我们上面将工作区edit_path的source目录中的文件复制到发布区gitee_path的source目录下。
  2. 发布区gitee_path的post目录图片上次到七牛对象存储。
  3. 替换发布区gitee_path的post目录中的所有img路径(追加了七牛对象存储域名)。
  4. 编译发布区gitee_path并提交发布。
1
2
3
4
5
6
cd $gitee_path
hexo clean
hexo g && gulp

git add .
git commit -m "$1"