将Hexo博客部署在华为云OBS中

本文最后更新于：2023年1月20日 下午

购买的华为云 HECS 服务器马上就要过期了。回顾这一年，除了在上面更新博客，几乎没使用服务器做其他事情。由于续费费用较高，而且我也没有继续使用云服务器的需求，所以我打算在服务器过期之前把博客部署到华为云的对象存储服务 OBS 中。

为什么可以在没有云服务器的基础上继续搭建博客呢？主要原因就是 Hexo 博客页面都是静态文件，评论等其他功能是通过在 HTML 中插入 Javascript 脚本运行的。而且华为对象储存 OBS 可以搭建静态博客，甚至可以使用 CDN 加快访问博客的速度。

一、创建桶

华为云对象存储服务 OBS 相当于高级云盘，具有访问权限控制、多版本控制、静态网站托管、数据加密等功能。我们就是使用对象存储服务中的“静态网站托管”功能来搭建博客的。

“桶”是 OBS 中存储对象的容器。我们需要先创建一个桶，然后才能在对象存储服务 OBS 中存储数据。

操作步骤可以直接参考文档-创建桶，具体如下：

  1. 在 OBS 管理控制台左侧导航栏选择“桶列表”
  2. 在页面右上角单击“创建桶”，系统弹出如下图所示的页面。
    创建桶
  3. 我们可以直接按照默认配置创建桶，只需要输入“桶名称”。

二、上传 Hexo 博客静态文件至 OBS

每次在运行 hexo g 之后，我们需要将生成的静态文件上传到桶中，操作步骤可以参考文档-上传文件，具体如下：

  1. 在 OBS 管理控制台左侧导航栏选择“桶列表”。
  2. 在桶列表单击待操作的桶，进入“对象”页面。
  3. 在左侧导航栏，单击“对象”。
  4. 进入待上传的文件夹，单击“上传对象”，系统弹出“上传对象”对话框。
    上传对象
  5. 指定对象的存储类别。保持默认。
  6. 拖拽本地文件或文件夹至“上传对象”区域框内添加待上传的文件。
    也可以通过单击“上传对象”区域框内的“添加文件”，选择本地文件进行添加。
  7. 其他保持默认，单击“上传”。

注意：

  • 生成的静态文件在 Hexo 博客目录下的 public 文件夹中，你应该可以在该文件夹中看到 index.html 文件。
  • 必须将 public 文件夹中的所有文件复制到桶根目录下，你应该可以在桶根目录中看到 index.html 文件。

推荐使用 OBS Browser+ 图形化管理工具来上传和管理桶内文件

三、通过 Hexo 自动部署到 OBS（可选）

由于博客网页是静态文件，我们在每次 Hexo 生成静态文件后，都需要手动重新上传到 OBS，比较麻烦，所以我们可以使用 Hexo 的一个插件 hexo-deployer-huaweicloud-obs 来快速将生成的静态文件直接部署到 OBS，省去自己手动上传的过程。

1. 安装 hexo-deployer-huaweicloud-obs 插件

使用终端进入 Hexo 的博客目录，在目录下输入以下指令安装该插件；

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

2. 申请 OBS 的访问密钥

  1. 在“控制台”页面，鼠标移动至右上方的用户名，在下拉列表中选择“我的凭证”。
    我的凭证
  2. 在“我的凭证”页面，单击“访问密钥”页签。
  3. 单击“新增访问密钥”，输入验证码或密码。
    新增访问密钥
  4. 单击“确定”，生成并下载访问密钥。
    创建访问密钥成功后，您可以在访问密钥列表中查看访问密钥ID（AccessKey），在下载的.csv文件中查看秘密访问密钥（SecretAccessKey）。
  5. 记录好 AccessKey 和 SecretAccessKey 用于下一步插件的配置。

3. 配置 hexo-deployer-huaweicloud-obs 插件

安装好 hexo-deployer-huaweicloud-obs 插件后，在博客目录下找到 _config.yml 做如下的配置：

