将hexo博客部署到阿里云OSS并启用CDN加速访问

准备条件

1.一个成功备案的域名

创建oss并配置oss

创建 OSS Bucket

创建oss bucket
1. Bucket 名称:可以根据自己喜好任意命名但要求必须唯一
2. 区域:无特殊要求的话可以随意选择,但一般会选择离自己近的
3. 存储类型:一般选择标准存储,因为博客在后期的访问量还是有的
4. 读写权限:这里我们需要将读写权限设为公共读,因为我们博客是需要给大家看的

配置OSS为静态网站托管模式

默认首页设置为index.html,默认 404 页可设置也可以不设置
默认页面配置

用户域名绑定

由于阿里云出了新的规定,自 2018 年 8 月 13 日起,我们使用 OSS 默认域名访问中国大陆、中国香港地区 OSS 上的网页类型文件(mimetype 为 text/html,扩展名包括 htm、html、jsp、plg、htx、stm),Response Header 中会自动加上Content-Disposition:’attachment=filename;’。即从浏览器访问网页类型文件时,不会显示文件内容,而是以附件形式进行下载。所以,我们必须绑定我们自己备案的域名,才能够正常访问网页。
绑定域名

配置解析域名指向OSS的域名

参考自阿里云帮助文档
1.复制我们的oss的域名
2.打开云解析页面
云解析页面
3.点击添加记录按钮
添加记录页面

  • 记录类型 因为我们需要指向我们的oss域名所以此处必须为CNAME
  • 主机记录 根据自己域名情况填写
  • 解析线路 默认就好
  • 记录值 即为我们第一步中复制的oss域名

尝试ping操作

ping
能够Ping通即说明我们域名解析配置成功了。(域名解析配置不是马上生效,可能有几分钟的延迟)

hexo代码适配oss访问规则

由于我们首页设置了默认为index.html,但在hexo中有部分页面是会把index.html省略掉了。但是OSS的访问路径必须为绝对路径, 必须包含index.html, 否则会导致一直访问的都是 OSS中配置的默认首页。
以下修改是在next主题5.1.4版本下的实现,版本与主题不同可能存在差异

修改侧边栏的归标签、分类

打开主题的_config.yml配置文件在链接后面加上index.html,如下图所示
主题文件修改

修改文章页面里的标签与分类的跳转链接

打开文件themes\next\layout_macro\post.swig在url后面添加index.html,分别大概在107行与359行
tags

categories

修改标签页中的标签栏

这里需要去改依赖包的一些源码,总觉得不是一个明智之举,但找不到更好的解决方法
修改hexo这个模块里的代码,在\node_modules\hexo\lib\plugins\helper\tagcloud.js大概224行的位置
修改的代码

修改分类页中的分类栏

跟上面一样需要修改hexo这个模块的代码,在\node_modules\hexo\lib\plugins\helper\list_categories.js大概60行的位置
修改分类

修改分页的跳转链接

打开\node_modules\hexo\lib\plugins\helper\paginator.js文件,文件内搜索href关键词,然后在所有链接后加上index.html

上传public文件夹到oss

我们通过hexo g命令将整个静态网站生成在public下面,这这里介绍使用图形化界面客户端oss-browser

配置oss-browser并上传

将压缩包解压缩后我们双击oss-browser.exe启动,在登陆界面输入相关信息后进入到此页面


分别点击左上角的文件以及目录按钮,即可分别批量将Public文件夹下面的文件以及文件夹上传到oss了。
综上,我们便完成了将hexo的博客从github pages迁移到阿里云oss上面来了,迁移到oss主要有以下两方面的优点

  • 访问速度加快,github pages在国内的访问速度大家是知道
  • 方便百度爬虫来爬取我们的博客,github是屏蔽了百度爬虫的

下面将介绍配置cdn来加速访问以及申请https免费证书(可有可无的优化,没有也没影响)

cdn加速

添加域名

在oss管理控制台->域名管理->阿里云 CDN 加速

填写信息说明

加速域名:即我们的hexo访问域名
业务类型:选择图片小文件
源站信息:选择oss域名,下拉栏的域名选择我们的静态网站oss域名
端口:需要启用https协议就选择443端口,否则就选择80端口

提交审核获取CNAME并配置CNAME

在cdn管理控制台->域名管理可以看到阿里云为我们刚申请的cdn分配的cname,将这个cname copy下来

接下来便是在域名管理控制台->解析设置->添加记录,至于如何添加cname记录可以参考上面的配置,这里不重复讲述了。

申请https免费证书

oss管理控制台->域名管理得右上角有个购买云盾证书服务,点击进去便可选择免费版本。
购买成功后,我们在SSL证书管理控制台便可以看到我们的https证书,将这个证书部署到cdn即可。
最后我们便可以通过https协议来访问我们的网站了。

-------------本文结束您的阅读与肯定是我持续装*的最大动力-------------