项目部署

点击下面的按钮部署到 Vercel:

部署到 Vercel

首次部署会因为没有数据库报错, 不要管直接进行接下来的步骤

申请 Vercel 数据库

进入Vercel Storage 界面 然后点击右上角的 Create Database 并选择 Neon 创建免费数据库,数据库地址默认即可(通常为Washington, D.C., USA (East)) 在Database Name (*)取一个随意的名字然后点击create 创建完成之后进入数据库,点击Connect Project,在最上方选择刚刚fork的项目,选择完直接点击connect,这样数据库就连接成功了

重新部署vercel项目

点击你fork的项目,点击左上角的Deployments,再点击下方内容的右边三个点,点击Redeploy重新部署,重新部署完之后给项目绑定一个自定义域名,这样就完成了1

创建github仓库

创建一个github私有仓库(如果不建议博客在大街上飘那请随意) 创建完之后点击上方绿色按钮,复制ssh密钥➡️在你本地磁盘找一个地方右键,点击git bash here➡️输入git clone 你的密钥下载到本地更改 将博客源代码都复制进去,然后依次执行

git add .
git commit -m "第一次提交"
git push

这样就上传到GitHub仓库了

后台配置

进入你刚刚给后台设置的域名,添加用户名和密码

  • 添加github密钥 Github 设置 生成的 Token (建议使用 Classical) 需要 Repo & Workflow 下的权限 不建议给出所有权限,剩下的自己填填 1 注意,项目分支根据实际情况填写,main或者master

添加vercel密钥

您的 Vercel 账户密钥 在 此处 生成 PROJECT_ID:您 Qexo 部署所在项目的 ID 位于 Project Settings -> General -> Project ID

登录后台

输入账号密码就能用了,其他功能自行研究 QEXO文档

配置GitHub Actions

此功能可以实现监测所有 source 目录下的文件变动,所有 yml,json 后缀文件的变动。然后进行自动推送

在本地创建.github/workflows/main.yml,添加以下代码

name: Blog自动推送 # 脚本 workflow 名称

on:
  push:
    branches: [main, master] # 当监测 main,master 的 push
    paths: # 监测所有 source 目录下的文件变动,所有 yml,json 后缀文件的变动。
      - '*.json'
      - '**.yml'
      - '**/source/**'

jobs:
  blog: # 任务名称
    timeout-minutes: 30 # 设置 30 分钟超时
    runs-on: ubuntu-latest # 指定最新 ubuntu 系统
    steps:
      - uses: actions/checkout@v4 # 拉取仓库代码
      - uses: actions/setup-node@v4 # 设置 node.js 环境
      - name: Cache node_modules # 缓存 node_modules,提高编译速度,毕竟每月只有 2000 分钟。
        uses: actions/cache@v4 # 亲测 Github 服务器编译速度比我自己电脑都快,如果每次构建按5分钟计算,我们每个月可以免费部署 400 次,Github yyds!!!
        env:
          cache-name: cache-node-modules
        with:
          path: ~/.npm
          key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/package-lock.json') }}
          restore-keys: |
            ${{ runner.os }}-build-${{ env.cache-name }}-
            ${{ runner.os }}-build-
            ${{ runner.os }}-
      - name: Init Node.js # 安装源代码所需插件
        run: |
          npm install
          echo "init node successful"
      - name: Install Hexo-cli And component # 安装 Hexo
        run: |
          npm install -g hexo-cli --save
          npm install hexo-generator-sitemap --save
          npm install hexo-generator-baidu-sitemap --save
          npm install hexo-abbrlink --save
          npm install hexo-renderer-pug hexo-renderer-stylus --save
          npm i hexo-renderer-markdown-it --save
          npm install hexo-generator-searchdb
          npm install katex @renbaoshuo/markdown-it-katex
          npm install hexo-wordcount --save
          npm i hexo-filter-nofollow --save
          npm install hexo-generator-feed --save
          echo "install hexo successful"
      - name: Build Blog # 编译创建静态博客文件
        run: | # 下方可以自行添加需要的命令
          hexo clean && hexo g 
          echo "build blog successful"
      - name: Deploy Blog # 设置 git 信息并推送静态博客文件
        run: |
          cd ./public
          git init
          git config user.name "${{secrets.GIT_NAME}}"
          git config user.email "${{secrets.GIT_EMAIL}}"
          git add .
          git commit -m "Update"
          git push --force --quiet "https://${{secrets.GH_TOKEN}}@${{secrets.GH_REF}}" master:main

      - run: echo "Deploy Successful!"

然后进行推送更新

git add .
git commit -m "第一次提交"
git push

配置存储库 Secrets

上方Github Action的配置文件 Deploy Blog中引用了4个 Secret,分别是 GIT_NAME, GIT_EMAIL, GH_TOKEN, GH_REF, 接下来将在存储库中设置它们

  • 在 Github -> 源码仓库 -> Settings -> Secrets and variables -> Actions -> Secrets 中添加用于Github Action的Secrets 1

Secrets的名称分别是上方 GIT_NAME, GIT_EMAIL, GH_TOKEN, GH_REF 其中GH_TOKEN上面配置qexo的时候已经获取,可以直接使用 GH_REF的内容为 github.com/用户名/Blog仓库名.git(这里的仓库是你博客静态文件的仓库,不是源码仓库)

结尾

接下来你直接在qexo添加一篇文章并上传就可以看见了,可以实现云端写博客,云端添加友链