1
2
3
4
5
6
7
8
9
10
11
12
# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: "huaweicloud-obs"
  server : "https://obs.cn-north-1.myhwclouds.com"
  bucket: "obs-2f97"
  accessKeyId: "R7DYQD3DQRRLTDWYttE3S"
  secretAccessKey: "TERHf0NGpDrbhsbc1h3xymB9w22wK8lLgOhdgFkgjCB2"
  localFilesIgnorePattern: "^\\..*"
  remoteDir: "/"
  syncDeletedFiles: "yes"
  syncDeletedFilesIgnorePattern: "^\\..*"

各项配置说明如下：

名称 必选 默认值 描述
server 必填 null OBS服务器地址，以https://开头，不包含桶名称
比如https://obs.cn-north-1.myhwclouds.com
bucket 必填 null OBS桶名称
accessKeyId 必填 null 访问OBS的accessKeyId
secretAccessKey 必填 null 访问OBS的secretAccessKey
localFilesIgnorePattern 可选 “^\..*” 本地忽略文件的正则表达式
与文件相对于public的相对路径相匹配，路径分隔符为/
比如： img/avast.png
remoteDir 可选 / 同步到远端的目录，路径分隔符为/
syncDeletedFiles 可选 yes yes或者no, 除syncDeletedFilesIgnorePattern匹配上的文件外
如果是yes，则本地文件删除后，OBS中的文件也会对应删除
syncDeletedFilesIgnorePattern 可选 “^\..*” 远端忽略文件的正则表达式
与文件相对于remoteDir的相对路径相匹配，路径分隔符为/
比如： img/avast.png

你可以通过 OBS 管理控制台直接查看某个桶的详情。

  1. 在 OBS 管理控制台左侧导航栏选择“桶列表”。
  2. 在桶列表单击待操作的桶，进入“对象”页面。
  3. 在“基本信息”下查看桶的基本信息，如图1所示。
    桶的基本信息

4. 添加桶策略

由于插件在部署的时候需要获取桶文件列表（ListBucket），所以我们需要创建“允许匿名用户 ListBucket”的“公开读”桶策略。

  1. 在OBS管理控制台左侧导航栏选择“桶列表”。
  2. 在桶列表单击待操作的桶，进入“对象”页面。
  3. 在左侧导航栏，单击“访问权限控制 > 桶策略”。
  4. 单击“创建”。
  5. 单击“公共读”对应模板右侧的“使用模板创建”。
    桶策略模板
  6. 编辑桶策略，在“包含动作中”额外添加 ListBucket 的桶操作。
  7. 单击界面右下角的“配置确认”，确认桶策略信息是否正确。
    创建桶策略
  8. 单击界面右下角的“创建”，完成桶策略创建。

5. Hexo 生成静态文件并自动部署到 OBS

每次更新博客，通过终端在 Hexo 的博客目录下输入以下指令生成静态文件并自动部署到 OBS：

1
hexo d -g

如果在部署的过程中出现以下错误提示:

