Hexo静态网站部署到华为云OBS和Github

以下不涉及如何搭建Hexo博客,一切都是在我们已经搭建好自己的网站的前提下进行,且所有操作均以子域名 blog.senorui.top 演示,静态文件为本网站文件。

【如何搭建Hexo可阅读】: https://senorui.top/posts/5bb9.html

创建OBS存储桶

在【OBS】控制台,右上角新建存储桶;区域根据你的位置选择,选择标准存储、多AZ存储,桶名称随意,桶策略选择 公共读关闭加密关闭数据归档。填写完成后按用量收费并创建。
如下图
创建存储桶

存储类别和单、多AZ存储具体差别参见【官方文档】。

计费方式

OBS Browser+工具的使用

获取OBS Browser+工具和密钥

在桶列表上方,【下载OBS Browser+】图形工具并安装到电脑上。然后在右上角点获取访问密钥,进入页面后点新增访问密钥后会自动下载密钥文件credentials.csv到电脑上。

上传工具

使用OBS Browser+图形工具

账号名随便取,根据密钥文件credentials.csv填入AK和SK值,点击保存密钥后登录。

登录工具

上传静态文件

  1. 进入桶根目录后点击上传,对象权限选择公共读,存储类型默认即可,然后上传整个public 目录下的文件。
    文件上传
  2. 全部选中public目录下的文件,拖到桶根目录下即可上传。对象的权限和存储类别默认为创建存储桶时的值。

配置静态网站托管

在网页的对象存储OBS控制台,进入创建的桶概览页,点击配置静态网站托管。

开启网站托管,托管模式为配置到当前桶,填写默认首页index.html、404页为error.html,确认即可得到一个托管静态网站的 访问地址(去掉https://即为桶域名)。

配置网站托管

配置完成后即可通过网站访问地址打开网站。

访问网站

OBS绑定用户域名

在用户域名框填入域名,开启CDN加速,选择业务类型为 网站加速

绑定用户域名

配置CDN

在用户域名后点击管理CDN加速的操作,

ToCDN

跳转到CDN的域名管理页后,点击域名或者设置进入CDN配置页面

配置CDN

基本配置下编辑 源站配置,主源站下,类型选择 源站域名,源站填写绑定的 OBS桶域名

配置源站信息

复制基本信息中的 CNAME信息

CCNAME

到域名控制台,将你的域名以 CNAME类型 解析到此 CNAME值(CNAME信息)

解析CNAME

在CDN域名管理处,当域名状态处于 已开启 时,说明CDN配置已经成功,此时即可通过你的域名访问网站了。

CDN加速成功

域名开启SSL

证书是华为云零元白嫖的,登录账号的情况下,选择DV(Basic)-DigCert-单域名,即可零元购买。

【SSL证书购买】:https://console.huaweicloud.com/scs/?region=cn-east-2#/scs/purchase

SSL购买

SSL证书开启分两种情况。

PS:具体操作就略过了,毕竟这个域名不使用。

华为云托管证书

CDN控制台处点击进入SSL证书管理,申请你的域名的证书,申请成功后,选择推送到华为云CDN产品中。
推送证书

回到CDN控制台,在域名证书管理项,进入配置证书页面,选择华为云托管证书,证书名称选择域名申请的证书名称,回源方式为 跟随 ,开启 强制跳转HTTPS和HTTP/2,然后选中申请证书的相对应的 加速域名(即用户域名),往下一步步确认即可。

配置SSL

自有证书

在CDN控制台,进入证书配置页,选择自有证书,依次填入 证书名称、证书内容、私钥内容,然后回源方式为 跟随开启强制跳转HTTPS和HTTP/2,选中申请证书的对应的 加速域名(即用户域名),一步步往下认即可。

当CDN控制台域名前有小绿锁?时,说明SSL配置已经成功。

SSL配置成功
SSL配置成功

同时将网站部署到GitHub

在域名控制台,你的域名增加一条A类型,线路改为全球默认,值为GitHub Pages的IP的记录集。

然后再增加一条www的A类型,线路默认,值为GitHub的IP的解析记录集。
此www的解析目的是将www.senorui.top自动跳转到senorui.top上来,这样避免别人用www.senorui.top时找不到你的网站。

copy

1
2
3
4
5
#GitHub Pages的IP
185.199.111.153
185.199.110.153
185.199.109.153
185.199.108.153

域名解析

一键部署到华为云OBS

安装hexo-deployer-huaweicloud-obs插件

copy

1
$ npm install hexo-deployer-huaweicloud-obs --save

首先在 _config.yml做如下的配置:

copy

1
2
3
4
5
6
7
8
9
10
deploy:
  type: "huaweicloud-obs"
  server : "https://obs.cn-north-1.myhwclouds.com" #OBS所在的服务器
  bucket: "obs-2f97" #存储桶名称
  accessKeyId: "R7DYQD3DQRRLTDWYttE3S"
  secretAccessKey: "TERHf0NGpDrbhsbc1h3xymB9w22wK8lLgOhdgFkgjCB2"
  localFilesIgnorePattern: "^\\..*"
  remoteDir: "/"
  syncDeletedFiles: "yes"
  syncDeletedFilesIgnorePattern: "^\\..*"

具体参数参考官方文档】: https://developer.aliyun.com/mirror/npm/package/hexo-deployer-huaweicloud-obs

本文作者: Senorui

本文标题: Hexo静态网站部署到华为云OBS和Github

本文链接: https://senorui.top/posts/7f2f.html

版权声明: 本站所有文章除特别声明外,均为原创且采用【CC BY-NC-SA 4.0】许可协议,转载请注明!

发表评论