Hexo + GitHub Action，零成本自动化部署个人博客

使用Hexo建站，每次在本地修改或新增博客后，都要先构建生成静态页面，再将页面部署到服务器中。使用GitHub Action可以将Hexo的构建生成部署流程在GitHub服务器自动化运行，写好的博文通过git提交到代码仓后会自动更新到网站上，不用频繁操作命令行。

前置条件

已安装配置好VScode。
已安装配置好Node.js、Git、Hexo。

初始化Hexo

创建一个blog文件夹，这是生成静态页面的基础。

hexo init blog
cd blog
npm install

在GitHub上新建两个仓库

其中一个私有仓存blog网站生成代码，另一个公有仓准备存生成的部署网站页面。

明确一下目标：修改网站样式、博客markdown文件等操作后，提交变更到私有仓，然后触发GitHub Action在服务器上进行Hexo构建生成静态网页文件，最后将静态网页文件提交到公有仓，使用GitHub Page呈现网站。有点前后端分离的思想。

创建的公有仓为：

https://github.com/{user}/{repo}.git

其中{user}指用户名，{repo}指仓库名（{repo}最好为xxx.github.io形式的）。

创建Token

Token至少带repo, workflow权限。

创建完毕后记下Token的值（后续使用{Token}指代Token的值），并将其添加到公有仓。

修改_config.yml

此项repo的值为使用Token访问公有仓，，

deploy:
  type: git
  repo: https://{Token}@github.com/{user}/{repo}.git    # 保存静态网页文件的公开仓
  branch: main

配置Github Action工作流

在.github文件夹下新增workflows文件夹，然后新增deploy.yml文件，内容如下。

里面有个node-version要和你本地的node一致。

步骤大致意思就是使用ubuntu-latest作为基础环境，然后安装各种依赖，随后hexo generate生成博客网站静态文件夹，最后把这个文件夹推送到公开仓库的main分支。

name: Deploy Hexo to GitHub Pages

on:
  push:
    branches:
      - main  # 当推送到 main 分支时触发

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout repository
        uses: actions/checkout@v2
        with:
          submodules: false  # 禁用子模块检查

      - name: Setup Node.js
        uses: actions/setup-node@v2
        with:
          node-version: 'v20.17.0'

      - name: Install Dependencies
        run: npm install

      - name: Install Hexo Git Deployer
        run: |
          npm install hexo-deployer-git --save
          npm install hexo-cli -g

      - name: Clean and Generate Static Files
        run: |
          hexo clean
          hexo generate

      - name: Configure Git
        run: |
          git config --global user.name 'github-actions[bot]'
          git config --global user.email 'github-actions[bot]@users.noreply.github.com'

      - name: Deploy to GitHub Pages
        run: |
          cd public/
          git init
          git add -A
          git commit -m "Create by workflows"
          git branch -M main
          git remote add origin https://{Token}@github.com/{user}/{repo}.git    # 保存静态网页文件的公开仓
          git push origin HEAD:main -f

推送验证

把刚才更新的所有文件都推送一遍，github就会触发工作流，然后去网站看工作流运转的如何。

若一切无误，应当在公开仓出现更新后的静态网页文件。

配置Github Pages

存有静态网页文件的代码仓设置中的Github Pages选项开启。

若{repo}为xxx.github.io形式，博客网站的域名就是{repo}的值。

参考

Bilibili视频教程-9分钟零成本搭建自动化部署个人博客(Hexo + Github Action + Page)
如何优雅的使用Github Action服务来将Hexo部署到Github Pages