【Hexo】后台管理工具-Qexo

一、介绍

Qexo是一个美观、强大的在线 静态博客 管理器

官方文档

GitHub

二、部署步骤

2.1、Vercel部署

2.1.1、创建Vercel项目

点击 Vercel一键部署,使用GitHub账号登录,如果GitHub账号不可用就用Google邮箱或其他国外邮箱重新创建一个。

image-20240622174022911

输入仓库名称,点击创建,也可将仓库Fork下来,创建项目时选择Fork的仓库

image-20240622174228501

点击Deploy进行部署

image-20240622174400762

首次部署会报错, 因为还未进行数据库和环境变量配置,无视并进行接下来的步骤

image-20240622175021557

2.1.2、创建数据库

1、 Vercel Storage

进入Vercel Storage 界面 然后点击右上角的 Create Database 。

image-20240622175215791选择 Postgres 创建免费 PostgreSQL 数据库

image-20240622175225992

在 Connect 页面获取数据库连接信息。请注意在地区选择的位置选择与你上一步项目对应的地区(通常为 Washington, D.C., USA (East) - iad1)。

image-20240622175302853

绑定项目

在左侧边栏选择 Projects 点击 Connect Project 连接到你第一步创建的项目,然后重新部署即可

image-20240622175412401

如果重新部署仍然报错./migrate.sh: line 1: pip: command not found,则需修改 Node.js的版本为 18.x,问题详见 Issue #524

image-20240622222242557

2、 PlanetScale 数据库(需要绑定信用卡)
3、 SupaBase 数据库

注册 SupaBase 账号 创建免费 SupaBase 数据库,

image-20240622182425815

区域一定要选择 N. Virginia (us-east-1) 在项目设置页面获取数据库连接信息, 密码即为你所设置的值

image-20240622182940051

点击Connect 查看数据库连接信息

image-20240622225341352

切换到PSQL选项卡,可查看数据库主机,端口,数据库名称,用户名信息

image-20240622225433099

在项目设置界面添加环境变量 Environment Variables

image-20240622225632129

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

回到你的项目页面,在 Deployments 点击 Redeploy 开始部署, 若没有 Error 信息即可打开域名进入初始化引导(需要魔法)

image-20240622175525233

如果重新部署仍然报错./migrate.sh: line 1: pip: command not found,则需修改 Node.js的版本为 18.x,问题详见 Issue #524

image-20240622222242557

能看到预览界面就代表部署成功了。

4、MongoDB

注册 MongoDB 账号 (每个账号能免费创建一个数据库),创建好账号以后直接访问首页可以跳过填写问答环节

点击Database => Build a Clster

image-20240622214359764

区域一定要选择 AWS / N. Virginia (us-east-1) 在 Clusters 页面点击 CONNECT, 按步骤设置允许所有 IP 地址的连接), 创建数据库用户, 并记录数据库连接信息, 密码即为你所设置的值

image-20240622214618371

输入数据库用户名及密码

image-20240622214758726

点击 Network Access

image-20240622215038810

将IP改为 0.0.0.0/0,即允许所有IP访问

image-20240622215307525

点击Drivers

image-20240622215404327

可以查看连接信息

image-20240622215537746

在项目设置界面添加环境变量 Environment Variables

image-20240622220538755

名称 意义 示例
MONGODB_HOST MongoDB 数据库连接地址 mongodb+srv://cluster0.xxxx.mongodb.net
MONGODB_PORT MongoDB 数据库通信端口 默认应填写 27017 27017
MONGODB_USER MongoDB 数据库用户名 abudu
MONGODB_DB MongoDB 数据库名 Cluster0
MONGODB_PASS MongoDB 数据库密码 password

MongoDB 数据库名默认为Cluster0,端口默认为27017

image-20240622222603597

在 Deployments 点击 Redeploy 开始部署, 若没有 Error 信息即可打开域名进入初始化引导(需要魔法)

如果重新部署仍然报错./migrate.sh: line 1: pip: command not found,则需修改 Node.js的版本为 18.x,问题详见 Issue #524

image-20240622222242557

能看到预览界面就代表部署成功了。

2.1.3、绑定域名

如果你有自己的域名,可以给项目绑定域名,否则需要魔法才能访问

image-20240622231208792

到DNS服务商添加一条CNAME解析记录,值为vercel.cdn.cyfan.top(vercel加速站点,官方地址为cname.vercel-dns.com),详细介绍参考另一篇文章 Hexo Butterfly 主题在主页添加 GitHub 贡献日历里的介绍。

image-20240622231255609

等待片刻DNS解析成功即可通过域名直接访问

2.1.4、初始化

image-20240622231654341
API留空将自动生成,用户名可用中文

image-20240622231840236

博客配置

image-20240622231938706

GitHub密钥创建步骤:

点击头像 => [Settings](https://github.com/settings) => Developer settings =>

image-20240622232252552

用户验证

image-20240622232327473

设置根据需要设置过期时间,我这里设置永不过期,权限勾选repo

image-20240622232439184

创建后生成的密钥保存好,只显示一次

image-20240622232636759

仓库地址 为 博客源码 自动化部署所在的仓库,需要

image-20240623102319214

Vercle配置

image-20240623102457996

获取token步骤:点击Vercel头像 => Account Settings => Tokens => Create Token

image-20240623103355028

获取项目Id: Vercel项目 => Settings => Project ID

image-20240623103246818

初始化完成

image-20240623103433841

配置 Hexo 自动部署 后提交文章后访问博客可以及时看到效果。

参考

免费的Qexo支持Hexo在线博客管理后台