原理

前言：
之前我们通过本地部署的hexo和hexo-deployer-git模块实现了博客的自动部署，但是每次部署都需要手动操作，并且每次部署都需要在本地生成public文件夹，再将其推送到github上，这样不仅麻烦，而且效率低下，所以我们需要一个后端来帮助我们实现自动部署，这样我们只需要在github上提交commit，然后后端就会自动帮我们部署到github上了。

我们通过在GitHub上面开启两个仓库，一个用来存放博客的源码private仓库，另一个用来存放博客的静态文件即之前用来存放GitHub pages的仓库，然后通过GitHub Actions来实现自动部署，这样我们只需要在github上提交commit，然后后端就会自动帮我们部署到github上了。

此时，我们还要在vercel上部署Qexo，使用supabase提供的数据库服务来储存博客数据，然后通过vercel提供的api来与Qexo进行交互，实现博客后端的自动部署。

至此，我们的博客后端就部署完成了。

graph TD
    subgraph 存储层
        A[GitHub: 博客源码 private仓库]
        G[(Supabase\n博客数据存储)]
    end

    subgraph 构建层
        B[GitHub Actions\n自动部署]
        C[GitHub Pages\n静态文件仓库]
    end

    subgraph 展示层
        D[GitHub Pages\n前端展示]
        E[Vercel\nQexo前端]
    end

    subgraph 用户层
        F[普通用户]
        H[博客作者]
    end

    A -->|代码提交| B
    B -->|生成静态文件| C
    C -->|部署| D
    A -->|同步| E
    
    E -->|API交互| G
    F -->|访问博客| D
    F -->|动态数据请求| G
    H -->|登录管理| E
    H -->|发布文章| G
    H -->|修改配置| G
    
    classDef repo fill:#f9d5e5,stroke:#e88bb5;
    classDef service fill:#b8d8d8,stroke:#7ac2c2;
    classDef storage fill:#fed8b1,stroke:#f9a03f;
    classDef user fill:#c5e1a5,stroke:#7cb342;
    
    class A,C repo;
    class B,D,E service;
    class G storage;
    class F,H user;

实现步骤

1. 创建GitHub仓库

首先，我们需要在GitHub上创建两个仓库，一个用来存放博客的源码，另一个用来存放博客的静态文件。

创建博客源码仓库

在GitHub上创建一个新的仓库，命名为blog-source，并将你的博客源码上传到这个仓库中。使用命令：
1
2
3
4
5
git init
git add .
git commit -m "Initial commit"
git remote add origin https://github.com/your-username/blog-source.git
git push -u origin main

注意：

如果之前已经使用过git init，那么应该删去.git文件夹，重新执行上述命令。
如果用git clone安装的themes，那么需要将themes/[yourthemes]文件夹中的.git等配置文件删去，否则会报错。

创建博客静态文件仓库

这个之前在Hexo博客部署到GitHub Pages中已经讲过了，不再赘述。

2. 配置GitHub Actions

GitHub Actions是什么？
GitHub Actions 是 GitHub 提供的持续集成/持续部署（CI/CD）平台，可以自动化地构建、测试和部署你的代码。GitHub Actions 可以在 GitHub 仓库中运行脚本，并且可以在代码提交、创建 Pull Request 或者创建 Release 时触发。

实际上，GitHub Actions 就相当于一个服务器，你可以在其中运行脚本，并且可以在代码提交、创建 Pull Request 或者创建 Release 时触发。

在[repoName]仓库中创建一个.github/workflows文件夹，并在其中创建一个[docName].yml文件，内容格式如下：

name: # 部署工作流名称

on: # 触发条件
  push: # 当有新的commit时触发
    branches:
      - main  # 触发分支

jobs: # 任务
  build: # 任务名称
    runs-on: # 运行环境

    steps: #  步骤
      - name: Checkout code # 用于拉取代码
        uses: actions/checkout@v2 # 使用GitHub Actions的checkout功能

      - name: Setup Node.js # 用于安装Node.js环境
        uses: actions/setup-node@v2 # 使用GitHub Actions的setup-node功能
        with: # 设置参数
          node-version: '14' # Node.js版本

      - name: Install dependencies # 安装依赖
        run: npm install # 运行npm install命令

      - name: Build # 构建项目 以下省略，这个仅是示例

      - name: Deploy # 部署项目
        uses: JamesIves/github-pages-deploy-action@3.7.1 # 使用GitHub Actions的github-pages-deploy-action功能
        with: # 设置参数
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
          BRANCH: gh-pages  # 部署到gh-pages分支
          FOLDER: public  # 静态文件存放的文件夹

申请GitHub Token：在生成GitHub密钥，建议选择classic并需要 Repo & Workflow 下的权限不建议给出所有权限。

在blog-source仓库中创建一个.github/workflows文件夹，并在其中创建一个deploy.yml文件，内容如下：

name: Deploy Hexo to GitHub Pages

on:
  push:
    branches:
      - main  # 当推送到 main 分支时触发
    paths: # 监测所有 source 和 themes 目录下的文件变动，所有 yml,json 后缀文件的变动。
      - '*.json'
      - '**.yml'
      - '**/source/**'
      - '**/themes/**'

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 hexo
        run: npm install -g hexo-cli

      - name: Install yarn
        run: npm install -g yarn

      - name: Install full
        run: yarn install 

      - name: Install Hexo Git Deployer
        run: |
          yarn add hexo-deployer-git --save
          yarn add hexo-cli -g

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

      - name: Configure Git
        run: |
          git config --global user.name '{$yourGithubName}'
          git config --global user.email '{$yourGithubEmail}'

      - 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://{$yourGithubToken}@github.com/{$yourGithubName}/{$yourGithubName}.github.io.git
          git push origin HEAD:main -f

这是我的GitHub Action配置，你可以根据自己的需求进行修改。

然后在命令行输入：

1
2
3

git add .
git commit -m "Add GitHub Action"
git push

等待GitHub Actions运行完成，如果一切顺利，你的博客就会自动部署到GitHub Pages上了。

3. 配置Vercel

登录Vercel，点击右上角的Sign Up，使用GitHub账号登录。
在Vercel中创建一个新项目，这里我们通过Qexo文档的一键部署链接来创建。
在Vercel中配置你的域名，点击Storage，选择Create Datebase创建supabase的数据库，区域一定要选择N. Virginia (us-east-1)。
在Settings的Environment Variables中添加以下变量：

变量名	意义	值（示例）
PG_HOST	PostgreSQL 数据库连接地址	db.xxx.supabase.co
PG_PORT	PostgreSQL 数据库通信端口默认应填写 5432	5432
PG_USER	PostgreSQL 数据库用户名	postgres
PG_DB	PostgreSQL 数据库名	postgres
PG_PASS	PostgreSQL 数据库密码	password