为Hexo博客添加后台管理系统
前言
Hexo是一个静态网站生成器,许多人用其来搭建博客,我的博客就是使用Hexo搭建,相比前之前介绍的Halo(传送门:利用Replit搭建个人博客Halo)搭建成本更加低,因为很多网站都支持了托管静态网站(后面可能会更新一篇静态网站的文章),但Hexo是静态网页,没有后台管理系统,对于想新建一个博客的小白来说难度比Halo大,但是也有许多大佬构建了网页的Hexo后台管理系统,今天给大家介绍两个后台管理系统:Qexo和ESHexoN,并附上搭建方式
Hexo的源码需放在Github/Gitlab上
Qexo
** Qexo,一个快速、强大、漂亮的在线Hexo编辑器**
Github仓库、使用文档
特色:
- 自定义图床上传图片
- 在线配置编辑
- 在线页面管理
- 开放API
- 自动检查更新
- 在线一键更新
- 快速接入友情链接
- 简单的说说短文
- 类似不算子的统计
- 自动填文章模板
下面是搭建教程
准备数据库
Qexo支持的数据库:
- MySQL
- PostgreSQL
- MongoDB
这次我们使用MongoDB数据库,先去MongoDB官网注册一个账户,这边我已经有账户了就不做演示了
因为MongoDB账户每一个项目(Project)只支持创建一个免费的数据库,所以需新建一个项目(Project,)
项目名称取为Qexo
,点击Next
,接着是修改项目的权限,这里我们不做修改,直接Create Project
->Build a DataBase
,类型选择M0 Free
,Name
改成Qexo
,其余默认即可(提供商为AWS
、地区为N.Virginia(us-east-1)
),然后点击Create
。然后会提上让我创建一个管理员来对数据库进行管理,选择Username and Password
作为认证方式,操作员名字设置为Hexo
,密码点击Autogenerate Secure Password
来自动生成,然后点击Create User
。然后在IP Address
中填入0.0.0.0/0
(表示任何ip均可以访问数据库),Description
填入任意IP
,点击Add Entry
->Finshi and Close
,然后跳转到你的数据库页面,点击Connect
->Shell
找到数据库的域名
前端搭建
去Qexo的Github仓库,Fork到自己的仓库中,再去Vercel官网(未注册的可以用Github账户注册),进入控制台(Dashboard)后,点击Add new ...
->Project
,找到刚刚Fork的项目,点击Import
,找到Environment Variables
,根据你的数据库信息填写相应的Name
和Value
| Name | Value(示例) | 意义 |
| - | - |
| MYSQL_HOST | us-east.connect.psdb.cloud | MySQL数据库连接地址 |
| MYSQL_PORT | 3306 | MySQL数据库通信端口,默认应填写3306 |
| MYSQL_USER | qexo | MySQL数据库用户名 |
| MYSQL_NAME | mydatabase | MySQL数据库名 |
| MYSQL_PASSWORD | password | MySQL数据库密码 |
| Name | Value(示例) | 意义 |
| - | - |
| PG_HOST | db.xxx.supabase.co | PostgreSQL数据库连接地址 |
| PG_PORT | 5432 | PostgreSQL数据库通信端口,默认应填写5432 |
| PG_USER | qexo | PostgreSQL数据库用户名 |
| PG_DB | mydatabase | PostgreSQL数据库名 |
| PG_PASS | password | PostgreSQL数据库密码 |
| Name | Value(示例) | 意义 |
| - | - |
| MONGODB_HOST | mongodb+srv://cluster0.xxxx.mongodb.net | MongoDB数据库连接地址 |
| MONGODB_PORT | 27017 | MongoDB数据库通信端口,默认应填写27017 |
| MONGODB_USER | qexo | MongoDB数据库用户名 |
| MONGODB_DB | mydatabase | MongoDB数据库名 |
| MONGODB_PASS | password | MongoDB数据库密码 |
演示中我使用的是MongoDB数据库,下面是我填入的环境变量参考,点击Delopy
等待部署,因为Vercel免费提供的域名被GWF拦截了,所以需要使用自己的域名,在Vercel中打开Qexo的项目,点击Settings
->Domains
添加域名并到自己域名的DNS提供商那里完成添加A记录或者CANME记录,等待DNS解析完成后打开网站,就能看到自己Qexo前端了
Github密钥
Gitlab的申请方法不做赘述了(都会自己搭建Gitlab了还需要我教这个吗)
进入Github官网,点击自己右上角的头像->Settins
->Developer Settings
->Personal access tokens
->Tokens(classic)
->Generate new token
->Generate new token (classic)
,名字(Note)就填Qexo
,Expiration
选择No expiration
(永不过期),Select scopes
勾选repo
,点击Generate token
,保存Token
Vercel密钥
在Vercel官网,点击自己右上角的头像->Settings
->Tokens
TOKEN NAME
填入Qexo
SCOPE
选择Full Account
EXPIRATION
选择No Expiration
点击Create
,保存密钥
Vercel项目ID
在Vercel控制面板,找到Qexo项目,点击进入,点击Settings
->General
,找到Project ID
Qexo前端初始化
API密钥留空,设置用户名以及密码;然后是博客源码仓库的配置,按照实际情况填写即可;Vercel密钥填入之前在Vercel获取的Token、项目ID填入Project ID
中的值。之后就完成部署了,返回qexo主页重新登入刚刚设置的账户,就能进入管理页面了,自定义图床等功能这里就不在赘述了
ESHexoN
与Qexo类似,ESHexoN也是一款简洁、强大的Hexo在线编辑器。
Github仓库、使用文档
GIthub密钥获取
进入Github官网,点击自己右上角的头像->Settins
->Developer Settings
->Personal access tokens
->Tokens(classic)
->Generate new token
->Generate new token (classic)
,名字(Note)就填ESHexoN
,Expiration
选择No expiration
(永不过期),Select scopes
勾选repo
,点击Generate token
,保存Token
后端搭建
ESHexoN的后端部署支持Deno与Cloudflare Workers两个平台。从更新情况上看,Deno平台支持性会更好。这里我以Deno作为演示
Fork仓库
去ESHexoN的Github仓库,Fork到自己的仓库中
创建配置文件仓库
推荐将配置文件与 Hexo 博客仓库分离
点击传送门创建仓库,仓库名这里我设为ESHoxeN-DataBase
,类型选择Private
,然后点击Create repository from template
变量生成器
进入配置工具,按照实际情况填写
填写说明:
项目 | 说明 |
---|---|
第一项 | 填入之前生成的Token密钥 |
第二项 | Github用户名 |
第三项 | Hexo博客源码仓库名 |
第四项 | 博客仓库分支,大概率是main 或master |
第五项 | ESHoxeN配置文件仓库名,在之前的步骤中,我设为了ESHoxeN-DataBase |
第六项 | ESHoxeN配置文件仓库的分支,默认是master |
第七项 | 配置文件生成名,按照/xxx.jason 的格式修改,默认为/eshexon.json |
填写完成后点击Generate[生成]
导入项目
然后去Deno官网登入或者用Github注册一个账户,在控制台页面点击New Project
->Select GitHub repository
->Select Sser or Organzation
->Add Github Account
从Github中导入之前Fork的仓库,部署方式选择 No build step
,文件选择打包好的dist/index.js
,最后选择Create & deploy
配置项目
修改项目名(可选)
进入项目后,找到Settings
->Project Name
,我这里改成eshexon-zuilang
,再点击Save
保存
配置环境变量
进入项目后,找到Settings
->Environment Variables
,点击Add Variable
添加四个环境变量:GITHUB_TOKEN
、GITHUB_MAIN_REPO
、GITHUB_SUB_REPO
、GITHUB_CONFIG_NAME
含义如下,按照实际情况填入VALUE
,可以按照下面的示意填写,也可以之间粘贴之前变量生成器中生成的值。填写完成后点击SAVE
变量名 | 含义 |
---|---|
GITHUB_TOKEN | GitHub Token, 必须有repo权限 |
GITHUB_MAIN_REPO | Hexo 仓库, 格式为<user>/<repo>, <branch> |
GITHUB_SUB_REPO | 配置文件仓库,格式为<user>/<repo>, <branch> |
GITHUB_CONFIG_NAME | 配置文件名称 |
自定义后端域名(可选)
进入项目后,找到Settings
->Domains
->Add Domains
,输入域名后,再点击Save
保存,然后会提示添加一个A记录、一个AAAAA记录以及一个CNAME记录,添加这三个记录后点击Validate
重新验证,再点击Get automatic certificates
自动生成SSL证书(也可也手动上传)
前端
ESHexoN官方使用Vue + Vuetify构建了一个公共前端,推荐您使用公共前端,它紧随后端版本的更新,使用更加流畅
打开公共前端,注册一个账户,后端地址的域名可以是自己添加的,也可也是Deno官方提供的,可以在Deno进入项目后的Overview
查看所有的域名,注册完成后再登入账户就能看到ESHexoN管理后台了
- 感谢您的赞赏。