准备条件
1.一个成功备案的域名
创建oss并配置oss
创建 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通即说明我们域名解析配置成功了。(域名解析配置不是马上生效,可能有几分钟的延迟)
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行
修改标签页中的标签栏
这里需要去改依赖包的一些源码,总觉得不是一个明智之举,但找不到更好的解决方法
修改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协议来访问我们的网站了。