---
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
<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta name="robots" content="noindex" />
  <title>博客管理</title>
</head>
<body>
  <script src="https://unpkg.com/netlify-cms@^2.0.0/dist/netlify-cms.js"></script>
</body>
</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: <YOUR_WORKER_URL>
```

# 大功告成

访问博客的admin就可以了
这是编辑页面
<center><img src="https://pic.biss.click/i/2025/08/30/kq7mnh.png" alt="效果图"></center>
