hexo-qiniu-uploader

Latest Stable Version NPM Downloads GitHub stars

简介

这是一个可以帮你把所有图片上传到cdn的hexo插件。

关键字: hexo部署时(hexo deploy)自动上传到七牛云

最近因为公司需要把没什么人看的静态官网用hexo重做,出现了以下问题:

  • 把样式布局等都放在了主题中进行了修改,文章和主题有大量图片。所以需要区分
  • 发现七牛云插件好多只支持文章的图片不支持上传主题的图片
  • 图片引用路径太乱

最后参考了些插件,把他们整合了一下:

方案是:

  • 所有图片都随意使用,在build后使用插件把public所有引用替换成cdn地址+引用地址
  • deploy(hexo)阶段,所有地址替换后把指定的资源文件上传,然后把public的资源文件夹删除。如images、js、css等
  • 最后自动部署ci整合这些操作并完成部署;

适合人群: 使用public文件夹的内容部署的用户

使用hexo s本地开发所见即部署中所得,不用担心主题和文章中的图片无法上传到七牛云的问题,不需要关注图片、js、css以什么的方式引用,正确引用的图片、js、css都会可被上传到cdn中。原理是替换所有生成的资源引用,并把引用的资源上传到七牛云

项目作者:Sushome
代码贡献:

安装

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

npm install hexo-qiniu-uploader --save

添加插件配置信息到 _config.yml 文件中,此插件需要配置三个字段的信息,分别是deplo、cdn、qiniu:


deploy:
  type: 'upload'  
cdn:
  enable: true
  onlypost: false
  url: https://static.xxx.cn
qiniu:
  bucket: 'bundle'
  dirPrefix: 'static'
  secret_file: qn-sec.json
  allow_file: 'assets-css-images-js'
  update_exist: true

这里对配置中的几个需要注意的参数进行说明:

  • deploy 字段:
deploy:
##type: 'upload' 此参数固定
  • cdn 字段:

enable为是否启用
onlypost: false仅替换文章中的图片
url: https://static.xxx.cn

img_url: https://static.xxx.cn
webImage: 是否在替换的图片后添加-web参数

  • qiniu 字段:

env 参数: 如果使用env字段,那么access_key和secret_key将作为process.env的key并引用
access_key 参数: 上传密钥AccessKey
secret_key 参数: 上传密钥SecretKey
secret_file 参数: 秘钥文件路径,可以将上述两个属性配置到文件内,防止泄露,json格式。绝对路径相对路径均可
allow_file 参数: public中允许上传的文件夹(如果hexo build后生成出其他路径的资源文件则需要加上去),使用方法用-分隔开
update_exist 参数: 是否覆盖上传

使用方法:

    hexo clean
    hexo generate
    hexo deploy
最后修改:2021 年 05 月 10 日 11 : 49 AM
如果覺得我的文章對你有用,請隨意讚賞