钧言极客站钧言极客

钧言极客

将Hexo上云托管 - 华为云OBS

最近把博客的部分文章迁移到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终端输入以下命令进行安装

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 添加以下配置:

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 的根目录输入命令生成静态文件并自动部署。

hexo d -g

9193412892cafbfa91afc2422ea93e6e.jpg

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

开启 CDN 加速访问

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

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

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

1de07318a1af1dbfa4eb0db31d862cac.jpg

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

b386f9b61d988c35bc1c4313c352c93c.jpg

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

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

7c5449f364e91a79fa72090f72adcd63.jpg
502533a061b3250f69731a88e1c33d1c.jpg

版权声明:本文采用知识共享 署名4.0国际许可协议 [BY-NC-SA] 进行授权
文章名称:《将Hexo上云托管 - 华为云OBS》
文章链接:https://jinjun.top/459.html
本站资源仅供个人学习交流,请于下载后24小时内删除,不允许用于商业用途,否则法律问题自行承担。

评论 2

  1. 华为云存储的价格如何?

    Teacher Du 5月3日    回复
    • 感觉还行吧,0.08/G 这样,我现在基本上业务都在华为云上

      钧言 5月4日    回复