OSS 上部署 Hexo 并实现 CDN 加速和全站 HTTPS

发表于 分类于
本文字数： 3k 阅读时长 ≈ 3 分钟

Photo by Jessica Fadel on Unsplash

年初分享过一篇《部署于 OSS 之上的静态博客结构》，前几天登录百度统计才发现有朋友在使用 site:www.imczw.com 搜索相关资料 —— 平时博客疏于管理，给这位朋友造成了困扰，实在抱歉。这回把站内搜索加上了，同时分享本站部署 OSS 的步骤，希望能帮上忙。这篇文章主要讲以下几个点：

  1. 将 Hexo 站点部署在阿里云 OSS
  2. 利用 OSS 实现图片裁剪、加水印
  3. 配置 CDN 加速，更新时自动刷新
  4. 启用全站 HTTPS

前期准备

教程开始之前，检查是否已完成以下三项前期准备

  1. 本地环境搭建: node.js+git 环境搭建，能在 hexo s 之后通过 localhost:4000 浏览本地站点
  2. 购买个性域名: 建议在万网购买，同属于阿里云体系下，后续配置简单很多
  3. 域名 ICP 备案: 备案后才能进行域名解析和 CDN 加速，详见 ICP 备案前的准备

检查没问题的话，咱们进入阿里云控制台，开始折腾 OSS

OSS 配置

创建 Bucket

需要用到两个 OSS-Bucket：1 号 OSS 存放站点，2 号 OSS 存放图片，两个 Bucket 均使用 CDN 加速

OSS 编号作用域名
1 号站点目录www.imczw.com
2 号图床 cdn.imczw.com

HEXO-OSS-架构

进入控制台 - 对象储存 - 创建 Bucket，名称随意填，区域选择离你最近地区，储存类型选择标准储存，读写权限选择公共读：

创建Bucket

确定后完成 Bucket 创建，为方便表述，假设两个 Bucket 名称分别为 1 号 OSS：Hexo-site 、 2 号 OSS：Hexo-imgs

设置 1 号 OSS | 站点

点击 OSS 控制台左侧 Hexo-site，选择基础设置 - 静态页面，配置默认首页和默认 404 页，当用户访问链接时自动读取对应的 index.html 静态文件

访问链接实际读取
www.imczw.comwww.imczw.com/index.html
www.imczw.com/categories/tech/www.imczw.com/categories/tech/index.html

OSS设置页面

设置静态页面

这项设置以前只能应用于首页，现在 OSS 升级后次级目录也支持跳转，正常情况下无需改动 Hexo 文件。但如果使用了 CDN，为避免出现莫名其妙的缓存问题，最好以默认页的形式访问网站，详见《Hexo-NexT 为 OSS 增加默认页》

设置 2 号 OSS | 图床

点击 OSS 控制台左侧 Hexo-imgs，选择图片处理 - 新建样式，名称 随意填写，尽量简短；其他图像处理规则根据自身需要调整，比如：压缩质量 90%、固定宽度 1000px、右下角加水印：

图片样式设置

进入图片处理 - 访问设置，勾选原图保护和自定义分隔符

图片访问设置

假设自定义分隔符设置为 ** 短横杆 (-)**，后续 Markdown 写作时，只需将图片上传到 OSS 获取链接，在图片后方增加 -m，就能利用 OSS 的图片处理能力自动裁剪加水印

MD插入图片

可以根据需要建立多个图片样式

上传图片到 OSS 可以借助官方工具 OSS-Browser，上传后获取图片地址，并将地址替换为 CDN 域名

绑定用户域名

OSS 的本质是文件存储，默认情况下直接访问 OSS 域名并不会打开 index.html，而是下载 index.html 文件，使用 OSS 托管静态网站最好绑定用户域名。

点击 OSS 控制台左侧 Hexo-imgs，选择域名管理 - 绑定用户域名，绑定用户域名 test.imczw.com，如果域名是万网上购买，这里可以自动添加 CNAME 记录，否则需要在域名供应商手动做 CNAME 解析

OSS绑定域名

等待 1~2 分钟 CNAME 生效，打开控制台 ping 用户域名，检查是否已定向到 OSS 地址 **.aliyuncs.com**：

域名CNAME到OSS

