存储桶设置

创建存储桶

  1. 公有读私有写（暂时，后续配置 CDN 即可私有读写）
  2. 配置管理权限
    image.png

[!tip]
记录下这个子账户的 SecretId 和 SecretKey，后面要用

开启该存储桶的静态网站权限，否则你的 hexo 静态资源文件将无法作为 HTML 在公网预览。

image.png

自动化部署

创建构建计划

在腾讯云控制台搜索 Coding DevOps，点击 立即使用

image.png

进入后创建新项目

image.png

按需选择三样即可

image.png

关联 hexo 的代码仓库

image.png

进入左侧菜单 持续集成 ，然后 创建构建计划

image.png

选择 React + COS 模板即可

只是要用它这个形式，因为和我们的需求有相当大的重复

image.png

  • 计划名称随便设置
  • 代码仓库选择刚刚关联的自己的仓库

image.png

不用纠结于依赖构建等指令，后面都是要改的。
Hexo 没有单元测试，故关闭。
上文记录下的存储桶的子用户信息，填在这里（见 存储桶设置 - 配置管理权限 ）

image.png

[!warning]
记得取消勾选下面的立即构建，还有很多设置项没修改，构建必失败。

设置构建计划

更新 Node.js

[!bug]
截止本文编辑时，最新版 hexo 要求 Node. js>14，Coding 提供的构建节点是 v10，所以不更新会构建失败！

更多 Coding 环境版本说明见默认节点环境｜ CODING DevOps

进入设置

image.png

进入 流程配置 ，选择 文本编辑器

image.png

添加一个新的 stage

1
2
3
4
5
6
7
8
9
10
stage('更新Node.js') {
  steps {
    sh 'rm -rf /usr/lib/node_modules/npm/'
    dir('/root/.cache/downloads') {
      sh 'wget -nc "https://coding-public-generic.pkg.coding.net/public/downloads/node-linux-x64.tar.xz?version=v16.13.0" -O node-v16.13.0-linux-x64.tar.xz | true'
      sh 'tar -xf node-v16.13.0-linux-x64.tar.xz -C /usr --strip-components 1'
    }
    sh 'node -v'
  }
}

注意添加的位置！

image.png

安装依赖

切回到 图形化编辑器 ，来到 3-1 安装依赖 ，点击 执行shell脚本 。
将其内容修改为如下内容

[!warning]
记得将主题部分，更换成你自己使用的主题。安装方式在你所用的主题官网上找。

[!tip]
如果你没有修改主题的源文件，采用的是外部主题配置文件的方式修改主题，可以直接照抄我的作业。

如果你修改了主题的源文件，可以考虑上传到你自己的仓库里去。

1
2
3
4
5
6
# 安装hexo
npm install -g hexo-cli
# 安装依赖
npm install
# 安装主题
git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly

image.png

构建静态资源文件

操作同上，略

image.png

上传到 COS

对应的 5-1 部分，无需修改。

image.png

配置完后，记得点击右上角 保存

修改触发规则

如果是 github 托管的代码，默认是 main ，不是 master

image.png

修改环境变量

将上传的文件夹修改为 ./public/

image.png

触发构建计划

有两种方式，一种是手动点击右上角 立即构建 。或者手动提交一次代码到 main 分支，就能触发上方设置的触发规则。

成功后，根据控制台打印的链接，即可访问。

image.png

或者通过存储桶的访问节点进入也可。

image.png