关于阿里云:Hexo一键部署到阿里云OSS并设置浏览器缓存

当初用 Hexo 来搭建动态站点的人越来越多了，很多人会抉择试用 Github Pages 服务来部署本人的动态站，但 Github Pages 国内访问速度切实无奈承受，本文介绍一下如何一键应用阿里云 OSS 对象存储服务部署 Hexo 站点，同时解决一个浏览器缓存的坑。

Netlify：与 Github 配合应用很不便，但国内访问速度不佳，须要搭配国内 CDN 应用
Vercel：与 Netlify 相似，国内访问速度不错，域名没有备案的话是个不错的抉择
对象存储：应用阿里云 OSS 或相似的对象存储服务，国内访问速度不错，也可搭配国内 CDN 应用，速度最好，但要求你的域名有 备案号
境内对象存储 + 境外 Vercel/Netlify：我所采纳的计划，应该是最佳的计划了

首先要做的事件就是去阿里云 (https://aliyun.com) 创立一个 Bucket:

Bucket 名称：轻易起，只有不反复就行
地区：按你的需要，阿里云的节点国内访问速度都能够，如果你不打算应用 CDN 服务的话，能够抉择华东节点，全国访问速度都能兼顾。如果应用 CDN 服务的话，那就没区别了，选哪都行。
存储类型：个别抉择规范存储就能够了，当然如果访问量很小的话，抉择低频拜访存储也能够，能够省一点钱。
同城冗余存储：不须要
版本控制：不须要
读写权限：这里要留神，咱们抉择 公共读，切记不能抉择公有，一方面如果不开启 CDN 的话，公有权限无奈在公网拜访。另一方面，如果开启 CDN，阿里云的 CDN 公有回源性能与 OSS 的动态页面性能抵触（别问我是怎么晓得的，都是坑）
服务端加密形式：无
实时日志查问：看需要，有收费 7 天的实时日志查问，但有 900GB/ 天的限度
定时备份：不开明

进入 Bucket 的配置页面，抉择“根底设置 - 动态页面”：

依照图中的内容进行配置：

默认首页：index.html
默认 404 页：404.html（依照你理论的 404 页面地址填写）
子目录首页：开明，这里因为 Hexo 的分类、标签等页面，都是子目录的模式（例如：/tags/），如果不开明这个性能，不会主动定位到对应目录的 index.html
文件 404 规定：Index

其实当初就能够在阿里云的治理页面上传文件部署网站了，但切实是太麻烦，咱们心愿的是一个自动化的计划。这里咱们须要创立一个 API 的受权 AccessKey：

阿里云当初开启了子账户受权的性能，因而咱们能够抉择跳转到子账户治理的页面：

首先创立一个子账户：

这里留神，因为咱们这个账户是给 API 应用的，所以必须开启编程拜访权限：

返回当前，点击刚创立的账户右侧的“增加权限”：

这里搜寻“OSS”，抉择增加 AliyunOSSFullAccess 权限：

返回列表，点击刚创立的账户名称，创立一个 AccessKey，这里要留神，创立完 AccessKey 后，会显示一个 AccessKey 和一个 SecretKey，肯定要保留好，只会显示一次：

我编写了一个能够一键部署 Hexo 到阿里云 OSS 的 hexo 插件，并反对配置浏览器缓存 HTTP 响应头。
源码地址：https://github.com/huzhanfei/hexo-deployer-ali-oss-extend

应用很简略，在 hexo 我的项目下执行装置命令：

npm i hexo-deployer-ali-oss-extend

在 hexo 我的项目配置文件 _config.yml 中增加如下配置：

deploy:
- type: ali-oss
  region: "< 您的 oss 区域代码 >"
  accessKeyId: "< 您的 oss  accessKeyId>"
  accessKeySecret: "< 您的 oss accessKeySecret>"
  bucket: "< 您的 bucket name>"
  cacheControl:
    images: "< 图片文件 HTTP 响应头 Cache-Control>，留空为 no-cache"
    css: "<CSS 文件 HTTP 响应头 Cache-Control>，留空为 no-cache"
    js: "<JS 文件 HTTP 响应头 Cache-Control>，留空为 no-cache"
    html: "<HTML 文件 HTTP 响应头 Cache-Control>，留空为 no-cache"
    other: "< 其它文件 HTTP 响应头 Cache-Control>，留空为 no-cache"

其中区域代码，能够在 OSS 的 Bucket 概览当中找到，如下图所示：

另外，这里减少 Cache-Control 性能，是因为 OSS 对象存储并没有针对常见的网页文件（如 css、js、图片等）进行默认 HTTP 响应头的设置，这些不常更新的文件不缓存，会导致流量大量节约，前面如果应用 CDN 的时候，CDN 获取不到缓存配置也会进行一直的回源，产生回源流量节约。

配置就这么简略，而后执行部署命令：

hexo d

即可将我的项目部署到 OSS 中，默认状况下将文件上传到 bucket 的根目录下，如果须要部署到其余目录，请在 deploy 下增加 remotePath 选项进行指定

    remotePath: "< 您要部署的目录 >"

当然，如果你应用了 GitHub 的 Actions 性能，能够配置主动执行 hexo d，提交源码的时候主动执行部署脚本，几乎不要太不便，具体配置形式不是本文探讨的重点内容，可自行钻研。

其实做到这一步，就曾经能够拜访你的网站了，能够在 Bucket 概览页面找到你的拜访域名，当然咱们大概率须要应用本人的域名拜访，如果你的域名曾经进行了备案，能够增加自定义域名。

能够在“传输治理 - 域名治理”中配置域名：

点击“绑定域名”，在如图所示的内容中填入本人的域名，如果你的域名解析服务器是阿里云的话，能够点击“主动增加 CNAME 记录”疾速设置域名解析：

如果你的域名不在阿里云解析的话，请依据页面提醒手动设置域名解析。

到此，就能够通过你的域名拜访站点了，你也能够上传 SSL 证书以开启 HTTPS 拜访。
当然，如果你有更高的要求，也能够抉择更多的优化：

开启 CDN 服务：开启 CDN 服务后，相当于在全国多地部署你了的镜像站，以获取更快的访问速度，同时能够通过 CDN 服务开启图片压缩、页面优化等等性能
分区域解析：设置 DNS 解析将国内解析到阿里云 OSS 或 CDN，国外解析到 Netlify、Vercel 甚至间接解析到 GitHub Pages 服务

自建博客地址：https://bytelife.net，欢送拜访！本文为博客同步发表文章，为了更好的浏览体验，建议您移步至我的博客????

本文作者：Jeffrey
本文链接：https://bytelife.net/articles/52761.html
版权申明：本博客所有文章除特地申明外，均采纳 BY-NC-SA 许可协定。转载请注明出处！

关于阿里云:Hexo一键部署到阿里云OSS并设置浏览器缓存

减速计划

创立 Bucket

开启动态页面性能

创立 AccessKey 并受权

装置一键部署脚本

配置自定义域名

后话