Hexo博客部署在阿里云对象存储oss的方法

偶然发现oss对象云存储可以用来部署静态网页,再加上我刚换了新电脑,还得重新配置博客太麻烦了。干脆就把博客部署到新的地方好了。

选择oss对象存储的原因

便宜!如果你没有动态网页需求,只想安安静静地写博客,静态的hexo完全够用。而且不需要租服务器,对象存储只需要9块钱一年,要啥自行车!(当然9¥是存储费用,流量需要另外算,但还是很便宜。)

安装Hexo和git、Node之类的就不说了,目前的情况是我已经拥有一个能够在本地跑起来博客,只差一键部署。接下来就来演示一下步骤。

下文和官方提供的教程流程差不多,你可以先看这个链接👇。

教程示例:通过静态网站托管部署单页应用

后半部分内容参考知乎文章:阿里云OSS部署Hexo教程

创建、配置Bucket

首先登录阿里云oss对象存储,创建Bucket。

image-20230630172427693

名称地区自己选,其他按照下图。

image-20230630172625962

配置静态页面,记得勾选子目录

image-20230630173619507

不着急弄cdn加速,费钱不讨好,cdn缓存刷新规则设置不好,会导致部署后网站没变化,让你怀疑自己是不是操作失误。

https协议也可以不急着弄,不过我之前已经提前申请过了。

绑定自定义域名

Bucket配置->域名管理->绑定域名

image-20230630174031045

如果你是阿里云买的域名,那么可以自动添加CNAME记录,如果像我一样不是阿里云的域名,那么需要在你的域名提供商那边,验证一下所有权,还有解析一下CNAME。

image-20230630174257907

比如我在华为云购买的域名,按照图例添加。

image-20230630174404913

注意CNAME的值可以在这里找到: 公共云下OSS Region和Endpoint对照表

我的是福州地区 所以是oss-cn-fuzhou,其他部分按照图里抄就行。前面是你的Bucket名。

image-20230630174441399

也可以再添加一个www开头的,除了主机记录,其他内容一样。

image-20230630174724838

然后上传一下index.html和error.html(自己外面随便新建两个网页)到Bucket根目录,测试一下是否成功。

阿里云OSS一键部署工具

1、在hexo项目目录(blog目录)下执行:

$ npm install hexo-deployer-ali-oss --save

耐心等待安装完成。

2、打开hexo项目目录(blog目录)找到配置文件_config.yml 打开修改(近文件末位置)

deploy:
type: ali-oss
region: <您的oss 区域代码>
accessKeyId: <您的oss accessKeyId>
accessKeySecret: <您的oss accessKeySecret>
bucket: <您的bucket name>

(1)其中,您的oss 区域代码,指的是阿里云Region 官方说明文档 阿里云Region和Endpoint对照表中可以查看。

(2)其中,您的oss accessKeyId 和 oss accessKeySecret 指的是登录官方ossbrowser客户端时输入过的两组串码。在官方文档安全信息管理中可以查看。需要短信验证码。

(3)其中,您的bucket name ,即为创建Bucket的名称(我有提醒你记录,记得吗?哈哈哈) 和区域代码一样,在阿里云oss后台 Bucket列表中可查

(4)修改时要去掉尖括号,最终格式如下

deploy:
type: ali-oss
region: oss-cn-beijing
accessKeyId: accessKeyId
accessKeySecret: accessKeySecret
bucket: bucket name

到此只需要:

$ hexo g
$ hexo d

就可以完成部署。