同样地，操作另一个 BucketHexo-site，绑定用户域名 www.imczw.com

CNAME 是域名解析的一种，可以理解为把域名重定向到新的地址

CDN 加速

CDN 是内容分发网络，将静态文件分布全国各地的节点，加速各地访问速度，还能隐藏真实 IP。Hexo 本身是静态网站，很适合 CDN。

配置 CDN

点击 OSS 控制台左侧 Hexo-imgs，选择域名管理，找到已绑定的用户域名 test.imczw.com，点击阿里云 CDN 加速标签下的未配置按钮：

OSS配置CDN

上图有一项 CDN 缓存自动刷新非常好用，等完成了 CDN 配置之后记得回来这个页面，把开关打开

在弹出的新页面配置 CDN，端口选择 443，加速区域选择仅中国大陆，其他保持默认：

OSS配置CDN

CDN 的加速区域可以理解为访客区域，如果想让海外用户也得到加速效果，可以选择全球

返回 CDN - 域名管理，可以看到 test.imczw.com 的 CNAME 为空，状态为配置中。等待约 2 分钟，控制台显示 CNAME 为 test.imczw.com.w.kunlungr.com，带有红色的感叹号，状态为正常运行：

OSS配置CDN

复制感叹号后方 CNAME 地址，进入域名 - 域名列表 , 找到根域名 imczw.com，点击右侧解析

域名管理

在解析记录中找到记录类型 =CNAME，主机记录 =test 的条目，这里的记录值是之前绑定的 OSS 域名，把它改为 test.imczw.com.w.kunlungr.com

修改CNAME的值

等待 10~30 分钟之后配置生效，再次 ping 用户域名，检查是否已定向到 CDN 地址 test.imczw.com.w.kunlungr.com

检查CDN

同样地，操作另一个 Bucket Hexo-site，将绑定的用户域名 www.imczw.com 也配置到 CDN 上。完成配置后回到 OSS - 域名管理把 CDN 缓存自动刷新按钮打开，实现 OSS 上的网站文件更新时自动刷新 CDN。

CDN 设置

CDN 默认缓存时间很短，在 CDN - 域名管理找到相应域名，点击右侧管理，进入缓存配置，为不同类型文件设置缓存时间

地址类型过期时间权重
/ 目录 1 个月 10
doc,docx,xls,xlsx,ppt,pptx,txt,pdf 文件后缀名 6 个月 20
zip,rar,7z,exe,tat,css,js,map,json 文件后缀名 3 个月 20
eof,woff,woff2 文件后缀名 1 年 20
htm,html,shtml,xml 文件后缀名 1 个月 20
mp3,wma,flv,mp4,wmv,ogg,avi,swf 文件后缀名 3 个月 20
gif,png,bmp,jpg,jpeg,svg,ico,webmanifest 文件后缀名 6 个月 20

修改缓存时间

开启 HTTPS

由于域名 + OSS+CDN 全系列都在阿里云上面，开启 HTTPS 非常简单，进入 CDN - 域名管理 - 选择需要开启 HTTPS 的域名 - 管理，点击 HTTPS 配置菜单，打开 HTTPS 安全加速即可，选择免费证书，到期后阿里云会自动续期。

开启HTTPS

为了实现全链路 SSL，顺便把回源协议也设置为 HTTPS

修改缓存时间

HEXO 配置

自动部署

Hexo 有很多部署到 OSS 上的方法，我使用的插件是 hexo-deployer-aliyun，详情见项目地址, 配置完成之后，通过 hexo d 把网站部署到 OSS。

增加默认页

虽然 OSS 上支持默认跳转 index.html，但对 CDN 而言 www.imczw.com 和 www.imczw.com/index.html 是两个不一样的地址，OSS 自动刷新了 CDN www.imczw.com/index.html , 却无法处理 CDNwww.imczw.com, 所以使用 CDN 加速的 Hexo 网站需要做默认页处理，详见《Hexo-NexT 为 OSS 增加默认页》，才能使 OSS 自动刷新 CDN 的功能生效

最后剩下首页 URL 无法处理，每次完成部署之后，需要在阿里云 CDN 控制台手动刷新首页 URL 缓存: **https://www.imczw.com/**，建议下载阿里云手机版，方便操作

刷新CDN缓存

相关文章