hexo-qiniu-uploader七牛云上传插件

作者： TzuHsing Su
发布时间：2021-05-09
2000 次瀏覽
1 條評論
2586字数
分類： web前端建站相关

# hexo-qiniu-uploader

[![Latest Stable Version](https://img.shields.io/npm/v/hexo-qiniu-uploader.svg)](https://www.npmjs.com/package/hexo-qiniu-uploader)  [![NPM Downloads](https://img.shields.io/npm/dm/hexo-qiniu-uploader.svg)](https://npmjs.org/package/hexo-qiniu-uploader)  [![GitHub stars](https://img.shields.io/github/stars/susdevlop/hexo-qiniu-uploader?style=social&label=Star)](https://github.com/susdevlop/hexo-qiniu-uploader)

## 简介
这是一个可以帮你把所有图片上传到cdn的[hexo](https://github.com/tommy351/hexo)插件。
##### 关键字： hexo部署时(hexo deploy)自动上传到七牛云   
   
最近因为公司需要把没什么人看的静态官网用hexo重做，出现了以下问题：

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

最后参考了些插件，把他们整合了一下：

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

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

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

**项目作者：[Sushome](https://sushome.us)**  
**代码贡献:**
- [zhepama](https://github.com/zhepama)
- [gyk001](https://github.com/gyk001)
- [Bob Liu](https://github.com/MatrixHero)
- [Jinchun Xia](https://github.com/xiajinchun)
- [MatrixHero](https://github.com/MatrixHero)
- [binsee](https://github.com/binsee)
- [javy-liu](https://github.com/javy-liu)
- [k1988](https://github.com/k1988)
- [robinshen](https://github.com/robinshen)
- [楼教主](https://github.com/52cik)

## 安装

在你的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

如果覺得我的文章對你有用，請隨意讚賞

發表評論取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

評論 *

私密評論

名稱 *

🎲

郵箱 *

地址

1 條評論

基于gitee-go的ci流水线部署hexo博客 | 优速盾
July 30th, 2022 at 10:05 pm

[...]本步骤网上有太多教程，我不在过多赘述，大家可以网上搜索，我提供一个比较好的解说地址：将hexo博客一键部署到七牛云 – 简书 (jianshu.com)。当然有些人也使用了npm的插件：hexo-qiniu-uploader七牛云上传插件 – Sushome。完成以上操作，实现本地编译并打包[...]

回复

hexo-qiniu-uploader七牛云上传插件

TzuHsing Su • 2021 年 05 月 09 日

# hexo-qiniu-uploader

最后参考了些插件，把他们整合了一下：

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

## 安装

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

```
npm install hexo-qiniu-uploader --save
```

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

```

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

## 使用方法:
```
    hexo clean
    hexo generate
    hexo deploy
```

hexo-qiniu-uploader七牛云上传插件

發表評論取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

1 條評論

当一名我这样的博主是怎样的体验

mac13.9 ventura vmvare fusion闪退解决方案

[建站方向]从购入vps到搭建wordpress或typecho

Vue组件-render函数与props传值

欢迎使用 Typecho

纯js实现购物车添加抛物线掉落特效

php下的99乘法表的几种循环写法

amazon ec2 开启80、443端口，配置https

canvas前端跨域的解决方案(不行你找我)

红白

hexo-qiniu-uploader七牛云上传插件

發表評論 取消回复 使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

1 條評論

hexo-qiniu-uploader七牛云上传插件

發表評論取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款