首页计算机科学技术分享经验分享

    ✨ 我是流萤白沙的「文章捕手」，擅长在文字的星海中打捞精华。每当新的篇章诞生，我就会像整理贝壳一样，将思想的闪光点串成珍珠项链~

    本文介绍了一种利用Qexo实现静态博客动态管理的方法，解决了在没有电脑的情况下更新博客的难题。通过将环境上传至GitHub，并结合GitHub Actions实现自动部署，用户可以在线编辑博客内容。文章详细阐述了Qexo的部署流程，包括使用Vercel进行一键部署、创建数据库、绑定项目及重新部署等步骤。此外，文中还提供了设置自动部署的工作流配置和Secrets设置，确保用户能够顺利完成博客的动态管理和更新。此方法具有较高的实用价值，适合希望简化博客更新流程的用户。

    # 前言

    静态博客每次更新都要重新生成一次网页文件，然后将其推送到仓库才能完成更新，这个过程其实也并不复杂，但是出门在外时，身边没有电脑的情况下就变得麻烦起来了。虽然也有其他办法实现更新，不过都有局限性，例如

    1. 在移动设备上搭建一个虚拟环境进行更新

      • 门槛较高，如果没有一定知识基础很难实现

    2. 在编辑器上完成更新之后将文件推送到仓库，利用 github actions 实现自动部署

      • 不利于管理，出错需要在线排查，操作失误易对博客造成影响

    经过寻找，我发现了更好的办法，将环境上传到仓库，利用本文的主角 qexo 对其进行管理，通过 qexo 在线进行编辑之后利用 github actions 实现自动部署，相当于为静态博客添加了 “后台”，化静为动，实现动态管理。

    # 使用方法

    # Qexo 部署

    通过 vercel 一键部署，如果需要其他部署方式请自行查阅 Qexo 文档

    --->Vercel 一键部署 <---
    (给图片加上链接会被图片预览覆盖，所以去掉图片了)

    第一次进行部署会报错，无视即可

    # 创建数据库

    进入 Vercel Storage 界面 然后点击右上角的 Create Database 并选择 Neon

    image-20250320161151941

    请注意在地区选择的位置选择与你上一步项目对应的地区（一般为 Washington, D.C., USA (East) - iad1 ），Plans 选择 Free

    image-20250320161415820

    # 绑定项目

    在 Storage 找到你创建的数据库点击 Connect Project 连接到之前创建的项目

    # 重新部署

    点进你创建的 qexo 项目，找到 Deployments ，点击右边的三个小点，然后 Redeoply

    image-20250320162137245

    # 初始化

    完成前几步之后进入 vercel 给你的域名根据引导完成初始化

    1. Github密钥 填 Github 设置 里生成的 Token (建议使用 Classical) 需要 Repo & Workflow 下的权限 不建议给出所有权限
    2. 绑定的仓库是你的博客环境所在的仓库 (没有就新建一个，因为包含你的配置文件，记得设置成私有)，如果你使用的 Hexo 就是 hexo 的根目录
    3. 建议绑定自己的域名，vercel 分配的 app 域名无法在大陆进行访问

    # 设置自动部署

    # 配置工作流

    前往你的博客环境所在的仓库，找到 Actions ，点击 New workflow

    image-20250320164239502

    然后输入下列代码并点击 Commit changes...

    这个工作流适用于 Hexo 博客 SokaX 主题，不过其他框架的博客也差不多，照葫芦画瓢即可

    新增排除_drafts，避免编辑时频繁触发自动部署

    name: Deploy Hexo to GitHub Pages
    on:
      push:
        branches:
          - main
        paths:
          - '*.json'
          - '**.yml'
          - '**/source/**'
          - '!**/source/_drafts/**'  # 排除目录内文件
          - '!**/source/_drafts/'    # 新增：排除目录本身
          - '**/themes/**'
    jobs:
      build:
        runs-on: ubuntu-latest
        steps:
          - uses: actions/checkout@v4
            with:
              submodules: recursive
              fetch-depth: 0
          - uses: actions/setup-node@v4
            with:
              node-version: 20
      
          - name: Configure PNPM
            env:
              SHELL: /usr/bin/bash  # 设置 SHELL 环境变量
            run: |
              npm install -g pnpm@10.6.3
              pnpm setup
              PNPM_PATH=$(grep 'export PNPM_HOME=' ~/.bashrc | cut -d'"' -f2)
              echo "$PNPM_PATH" >> $GITHUB_PATH
              echo "PNPM_HOME=$PNPM_PATH" >> $GITHUB_ENV
          - name: Install Hexo CLI
            run: pnpm add -g hexo-cli  
          - name: Install Dependencies
            run: pnpm install
          - name: Install theme dependencies
            working-directory: ./themes/shokax
            run: pnpm add esbuild
          - name: Generate static files
            run: |
              hexo clean
              hexo generate
              hexo algolia
          - name: Deploy with hexo-deployer-git
            env:  #由于渲染问题，下面 secrets 无法正常显示，使用时请将｛｝替换为 {}
              GIT_USER: $｛｛ secrets.USERNAME ｝｝
              GIT_EMAIL: $｛｛ secrets.EMAIL ｝｝
              DEPLOY_REPO: https://$｛｛ secrets.TOKEN ｝｝@$｛｛ secrets.GH_REF ｝｝
              DEPLOY_BRANCH: main
            run: |
              git config --global user.email "$GIT_EMAIL"
              git config --global user.name "$GIT_USER"
              sed -i "s|repository: .*|repository: $DEPLOY_REPO|" _config.yml
              sed -i "s|branch: .*|branch: $DEPLOY_BRANCH|" _config.yml
              hexo deploy
    # 设置 Secrets
    

    为了保护重要的资料，需要把这些资料设置到 Secrets 里，然后通过 $ 引用。
    
在你环境仓库的  Settings  -->  Secrets --> Actions
    

    image-20250320170339393
    

    设置的 secrets 说明：
    

    


    
名称
内容

    
    


    
GH_REF
要提交到的 Github 仓库地址

    

    
TOKEN
Github Token

    

    
EMAIL
Git 用户邮箱

    

    
USERNAME
Git 用户名

    
    

    

    

    OK, 至此结束，你已经成功为你的博客接入 qexo