使用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插件

1
npm install hexo-qiniu-sync --save

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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

说明

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

七牛云存储设置
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 shexo d命令会出问题.

1
2
plugins:
- hexo-qiniu-sync

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

使用

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

1
2
3
4
5
6
7
node_modules
public
static // 静态资源目录
- css //css文件存储目录
- images //图片存储目录
- js //js文件存储目录
...

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

1
{% qnimg {图片名称.jpg} %}

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

1
2
3
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/

(完)

坚持原创技术分享,您的支持将鼓励我继续创作!