Hexo博客-Qexo后台的部署

参考：
1.Qexo官网
2.hexo+netlify+Qexo后端+github自动化
3.使用 Github Action 自动部署

说明：
github_token：github的token
github_username：github的用户名

安装前提：
已经可以成功部署Hexo博客

1.Qexo简介

Qexo是一个 Hexo 博客的后台管理界面，通过借助Github的自动部署（Actions）完成博客的在线发布与更新。

我使用的是基于 Hexo 的 Butterfly 主题，之前是通过在本地编辑md文件，然后通过 hexo clean && hexo generate && hexo deploy 命令上传到Github仓库（开启了 Pages 的仓库，一般为：github_username.github.io），这样就只能在自己电脑上更新博客，如果想要在在线更新博客就需要借助 Qexo。

2.Github的Actions配置

首先新建一个仓库存放博客的源文件，这里我的仓库名为 blog-source，注意一定要设为私密仓库（private），然后在本地拉取刚刚创建的仓库.

git clone https://github.com/github_username/blog-source.git

拉取成功之后会在本地生成 blog-source 文件夹，里面包含 .git 文件夹，注意不要删除 blog-source 文件夹中的任何内容，接着将博客的源文件复制到此文件夹，如果你和我一样之前是通过本地推送的，则需要复制图中所示的文件夹到 blog-source 文件夹下。注意要删除 themes/butterfly 文件夹下的 .git 文件夹与 .github 文件夹（如果存在的话），不删除 .git 文件夹 push 仓库时会报错，.github 文件夹应该影响不大。

最终 blog-source 文件下的内容如下：

之后将源文件 push 到仓库，在 blog-source 文件夹（目录）下执行如下命令：

git add .
git commit -m "博客源文件"
git push

推送成功之后，配置 blog-source 仓库的 Actions，方便自动部署，只要 push 该仓库就会自动完成部署工作。

将如下内容复制到 autodeploy.yml 文件中，如果没有配置过 gulp 则第 54 行与第 66 行的内容需要注释掉，github_token 与 github_name 替换为自己的。

name: 自动部署
# 当有改动推送到main分支时，启动Action
on:
  push:
    branches:
      - main
      #2020年10月后github新建仓库默认分支改为main，注意更改
  release:
    types:
      - published

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - name: 检查分支
        uses: actions/checkout@v2
        with:
          ref: main

      - name: 安装 Node
        uses: actions/setup-node@v1
        with:
          node-version: "16.x"

      - name: 安装 Hexo
        run: |
          export TZ='Asia/Shanghai'
          npm install hexo-cli -g

      - name: 缓存 Hexo
        id: cache-npm
        uses: actions/cache@v3
        env:
          cache-name: cache-node-modules
        with:
          path: node_modules
          key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/package-lock.json') }}
          restore-keys: |
            ${{ runner.os }}-build-${{ env.cache-name }}-
            ${{ runner.os }}-build-
            ${{ runner.os }}-

      # Install pandoc for mathjax (Optional)
      - name: Install pandoc
        run: |
          cd /tmp
          wget -c https://github.com/jgm/pandoc/releases/download/2.14.0.3/pandoc-2.14.0.3-1-amd64.deb
          sudo dpkg -i pandoc-2.14.0.3-1-amd64.deb
  
      - name: 安装依赖
        if: ${{ steps.cache-npm.outputs.cache-hit != 'true' }}
        run: |
          # npm install gulp-cli -g #全局安装gulp
          npm install --save
  
      - name: 修改双栏插件的CDN
        run: |
          sed -i "s/cdn.jsdelivr.net/blogresource.sqwdream.top\/cdn.jsdelivr.net/g" node_modules/hexo-butterfly-article-double-row/index.js
  
      - name: 生成静态文件
        run: |
          hexo clean
          hexo bangumi -u #bilibili番剧更新
          hexo generate
          # gulp

      - name: 部署到Github
        uses: JamesIves/github-pages-deploy-action@v4
        with:
          token: github_token
          repository-name: github_name/github_name.github.io
          branch: main
          folder: public
          commit-message: "${{ github.event.head_commit.message }} Updated By Github Actions"

第 57-59 行代码为修改 butterfly-article-double-row 插件的 CDN 配置，因为 jsdelivr 资源在国内无法加载，如果你没用到这一插件，这些代码也可以删除。最终自动化部署显示为绿色才为成功。

常见的报错：

1.没有注释第 54 行与 66 行可能会报如下错误

2.如下错误为 hexo-renderer-pandoc 插件安装问题，需要加入第 44-49 行代码，如果不需要这一插件可以删除这些代码

3.Qexo配置

注：Qexo只是方便在线发布与更新的

申请数据库，我这里是采用 PlanetScale 提供的免费 MySQL 数据库，注册 PlanetScale 账号，或者直接用github账号登录，注册之后创建数据库，流程如下：

点击 create

数据库的名字随便取，由于创建的数据库不支持大陆IP，所以区域一定要选择 AWS / N. Virginia (us-east-1)，接着点击创建即可

创建之后来到如下页面，点击 connect

点击后会显示数据库的用户名与密码（密码只显示一次），一定要记录下来，后面要用

如果没有记录密码就切走页面了，密码不会再次显示，可以点击 New password 重新生成

接着来到设置页面，记录连接信息，后面要用，Connect with 那里切换为 Django 看到的信息会更直观，

接下来就是 vercel 部署（前提是已经注册了vercel账号），直接 一键部署 就行，首次部署会报错, 请无视并重新进入项目, 在项目设置界面添加环境变量 Environment Variables，具体参数的意义如下表所示：

具体设置如下：

配置环境变量之后，重新部署，

重新部署之后，如果显示如下则部署成功，接着再访问 blog-qexo-three.vercel.app（访问你自己的域名）访问页面，最好绑定一个二级域名。

接下来就是Qexo后台的配置了，

用户名和密码就是以后登录这一后台所需的账号密码，自行设置

博客配置那里，进行如下设置，服务商根据你的源码仓库所在平台了，我这里就是github，博客Hexo、Hugo也都可以，我的是Hexo，github密钥就是 github_token，需要你生成，生成步骤如下：

可以设置为永不过期，注意勾选repo与workflow，只显示一次，注意保存

Github仓库为你的博客源文件所在的仓库我的为 blog-source，注意不是最终推送的 github_username.github.io仓库，项目分支为 main，路径留空即可，会自动识别。

vercel配置，token点击 这里 生成， Qexo 部署所在项目的 ID 位于 Settings -> General -> Project ID

配置成功之后，就可以看到自己的源文件了，之后就可以进行在线撰写与更新了。

可能的问题：

1.当你长时间不登录Qexo，数据库会进入休眠，此时登录Qexo会显示：

只需要进入 PlanetScale 唤醒数据库即可，即 wakeup 一下

2.如果你的长时间不登录并且源文件仓库名或者 github_token 发生了变化，在唤醒数据库的情况下，可以进入主页但是无法进入设置界面，可以尝试如下操作，在域名后面加上 advanced.html，修改 PROVIDER 中的 token 等参数。