Hexo自动化部署

零. 目标

每次在本地利用hexo写博客，push到远程云效仓库后自动触发云效流水线，流水线将hexo博客编译成静态页面，最后部署到阿里云函数计算。
涉及技术：

• npm
• hexo
• git
• 云效
• 函数计算
• 域名相关
• …

一. 搭建本地hexo博客

0. 安装git。

• 略(-.-)

1. 安装nodejs。

• 建议安装LTS版本（v18）。nodejs下载

2. 安装hexo。

• hexo安装文档

  mkdir hexo-blog
  cd hexo-blog
  npm install hexo-cli (macOS: sudo npm install hexo-cli)

3. 创建hexo博客。

hexo init blog
cd blog
npm install (macOS: sudo npm install)

4. 启动博客服务。

此时不出意外，执行hexo server 或 npm run server命令后，浏览器访问 http://localhost:4000 将会打开hexo博客。

5. 配置hexo博客、更换主题等。

• (非重点，略)

二. 创建函数计算

1. 登录阿里云函数计算。

• 此处使用函数计算2.0版本演示。

2. 创建服务

• 名称为HexoBlog。
  

3. 创建函数

• 使用自定义运行时创建
• 函数名称为blog。
• 函数代码->运行环境为Nginx，监听端口为 80 （此处若为默认9000，将导致网页内跳转会自动添加9000端口的 “BUG”）
• 高级配置->规格方案选择最小规格（因为后续生成的产物为静态页面，所以对硬件资源要求很低）
• 其余保持默认。确定，完成创建。
  此时页面跳转到函数代码。将nginx.conf文件下载下来，保存在本地heox-blog/blog目录下。
  注意：将文件内的监听端口由9000 改为 80

4. 创建（配置）域名

• 在函数计算首页–高级功能–域名管理处添加自定义域名。（需提前备案）
• 在路由配置处设置域名指向当前函数。路径为 /*
  
  创建自定义域名成功后将可通过该域名访问函数计算的默认初始页面。
  
  另：也可利用已有域名，通过路由配置的重写功能访问函数计算。

三. 配置云效流水线

1. 登录阿里云云效

• 进入代码管理 Codeup

2. 新建库。

• 代码库名称HexoBlog。确定。

3. 初始化本地git仓库，并添加远程仓库。

-（略）

4. 将本地仓库push至Codeup仓库。

• 结果如下图
  

5. 流水线

• 流水线模版–> Node.js测试、构建 –> 创建
• 页面跳转到流程配置，点击“添加流水线源”将自动添加当前仓库代码作为流水线源。“开启代码源触发”默认已被选中，当代码提交时，该流水线启动。
• 删除 [测试]流程

构建流程

• 任务步骤1： [Node.js构建]
• Node版本应与代码仓库一致。
• 构建命令

  cnpm install hexo-cli -g
  cnpm install
  hexo clean
  hexo g

  此构建步骤将hexo博客编译成静态页面。
• 任务步骤2： [移动nginx配置文件]
• 点击“添加步骤”，选择“构建”、“执行命令”，并添加如下命令

  # nginx.conf 文件移动到 ./public 目录，以便FC读取
  mv nginx.conf ./public/

• 任务步骤3： [构建上传物] (可选)
• 打包路径设置为 public/。此步骤将编译产物打包。可下载查看。
• 任务步骤4： [部署到函数计算]
• 点击“添加步骤”，“发布”，“阿里云函数计算部署”。
• 选择创建的函数。源码类型选择本地代码。代码路径选择 public/。
  配置完之后，步骤应如下图
  
• 最后点击保存并运行。等待运行结果。若无意外，函数计算已被成功更新。

四. 后续

• hexo新建文章，hexo new post post_title
• 此案例作为Devops的基础，后续可进行更多扩展。如自动化测试、人工卡点等。