Hexo博客七牛图床最优做法

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

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

七牛免费配额

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

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

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

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

复制备份

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

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中配置环境变量如下:

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

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

$ qshell account your_qiniu_ak your_qiniu_sk

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

qshell qupload 20 qshell-post
qshell qupload 20 qshell-images

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

qshell-post

{
   "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来完成。

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并提交发布。

    cd $gitee_path
    hexo clean
    hexo g && gulp
    
    git add .
    git commit -m "$1"