使用hexo-qiniu-sync插件配合七牛云实现博客图床管理

简介

对于为什么选择七牛云作为博客图床就不说了,直接记录过程.

之前管理博客中的图片,流程如下:

1. 将图片保存在本地
2. 本地图片上传七牛云
3. 复制图片外链
4. md文件中引入图片外链
5. 删除本地图片

使用了hexo-qiniu-sync插件之后,流程如下:

1. 将图片保存在指定目录下

2. 在md中引用图片即可

其他优点:

• 本地统一管理博客图片
• 自动上传七牛云
• 七牛高级图片处理功能扩展使用

配置

注册七牛云

1. 注册 七牛云
2. 创建存储空间,添加"对象存储",访问控制选择"公开空间"
3. 右上角个人面板–>密钥管理–>获取AK(AccessKey)和SK(SecretKey)

hexo配置

hexo-qiniu-sync GitHub上已经有详细的步骤介绍了,这里只是记录一下.

在hexo主目录运行如下命令安装hexo-qiniu-sync插件

npm install hexo-qiniu-sync --save

在hexo主目录的_config.yml文件中配置

plugins:
qiniu:
  offline: false
  sync: true
  bucket: {your qiniu bucket name}
  access_key: {your AK}
  secret_key: {your SK}
  dirPrefix:
  urlPrefix: {your qiniu domain,for example:http://xxxxxx.xxx.clouddn.com}
  local_dir: static
  update_exist: true
  image:
    folder: images
    extend:
  js:
    folder: js
  css:
    folder: css

说明

七牛云存储设置
offline       是否离线. 离线状态将使用本地地址渲染
sync          是否同步
bucket        空间名称.
access_key    上传密钥AccessKey
secret_key    上传密钥SecretKey
secret_file   秘钥文件路径，可以将上述两个属性配置到文件内，防止泄露，json格式。绝对路径相对路径均可
dirPrefix     上传的资源子目录前缀.如设置，需与urlPrefix同步 
urlPrefix     外链前缀.
up_host      上传服务器路径,如选择华北区域的话配置为http://up-z1.qiniu.com
local_dir     本地目录.
update_exist  是否更新已经上传过的文件(仅文件大小不同或在上次上传后进行更新的才会重新上传)
image/js/css  子参数folder为不同静态资源种类的目录名称，一般不需要改动
image.extend  这是个特殊参数，用于生成缩略图或加水印等操作。具体请参考http://developer.qiniu.com/docs/v6/api/reference/fop/image/ 
              可使用基本图片处理、高级图片处理、图片水印处理这3个接口。例如 ?imageView2/2/w/500 即生成宽度最多500px的缩略图

注意,一定不能在配置文件中做如下配置,否则hexo s和hexo d命令会出问题.

plugins:
  - hexo-qiniu-sync

虽然官方文档已经提示了这一点,但是自己大意了,还是掉坑里了.

使用

上一步配置好以后,执行hexo s命令,会自动在hexo主目录创建如下目录结构:

node_modules
public
static // 静态资源目录
	- css		//css文件存储目录
	- images	//图片存储目录	
	- js		//js文件存储目录
...

将本地图片放在images目录下,在md文件中以如下方式引入文件即可:

{% qnimg 图片名称.jpg %}

在部署过程中,会出现如下命令:

INFO  Now start qiniu sync.
INFO  Need upload file num: 4
Please run `hexo qiniu sync` to sync.

提示有待上传的文件,让运行hexo qiniu sync命令进行文件上传,但是我发现其实他已经自动上传了.在4000端口的本地服务上可以正常预览,并且在七牛云空间里已经可以看到了.感谢开源的前辈们!

后续有机会会把七牛云图片高级处理再研究使用下,本次暂时到这里.

参考链接:

https://yuchen-lea.github.io/2016-01-21-use-qiniu-store-file-for-hexo/ (推荐)

http://www.ixirong.com/2016/10/31/how-to-use-hexo-qiniu-sync-plugin/

(完)