使用七牛云储存博客图片

Posted on | views
Words count in article: 1,204 | Reading time ≈ 4

选择CDN的原因

我们写博客的时候总是少不了要放些图片上去，但是图片的存储存在一个问题，如果文章中的图片存放在本地，在一起部署到github上去的话，github pages的空间将会有很大一部分的浪费。所以选择用CDN来存储我们的图片，然后通过url插入到我们的博客中。

而七牛云是国内顶尖的CDN云服务商，而且吧主要是每个月有不少的免费额度，这才是最重要的。

shoufei

注册账号

先打开主页，然后按照要求注册，注册有礼哦。我们选择个人账户，然后按照要求填写相关信息即可，需要邮箱和手机验证。

zhanghu

验证完成以后登陆是这样一个界面。ps. 实名认证好像会有奖励吧，但是我懒的拍照就先算了。有兴趣可以尝试一下。

这是 开发文档 可以看一下里面有介绍快速入门。

denglu

建立存储空间并上传文件

我们选择对象存储，然后新建存储空间。我选择了那个10%off的。储存空间名称随便写，然后确定创建。体验用户只能有一个存储空间。

chuangjian

创建成功后，我们就可以在内容管理里上传文件，或进行其他操作了。这里会为我们生成自己的外链域名。

ps. 网页不能上传超过 500M 的文件，大文件请 使用工具 上传.

neirong

点击上传文件，在接下来的的页面里选择文件并上传。上传的进度条变为绿色就上传成功啦！

shangchuan

上传成功后，点击关闭，就能在内容管理里看到我们的图片了。然后点击右边的三个点，选择复制外链，得到我们图片的url。把url放到我们博客相应的位置就可以显示图片了。

wailian

hexo 七牛工具

插件地址：https://github.com/gyk001/hexo-qiniu-sync

在你的hexo主目录下运行以下命令进行安装：

1
npm install hexo-qiniu-sync --save

添加插件配置信息到 _config.yml 文件中: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
#七牛云存储设置
##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的缩略图
qiniu:
  offline: false
  sync: true
  bucket: bucket_name
  secret_file: sec/qn.json or C:
  access_key: AccessKey
  secret_key: SecretKey
  dirPrefix: static
  urlPrefix: http://bucket_name.qiniudn.com/static
  up_host: http://upload.qiniu.com
  local_dir: static
  update_exist: true
  image: 
    folder: images
    extend: 
  js:
    folder: js
  css:
    folder: css

具体的参数说明，详见github的地址。

这里有几点要注意：

  • 需要在刚才七牛的网页中的个人中心里，找到自己的秘钥，并复制到配置中的相应位置。

    miyao

  • bucket ：修改为你刚才申请的七牛空间名称

  • urlPrefix : 七牛空间地址的前缀。就是刚才的外链地址，写在/static前面 重要！必填！

这是我的配置信息。

peizhi

这样你在 local_dir 的image命名的文件夹中添加一张图片，之后运行hexo（如hexo s），图片就可以在你的七牛存储空间的内容管理中看见了。
你会看到图片的外链URL就是http://your_site/your_static(你的目录-dirPrefix参数的配置)/images/yourimage.png。就是域名+自定义的目录名+images（配置文件中image中folder指定的文件）+ 图片名

配置本地目录

本地目录名称需要与 local_dir 参数的值一致。所以在 hexo主目录 下新建与 source 平级的目录 static ，用于存放需要上传到七牛的资源。

wenjian

最后，使用 hexo s 就可以上传图片到七牛啦。去看一下存储空间吧。惊不惊喜意不意外。

另外推荐一个mac版的markdwon app：Typroa