最近把博客的部分文章迁移到hexo上，加上也少了很多的折腾动力。服务器也差不多到期了，有必要为博客找个新家了。当然白嫖的方案有Github等等，但是最近国际动荡，GitHub的上传总是会被莫名其妙的阻断。

我这里选择的是华为云的全家桶，使用华为云OBS+CDN服务进行托管。因为Hexo生成的是Html的静态网页，对象存储OBS刚刚好可以托管静态网页，还可以加上CDN进行网站的加速访问。

准备工作

  • Hexo的静态博客
  • 备案的域名一枚
  • 华为云开通OBS和CDN产品
  • 下载 OBS Browser+

配置OBS对象存储桶

在控制台 - 选择OBS进行开通 - OBS 管理控制台

  1. 在页面右上角点击”创建桶”
    3baa06f85b1849c8f325581e15fa191f.jpg
  2. 然后在页面上，输入存储通名称，选择存储的区域和存储类别，桶策列选择 公共读。（PS：如果你准备购买存储包建议认真选择好对应区域）
  3. 配置OBS桶的静态网站托管
    配置静态网站 - 把状态点选上 - 设置默认主页index.html
    61673661c24faa17dce7f5c7a8146c94.jpg

上传Hexo的静态文件到OBS

每次运行 hexo g 生成静态文件后，我们需要把这些生成的静态文件上传到存储桶中，Hexo生成的静态文件在根目录的 public 文件夹中。

7879875471553246cf7316ba0a1e4fd9.jpg

拖拽本地public目录下全部文件，通过控制台 - 上传对象 来进行上传。

Hexo 自动部署到 OBS

由于生成的都是静态文件，我们每一次操作hexo生成静态文件后，都要通过控制台进行手动上传，这样比较麻烦。有没有一劳永逸的方法，答案是有点。

我们可以使用 hexo-deployer-huaweicloud-obs 这个插件来进行快速部署，省去自己每一次都要手动上传的烦恼。

  • 安装 hexo-deployer-huaweicloud-obs

打开hexo的目录下，打开Bash终端输入以下命令进行安装

1
npm install hexo-deployer-huaweicloud-obs --save
  • 申请 访问密钥 (AK和SK)

获取访问密钥(AK和SK) 通过该链接可以直达我的凭证页面。或者在用户名 - 我的凭证进入。

b4dab75520bd58433e08c44dc880d33e.jpg

生成密钥后，会自动下载下来 .csv 的文件，里面包含AK和SK的密钥信息。记录下来，待会有用上。

  • 配置 hexo-deployer-huaweicloud-obs

在Bash终端安装好 hexo-deployer-huaweicloud-obs 插件后，在hexo的根目录下找到 _config.yml 添加以下配置：

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

c38589d63de0e3ef5c6776e8c7b67c43.jpg

在左侧导航栏 - 访问权限控制 - 桶策略。

点击创建新的桶策略，选择 公共读 的模板进行创建。

然后编辑策略，在授权操作 - 选择动作 - 桶动作 - 新增 ListBucket

6751583c98dc7299e78f4cf9d64fcc81.jpg

看看创建完成后，检查授权动作，然后保存桶策略。

Hexo 生成静态文件并自动上传到OBS

每一次更新博客，通过Bash终端在 Hexo 的根目录输入命令生成静态文件并自动部署。

1
hexo d -g

9193412892cafbfa91afc2422ea93e6e.jpg

看到这个就上传成功，可以在存储桶查看刚刚上传文件。

开启 CDN 加速访问

OBS在开启静态网站托管后，默认的域名并不能直接访问。如果我们选择OBS来进行访问不加CDN的话，会产生大量的流量消耗费用。

我们需要对应存储对象控制台中，找到域名管理 - 配置加速域名。

服务范围选择”中国大陆” - 业务范围”网站加速” - 填写加速域名 - 静态网站托管也勾选。

1de07318a1af1dbfa4eb0db31d862cac.jpg

然后在域名的DNS管理面板，新增一条CNAME的记录。

b386f9b61d988c35bc1c4313c352c93c.jpg

添加解析后，回到 CDN控制台 进入刚刚添加的域名。

然后进行可选的配置，SSL证书、设置缓存规则和设置浏览器缓存的过期时间等等操作。

7c5449f364e91a79fa72090f72adcd63.jpg
502533a061b3250f69731a88e1c33d1c.jpg