---
filename: add-cms-system
title: 为博客添加CMS系统
cover: 'https://pic.biss.click/i/2025/08/30/m9e5er.png'
tags: 网站
categories: 建站手札
abbrlink: 3a26a97a
summary: '为博客添加CMS系统'
toc: true
comments: true
date: 2025-08-25 22:03:00
updated: 2025-08-26 08:01:00
---
# 序言
因为喜欢wordpress之类动态博客的在线编辑功能，但是又不想抛弃hexo，特别是这个花里胡哨的模板，所以想着给博客添加一个cms系统，在搜索一番后发现这种CMS系统叫无头CMS，然后找到一个很好的系统：sveltia-cms
{% link sveltia-cms,sveltia,https://github.com/sveltia/sveltia-cms %}
# 安装
## 安装包
在博客根目录下运行`npm i @sveltia/cms`
## 创建必要文件
然后在博客`source`目录下创建`admin`目录
并在其下新建`index.html`
```html
博客管理
```
新建`config.yml`
```yml
# https://decapcms.org/docs/configuration-options/
backend:
name: github
repo: #博客存储库
branch: #分支
auth_type:
app_id:
media_folder: "folder"
public_folder: "folder"
site_url: ""
logo_url: ""
locale: "zh_Hans"
common_col_conf: &common_col_conf
create: true
slug: "{{fields.filename}}"
sortable_fields:
- "commit_date"
- "title"
- "date"
- "updated"
# https://decapcms.org/docs/widgets/
fields:
- label: "文件名"
name: "filename"
widget: "string"
- label: "标题"
name: "title"
widget: "string"
- label: "发表日期"
name: "date"
widget: "datetime"
format: "YYYY-MM-DD HH:mm:ss"
date_format: "YYYY-MM-DD"
time_format: "HH:mm:ss"
- label: "更新日期"
name: "updated"
widget: "datetime"
format: "YYYY-MM-DD HH:mm:ss"
date_format: "YYYY-MM-DD"
time_format: "HH:mm:ss"
required: false
- label: "封面"
name: "cover"
widget: "image"
required: false
- label: "标签"
name: "tags"
widget: "select"
multiple: true
required: false
options:
- "amazon"
- "android"
- "angularjs"
- "azure"
- "cdn"
- "chartjs"
- "chrome"
- "csharp"
- "css"
- "devops"
- "diary"
- "docker"
- "edge"
- "git"
- "github"
- "hexo"
- "html"
- "icarus"
- "java"
- "js"
- "life"
- "material"
- "mysql"
- "nodejs"
- "onedrive"
- "oneindex"
- "php"
- "restapi"
- "security"
- "serverless"
- "shadowdefender"
- "tool"
- "twikoo"
- "ubuntu"
- "vagrant"
- "vb"
- "vite"
- "vue"
- "webpack"
- "windows"
- "xlsx"
- "小程序"
- label: "分类"
name: "categories"
widget: "select"
multiple: true
required: false
options:
- "Diary"
- "Tool"
- "Tech"
- "FrontEnd"
- "BackEnd"
- "Windows"
- "Android"
- "Linux"
- "Serverless"
- label: "正文"
name: "body"
widget: "markdown"
- label: "原创"
name: "toc"
widget: "boolean"
default: true
- label: "评论"
name: "comments"
widget: "boolean"
default: true
collections:
- name: "2023"
label: "2023"
folder: "source/_posts/2023"
preview_path: "2023/{{filename}}/"
<<: *common_col_conf
- name: "pages"
label: "Pages"
files:
- name: "friends"
label: "友链"
file: "source/friends/index.md"
preview_path: "friends/"
<<: *common_col_conf
- name: "about"
label: "关于"
file: "source/about/index.md"
preview_path: "about/"
<<: *common_col_conf
```
需要自己修改一些配置；
一般到这一步就可以了，但是因为我使用自己的服务器，没办法用官方的auth系统，所以还要进一步配置。
## 创建auth系统、授权
{% link Sveltia CMS Authenticator,Sveltia CMS Authenticator,https://github.com/sveltia/sveltia-cms-auth %}
比较简单，直接Cloudflare一键部署就可以
然后要在github新建一个oauth应用，就不写了，可以自己查找。
然后在cloudflare新建环境变量：
`GITHUB_CLIENT_ID`:
`GITHUB_CLIENT_SECRET`:
然后在`config.yml`添加
```yml
backend:
name: github # or gitlab
repo: username/repo
branch: main
base_url:
```
# 大功告成
访问博客的admin就可以了
这是编辑页面
