对于为什么选择七牛云作为博客图床就不说了,直接记录过程.
之前管理博客中的图片,流程如下:
使用了hexo-qiniu-sync插件之后,流程如下:
将图片保存在指定目录下
在md中引用图片即可
其他优点:
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/
(完)