引言

注意：hexo管理网站方式一 和 hexo管理网站方式二 可能需要该文章中的七牛插件文件托管方法。如果你选择是 hexo管理网站方式三 方法管理你的网站，那么你不需要改文章讲的托管方法，所以你并不需要阅读此文章

在本站的 hexo网站搭建文章中，方法一和方法二，都采用的是将图片资源托管到git仓库进行管理。
但是在实际的开发过程中，我们总是习惯将图片资源和文档资源分开管理，这样可以让我们的代码仓库不会被静态的资源（图片、视频）等占据大量空间。
所以，在本文中，我们将探讨一种采用第三次 COS 托管图片的方案，选择的是七牛云，因为每个用户友10G的免费空间，这些空间足够我们托管hexo博客的静态资源了。

参考文献

开始安装

安装七牛云插件

  • 安装七牛云插件
npm install hexo-qiniu-sync --save

配置相关信息

  • 配置站点文件 _config.yml，配置入内容（注意：添加到配置文件时，把//去掉）
#plugins:
# - hexo-qiniu-sync

qiniu:
  offline: false
  sync: true
  bucket: blogwenbo
  //这里将其注释掉，不注释，执行hexo g报错
  # secret_file: sec/qn.json or C:
  access_key: your access_key
  secret_key: your secret_key
  // 上传的资源子目录前缀.如设置，需与urlPrefix同步
  dirPrefix: static
  //外链前缀
  urlPrefix: http://p2zukkwm9.bkt.clouddn.com/static
  //使用默认配置即可
  up_host: http://upload.qiniu.com
  //本地目录
  local_dir: static
  // 是否更新已经上传过的文件(仅文件大小不同或在上次上传后进行更新的才会重新上传)
  update_exist: true
  image: 
    folder: images
    extend: 
  js:
    folder: js
  css:
    folder: css
  • 生成七牛配置路径，执行下面命令任意一个
hexo s
或
hexo g

//终端输出
INFO  -----------------------------------------------------------
INFO  qiniu state: online
INFO  qiniu sync:  true
INFO  qiniu local dir:  static
INFO  qiniu url:   http://blogwenbo.com/static
INFO  -----------------------------------------------------------
INFO  Start processing
INFO  Now start qiniu sync.
INFO  Need upload file num: 0

就会在static目录下生成images、css、js三个文件夹。这时我们把测试图片七牛云.png放在images文件夹下，然后按照如下标签语法书写：

{% qnimg 七牛云.png title:七牛云 alt:七牛云 'class:' extend:?imageView2/2/w/450 %}

img

  • 同步静态资源到七牛云空间，主要有两种方式，一种是使用hexo命令，还有一种是使用七牛插件命令，可以参考GitHub文档：hexo-qiniu-sync
//1、启用本地服务器.即使用 hexo server 命令（简写为 hexo s）
//当以本地服务器模式启动后，会自动监测 local_dir 目录下的文件变化， 会自动将新文件进行上传。
如果文件进行了修改，但设置中没有启用 update_exist 配置，则不会更新到七牛空间。
hexo s
hexo server

//2、使用命令行命令(sync | s | sync2 | s2)
//命令行命令会扫描 local_dir 目录下的文件，同步至七牛空间。
hexo qiniu sync
hexo qiniu s
hexo qiniu sync2
hexo qiniu s2

问题解决