静态博客后台-开源啦！

介绍

总览

之前有发过一篇主题升级—Hugo博客后台,那么现在，项目开源啦（一半），本次开源的是通配版本，适配各种静态架构，理论上只要是走的github仓库托管，都能使用，其实在周刊写过介绍了，但是还是单独发一篇介绍一下，也可以直接跳转开源文档

AIOVTUE-CMS 是基于 Pages CMS 的自托管内容管理系统，源Pages CMS项目已经能做到后台管理，但是个人觉得不太够用，同时英文界面不太友好，重点是同步逻辑和部署有点难崩，本项目是对此的深度定制和魔改，包含两个版本，定制版和通用版，定制版深度绑定本项目，只适配本项目文件，无法自定义适配其他站点，包含大量深度定制ui，采用可视化编辑的样式，通用版则在定制版的基础上，去掉了专属定制ui，增加了自定义功能，不过为了普适，无法做到可视化编辑，基本只能编辑源文件，此外还集成了本项目其他部分，例如动态和站点分析等

项目

AIOVTUE-CMS

深度定制版，暂未开源（开发中，尽情期待）

AIOVTUE-CMS-gen

通用版，点我跳转开源地址，该版本适配所有静态博客项目，通过连接github仓库，可以配置对应的文件或文件夹进行编辑，理论上只要是通过github管理的站点项目都可以使用此项目作为后台，下面是项目预览：

这是站点首页，左侧边栏顶部有三个页面，分别是访问、动态和评论，分别对应AIOVTUE-Analytics、AIOVTUE-Memos和twikoo，需要在设置页面配置对应地址和秘钥后才会展示，方便集成管理，下方内容部分即可以自定义的文件编辑部分，，该版本通过使用模版的方式，选择对应的文件或文件夹进行配置，包含以下几个模版

• 源文件（即编辑和展示单个文件的源文件）
• 源文件夹（即按文件夹的形式展示，通常用于文章管理，支持配置新建文件的模板，方便快速新建文章）
• 多源文件（依旧是源文件，区别是可以选择多个源文件统一管理，适合管理各个页面的索引文件）
• 友链（此模板将友链进行可视化展示，由于适配难度太大，各个项目文件区别过大，只有部分适配，因此可能并不普适）
• 文章（此模板同源文件夹模板，略微区别，如果能适配的话也是不错的选择）

下方的站点设置部分可以编辑内容页面的按钮，即针对自己的博客自定义，图片资源部分可以配置自己的静态文件路径，主要是展示静态图片文件，下方的提交部分即用来发布更改，在更改列表可以撤销未上传的更改，未上传的更改暂存于数据库中，浏览器崩溃也不怕数据丢失，提交记录可以查看历史提交记录，用处不是很大，总体就是这样，下面展示一下部分页面的ui：

部署-通用版

本文说明如何将 AIOVTUE-CMS-gen（通用版，仓库 AIOVTUE-CMS-gen）部署到vercel

一、环境变量

环境变量只需要配置两个，即数据库和秘钥，其他配置均在网页内完成

部署到Vercel

本项目推荐使用vercel部署，vercel提供免费数据库，直接使用方便部署，下面是部署教程

Fork仓库

首先fork一份仓库到自己的github，点我跳转开源仓库

Vercel新建项目

登陆vercel，点击新建项目，选择刚才fork的AIOVTUE-CMS-gen项目

在这个配置界面，只需要配置环境变量CRYPTO_KEY即可，随机输入一串长字符串即可，可以用一些随机字符串生成器，例如这个, 此界面不需要配置其他东西，数据库环境变量稍后配置，直接点击部署即可，应该是会失败报错的，不用管，直接下一步就行，只要创建好了即可（其实可以点取消部署来着，或者直接不部署也行，因为反正部署了也会失败）

接下来回到主页，找到刚才部署的项目，如果没有可以刷新一下，一般长这样，接着先不进入，先点击这个储存，即创建和连接数据库，选择图中这个Neon即可，其实只要是postgres都行，选择后默认使用他的免费方案即可，然后点击创建，创建完后会让你选择连接到一个项目，选择我们刚才创建的项目即可，会自动帮我们配置环境变量

接着我们回到我们的项目中，点进去看一下环境变量，会发现多出了很多变量，这即是刚才连接的数据库，其实用不到这么多变量来着，不过绑着也没啥问题，这时候点击部署，重新部署一下即可

部署完成后访问链接，会进入初始化步骤，设置账号密码比较简单，不赘述

接下来会需要配置github app，就像这样,这里先不急，先看后边，带大家获取一下对应的信息，先打开我们的github，进入设置页面，点击开发者设置，或者点我跳转, 点击新建一个app，注意是github apps而不是oauth apps

APP的名字可以随意，接着是Homepage URL填项目访问地址，Redirect URI的后缀是/api/auth/callback/github即 https://your.com/api/auth/callback/github

接着Webhook URL后缀/api/webhook/github, 即https://your.com/api/webhook/github, 然后在填一下密码，自己设置即可，后面要填，需要记住

接下来权限配置部分，需要开启仓库读写权限，如图所示，选择read and write，最后点击底部的保存即可

保存后在这个页面可以得到APP ID, Client ID, 以及APP名称, 名称就是url后缀上那个，例如https://github.com/settings/apps/aiovtue-cms-gen的名称就是aiovtue-cms-gen

接着在Credentials页面获取client sevrets和ket pairs，其中ket pairs就是私钥PEM，是一个文件，下载下来之后打开全部复制上去即可，具体可以参考图片，填上之后保存即可

初始化完成后，可以通过邮箱或者直接使用github登陆，登陆后需要安装github app，点击这个，根据步骤安装即可，根据自己的需求，在安装界面选择读取单个储存库还是完全运行，看自己需求

安装完github app后，这个按钮会变成打开仓库，现在点击就可以选择自己的仓库进行管理了，部署到这里就结束啦

使用

使用教程

选择好管理的仓库后，会进入后台页面，在这里需要配置需要管理的文件或文件夹，点击添加页面，选择对应的模板，主要有以下模板：

• 源文件（即编辑和展示单个文件的源文件）
• 源文件夹（即按文件夹的形式展示，通常用于文章管理，支持配置新建文件的模板，方便快速新建文章）
• 多源文件（依旧是源文件，区别是可以选择多个源文件统一管理，适合管理各个页面的索引文件）
• 友链（此模板将友链进行可视化展示，由于适配难度太大，各个项目文件区别过大，只有部分适配，因此可能并不普适）
• 文章（此模板同源文件夹模板，略微区别，如果能适配的话也是不错的选择）

按需选择即可，一般使用源文件夹和源文件即可，可以自定义图标和图标的颜色，选择自己需要修改的文件，例如配置文件，页面文件，友链文件，或者是文章的文件夹等等

除此之外，还有一些其他的配置，在设置页面，入口在左下角，进入后可以配置AIOVTUE-analytics、AIOVTUE-memos、Twikoo等，同时，设置页面还有一个设置返回站点的功能，输入你的前端网站地址，会在侧边栏顶部新增一个返回站点的按钮，方便来回跳转，其他的就留给大家自己摸索了