1
2
3
4
5
6
7
8
9
10
INFO  Validating config
INFO  Deploying: huaweicloud-obs
get remote obs file list ...
https://obs-2f97.obs.cn-north-1.myhwclouds.com?max-keys=1000&prefix=
/hexo/example.com/node_modules/huaweicloud-obs-sync/lib/sync.js:78
            if (data.ListBucketResult.Contents != undefined) {
                                      ^

TypeError: Cannot read properties of undefined (reading 'Contents')
    at getOBSFileList (/hexo/example.com/node_modules/huaweicloud-obs-sync/lib/sync.js:78:39)

主要原因是匿名用户无法获取桶文件列表（ListBucket），只需按照添加桶策略的操作步骤添加“公共读”的桶策略即可解决。

四、开启 OBS 静态网站托管

我们可将自己的桶配置成静态网站托管模式，并通过桶域名访问该静态网站。开启 OBS 静态网站托管可以参考文档-配置静态网站托管，具体操作如下：

  1. 在 OBS 管理控制台左侧导航栏选择“桶列表”。
  2. 在桶列表单击待操作的桶，进入“对象”页面。
  3. 在页面右侧“基础配置”区域下，单击“静态网站托管”卡片，系统跳转至“静态网站托管”界面。
    或可以直接在左侧导航栏单击“基础配置>静态网站托管”，进入“静态网站托管”界面。
  4. 单击“配置静态网站托管”，系统弹出“配置静态网站托管”对话框。
  5. “状态”设置为使能状态。
  6. “托管模式”选择“配置到当前桶”，如下图所示。
    配置静态网站托管
  7. 在“默认首页”、“默认 404 错误页面”中设置默认缺省页面和 404（Not Found）页面。
    • 默认首页：即访问静态网站时的默认首页。当使用 OBS 管理控制台配置静态网站托管时，仅支持 html 格式的网页文件，这里我们填写 index.html。
    • 默认 404 错误页面：即访问静态网站遇到错误时，OBS 返回给用户的错误页面。这里我们填写 404.html。
  8. 单击“确定”。
    如果你的桶添加了“公共读”的桶策略，在 OBS 上托管静态网站配置生效后，你就可以通过静态网站托管访问域名访问该静态网站。

五、开启 CDN 加速网站访问

我们使用 OBS 存储 Hexo 的静态资源文件，开启静态网站托管，可以无服务器搭建博客。但是文件只存储在一个区域，不同区域的用户访问 OBS 的响应速度存在差异。在需要频繁访问的场景下，直接访问 OBS 来获取相应文件，还会消耗大量的流量费用。

1. CDN 加速原理

OBS 提供低成本的存储，华为云 CDN 可以提供网站加速、文件下载加速和点播加速。将数据存放在 OBS 中然后通过配置 CDN 加速，这样构造的业务系统可以在降低成本的同时，提高终端用户使用感受。当终端用户发起访问请求时，会首先通过 CDN 查找对此域名响应速度最快的 CDN 节点，并查询此节点是否有缓存终端用户请求的内容。[1]

在 CDN 节点没有缓存用户请求的数据或缓存到期的情况下，CDN 加速访问 OBS 的示意图如下图所示。

CDN加速原理(无缓存)

当其他终端用户再次访问相同的数据时，CDN 将直接返回缓存的数据给终端用户，而无需再向 OBS 发起访问请求。在 CDN 有缓存的情况下，CDN 加速访问 OBS 的示意图如下图所示。

CDN加速原理(有缓存)

2. CDN 方案优势

  • 低成本：OBS 提供 CDN 回源流量包折扣方式，使 CDN 从 OBS 获取数据时流量费用更低。当数据缓存至 CDN 节点时，后续请求都将通过 CDN 回源流量计费，从而减少 OBS 费用。
  • 高效率：华为云 CDN 具有加速资源丰富、节点分布广泛优势，保证将用户请求精准调度至最佳边缘节点，提供有效且稳定的加速效果。

3. 开通 CDN 服务

在使用 CDN 之前，你需要开通 CDN 服务。具体操作步骤如下：

  1. 登录华为云控制台，在控制台首页左上角选择“服务列表 > CDN 与智能边缘 > CDN”。
  2. 单击“前往开通”，进入服务开通界面。
    开通CDN服务
  3. 选择您的计费方式，如图所示，单击“立即开通”。
    选择CDN计费方式

4. 添加 CDN 加速域名

如果要开启 CDN，你的域名必须已在工信部备案，且当前备案信息正常可用！

如果要通过 CDN 加快博客访问速度，首先需要创建加速域名。CDN 通过加速域名将源站上需要加速的内容缓存到 CDN 节点，达到加速访问资源的效果。操作步骤如下：

  1. 登录华为云控制台，在控制台首页中选择“CDN与智能边缘 > CDN”，进入CDN控制台。
  2. 在左侧导航栏选择“域名管理”，进入域名管理页面。
  3. 在域名管理界面，单击“添加域名”，在弹出的对话框中配置域名参数。“源站类型”选择“OBS 桶域名”，在下面选择对应的桶，勾选“静态网站托管”，如图所示。
    添加域名
  4. “确定”，完成配置。

5. 加速域名添加 CNAME 记录

用户在访问加速域名时，本地 DNS 服务器通过 CNAME 方式将访问请求重定向到 CDN 服务。CDN 通过一组预先定义好的策略(如内容类型、地理区域、网络负载状况等)，将当时能够最快响应用户的 CDN 节点 IP 地址提供给用户，使用户可以以最快的速度获得网站内容。使用 CDN 后的 HTTP 请求处理流程如下。[2]

CDN工作原理

如果你已成功添加加速域名，系统会自动为你的加速域名分配对应的 CNAME域名。加速域名在 CDN 服务中获得的 CNAME 域名不能直接访问，必须在加速域名的域名服务商处配置 CNAME 记录，将加速域名指向 CNAME 域名，访问加速域名的请求才能转发到 CDN 节点上，达到加速效果。[3]

如何配置CDN的CNAME解析

如果您的域名是在华为云，请参见以下域名解析文档：华为云解析配置方法。

如果您的域名是在 DNSPod，请参见以下域名解析文档：DNSPod 配置方法。

如果您的域名是在万网，请参见以下域名解析文档：万网配置方法。

如果您的域名是在新网，请参见以下域名解析文档：新网配置方法。

CNAME 记录和 A 记录冲突，如果域名已经有 A 记录，你需要删除 A 记录，然后再去配置 CNAME 记录集。

加速域名添加 CNAME 记录后，等待数分钟，尝试访问加速域名，应该就可以打开博客网页了。

如果在 OBS 控制台配置“源站类型”为“OBS 桶域名”的加速域名后，访问 OBS 桶中对象无法在线预览，变成强制下载，你需要登录 CDN 控制台的“域名管理”界面，在相应域名的“高级配置”中添加 Content-Disposition 响应头，取值为 inline 。如果执行完上述步骤后，访问 .html 静态网站文件仍然是下载，则需要在 CDN 控制台刷新缓存。具体方法请参见缓存刷新。

添加Content-Disposition响应头

每次在更新博客后，最好在 CDN 控制台中对博客首页进行缓存刷新。URLs 内填写首页网址，例如 https://example.com/index.html。

6. 部署 SSL 证书（可选）

CDN 支持 HTTPS 安全加速，我们可以通过在 CDN 控制台配置加速域名的 HTTPS 证书，启用 HTTPS 加速服务。

部署 HTTPS 证书前，我们需要申请 SSL 证书。华为云能申请免费的 DigiCert 证书。具体操作如下：

  1. 登录管理控制台。
  2. 单击页面左上方的，选择“安全与合规 > 云证书管理服务”，进入云证书管理界面。
  3. 在左侧导航栏选择“SSL证书管理”，并在SSL证书管理界面右上角，单击“购买证书”，进入购买证书页面。
  4. 在购买证书页面，“服务类型”选择“SSL 证书-域名证书”，“域名类型”选择“单域名”，“域名数量”默认 1 个，“证书类型”选择“DV (Basic)”，“证书品牌”选择“DigiCert”，如下图所示。
    购买证书
  5. 在左侧导航栏选择“SSL证书管理”，并SSL证书页面中待申请证书所在行的“操作”列，单击“申请证书”，系统从右面弹出申请证书详细页面。
  6. 在弹出申请证书详细页面中，填写域名信息，点击“下一步”。
    申请证书
  7. 填写授权人信息，点击“提交申请”。
    填写授权人信息
  8. 申请数字证书需要通过 DNS 验证域名的所有权，你需要在域名解析中添加一条 TXT 类型记录。在如果你的域名是在华为云上申请的，且已使用云解析服务，系统会自动为你的域名添加 DNS 解析记录。
  9. 验证完成后，数分钟内就会签发证书，你应该可以在“SSL证书管理”面板看到证书状态为“已签发（申请进度 100%）”。
  10. 点击右侧“部署证书”，弹出的页面中勾选“CDN”下面对应的域名，点击“部署”。
    部署证书

7. 配置 CDN（可选）

在域名管理页面，我们需要点击加速域名的“设置”来配置缓存规则、智能压缩、安全加速等，提高缓存命中率、优化加速效果、提升安全性。

提高安全性：

配置项 说明
HTTPS 配置-
HTTPS 配置		 推荐开启。 如果你在华为云的云证书管理服务(CCM)中将 SSL 证书推送部署到 CDN 中，HTTPS 配置状态应该为“已开启”，当然你也可以将已有的证书和私钥复制粘贴到这。
HTTPS 配置-
TLS版本配置		 推荐只选择 TLS 1.2 和 TLS 1.3。 传输层安全性协议（TLS：Transport Layer Security），是一种安全协议，目的是为互联网通信提供安全及数据完整性保障，最典型的应用就是HTTPS。目前，有四个版本的TLS协议：TLS1.0/1.1/1.2/1.3，版本越高，安全性相对更高，但是对老版本的浏览器兼容性相对较差。
HTTPS 配置-
强制跳转		 推荐“跳转类型”为 HTTPS。 HTTP 是超文本传输协议，信息是明文传输，HTTPS 则是具有安全性的 SSL 加密传输协议。SSL 证书在网站信息安全上是至关重要的，它保护了信息的机密性、完整性和身份认证。

优化加速效果：

配置项 说明
基本配置-
IPv6 开关		 推荐开启。 中国大陆大多数节点已支持 IPv6，开启 IPv6 配置后，如果用户采用 IPv6 协议访问 CDN，而最优节点不支持 IPv6 协议，用户仍可以以 IPv4 协议访问 CDN 节点。
回源配置-
私有桶回源		 如果你的 OBS 桶没有添加“公共读”桶策略，需进行私有桶回源配置，开启私有桶回源。
首次配置OBS私有桶回源，页面显示如下：
私有桶回源
(1) 单击“立即授权”，弹出云资源委托授权对话框，如下图所示。
云资源委托授权
(2) 单击“确定”，系统将为您在 IAM 管理控制台委托页面创建名为 CDNAccessPrivateOBS 委托关系，CDN 将有权限访问您的私有 OBS 桶。
如果您的 OBS 桶已经添加了“公共读”桶策略，请不要开启 OBS 私有桶回源。
(3) 授权委托后的页面如下：
私有桶回源
高级配置-
智能压缩		 推荐同时开启“Gzip压缩”和“Brotli压缩”。 开启智能压缩功能时，CDN 会自动压缩您的静态文件。智能压缩能够有效缩小传输文件的大小，提升传输效率，减少带宽消耗。智能压缩包含 Gzip 压缩和 Brotli 压缩，Brotli 压缩的性能比 Gzip 压缩提升约 15%~25%。
HTTPS 配置-
HTTP/2		 推荐开启。 HTTP/2作为新一代超文本传输协议，具有有效减少 TCP 握手时延、报文头部传输量、提升传输效率等优点。注意：需要开启 HTTPS 才能启用 HTTP/2。
HTTPS 配置-
OCSP Stapling		 推荐开启。 开启OCSP Stapling功能，CDN可以预先查询并缓存在线证书验证结果，在与浏览器进行TLS连接时返回给浏览器，浏览器无需再次前往CA站点查询，从而减少用户验证时间。 注意：需要开启 HTTPS 才能启用 OCSP Stapling

六、总结

无服务器搭建 Hexo 博客有三个关键步骤：

  • 将 Hexo 生成的静态文件上传到对象存储 OBS 中
  • 创建 CDN，回源到 OBS
  • 绑定加速域名到 CDN


flowchart LR
    D((用户)) <-- 加速域名 --> A[CDN] 
    A[CDN] <-- 回源 --> B[(OBS)] 
    C(Hexo) -- 上传 --> B[(OBS)]

相较于在云服务器上搭建博客，“对象存储+CDN”模式优势很多，例如维护方便、费用更低、访问速度更快。如果博客的访问流量不多，甚至可以做到 0 元“白嫖”。

参考资料

  1. CDN加速_对象储存服务OBS_用户指南_华为云. https://support.huaweicloud.com/ugobs-obs/obs_41_0041.html ↩
  2. 工作原理_内容分发网络CDN_产品介绍_华为云. https://support.huaweicloud.com/productdesc-cdn/cdn_01_0109.html ↩
  3. 配置CNAME域名解析_内容分发网络CDN_快速入门_华为云. https://support.huaweicloud.com/qs-cdn/cdn_01_0048.html ↩
网站搭建
#hexo #博客 #华为云 #OBS #CDN
将Hexo博客部署在华为云OBS中
https://vickey.fun/2023/01/16/deploy-hexo-blog-on-huaweicloud-obs/
作者
饶玮琪
发布于
2023年1月16日
许可协议