CMS#

内容管理系统（英语：content management system，缩写为 CMS）是指在一个合作模式下，用于管理工作流程的一套制度。———— 来自维基百科

对于静态网站，特别是博客，如果只是编写文章，却需要与Git仓库打交道，未免过于繁琐，因此有这么一类CMS系统，专对静态网站的文章进行管理，且只需要在Web端即可完成文章操作，便于随时随地随心记录点子/修改文章。

DecapCMS#

这是一个基于 Git 的静态站点生成器 CMS，相关链接：

由于该CMS起源于NetlifyCMS，后独立出来，因此大多数教程适用于您的网站托管在Netlify的情况下。但我这里是基于GitHub_OAuth的认证所做的教程，静态网站可托管至任意平台，当然所有的细枝末节都可以前往官方文档页查看请详情。

Install | 安装#

官方提供了两种安装方式：

通过静态路由下的admin文件夹内编写配置
通过npm将decap-cms以包的形式安装

这里首选第一种安装方式，基于静态网站所使用的框架，确定静态文件夹的所在地，在此目录下创建admin文件夹。

admin_location

随后在admin文件夹下创建文件index.html，内容如下：

1
<!DOCTYPE html>
2
<html>
3
  <head>
4
    <meta charset="utf-8" />
5
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
    <meta name="robots" content="noindex" />
7
    <title>Content Manager</title>
8
  </head>
9
  <body>
10
    <!-- Include the script that builds the page and powers Decap CMS -->
11
    <script src="https://unpkg.com/decap-cms@^3.0.0/dist/decap-cms.js"></script>
12
  </body>
13
</html>

再创建config.yml文件，按照官方教程按需配置即可，下一节将展示我个人的一个模板。

当配置好config后，就可以通过https://<yoursite>/admin(将<your-site>替换为具体网站域名)来访问decap-cms系统。

Configuration | 配置#

首先放出适用于GitHub认证的模板：

1
# 配置好您所选用的后端，这里我用的是GitHub_OAuth作为后端。
2
backend:
3
  name: github
4
  branch: main
5
  repo: <your-repo-name> # 替换为您的静态网站仓库名
6
  site_domain: <your-site-domain> # 替换为您的静态网站域名
7
  base_url: <github-oauth-site-url> # 替换为配置好的GitHub_oAuth后端网站链接(包含https协议头)
8
  auth_endpoint: auth
9

10
  # (可选项)自定义Decap-CMS每次操作的提交信息模板。
11
  commit_messages:
12
    create: "CMS:Create {{collection}} “{{slug}}”"
13
    update: "CMS:Update {{collection}} “{{slug}}”"
14
    delete: "CMS:Delete {{collection}} “{{slug}}”"
15
    uploadMedia: "CMS:Upload “{{path}}”"
16
    deleteMedia: "CMS:Delete “{{path}}”"
17
    openAuthoring: "CMS:{{message}}"
18

19
# Decap-CMS的首页logo
20
logo_url: https://blog.srprolin.top/favicon/favicon.ico
21

22
# 您的网站地址链接(带HTTPS协议头)
23
site_url: <your-site-url>
24
display_url: <your-site-url>
25

26
# 媒体文件夹，填写图片存放位置
27
media_folder: "<your-img-location>"
28
# 引用路由补全，在Decap-CMS选择图片时自动补全的路径头。
29
public_folder: "<your-img-head-url>"
30
# 例如你的图片为 "img.png"，存放在 "src/images/"(媒体文件夹)下，文章为 "index.md"，而文章存放在 "src/posts/"下，那么这时候就要补全路径头为 "../images"
31

32
# 文档夹(核心)
33
collections:
34

35
  # 分类1(按名称"name"分类)
36
  - name: "posts" # Used in routes, e.g., /admin/collections/blog
37
    # 在Decap-CMS网页上的分类名称(只影响web的展示文字)
38
    label: "Posts" # Used in the UI
39

40
    # 填写文章位置
41
    folder: "<your-posts-location>" # The path to the folder where the documents are stored
42
    create: true # Allow users to create new documents in this collection
43
    slug: "{{year}}-{{month}}-{{day}}-{{slug}}" # Filename template
44

45
    # CMS编辑器预置项(按需调整)
46
    fields: # The fields for each document, usually in front matter
47
      - { label: "标题", name: "title", widget: "string" }
48
      - {
49
          label: "发布日期",
50
          name: "published",
51
          widget: "datetime",
52
          format: "YYYY-MM-DD",
53
        }
54
      - {
55
          label: "置顶",
56
          name: "pinned",
57
          widget: "boolean",
58
          default: false,
59
          required: false,
60
        }
61
      - {
62
          label: "摘要",
63
          name: "description",
64
          widget: "string",
65
          required: false,
66
        }
67
      - { label: "封面", name: "image", widget: "image", required: false }
68
      - {
69
          label: "标签",
70
          name: "tags",
71
          widget: "list",
72
          minimize_collapsed: true,
73
          required: false,
74
        }
75
      - { label: "分类", name: "categories", widget: "list", required: false }
76
      - {
77
          label: "草稿",
78
          name: "draft",
79
          widget: "boolean",
80
          default: false,
81
          required: false,
82
        }
83
      - {
84
          label: "语言",
85
          name: "lang",
86
          widget: "string",
87
          default: "",
88
          required: false,
89
        }
90
      - { label: "正文", name: "body", widget: "markdown", required: false }
91

92
  # 分类2
93
  - name: "pages"
94
    label: "Pages"
95
    # 单文件陈列
96
    files:
97
      - file: "<your-pages-location-head>/about.md" # 替换为你的页面位置前缀
98
        name: "about"
99
        label: "关于"
100
        fields:
101
          - { label: "内容", name: "body", widget: "markdown", required: false }
102
      - file: "<your-pages-location-head>/friends.md" # 替换为你的页面位置前缀
103
        name: "friends"
104
        label: "友链"
105
        fields:
106
          - { label: "内容", name: "body", widget: "markdown", required: false }

在配置单中，除backend后端选项外，其他均为通用配置项。

GitHub_OAuth是需要自行申请，并配置后端的，在下一节中将给出教程。

这个后端，无非就是认证“你是你”这件事，DecapCMS同样也有通过Netlify身份认证来做后端的配置，但那就需要你的网站托管在Netlify了，更何况即使网站托管在Netlify，但多数静态站的源码还是在GitHub上的，那干脆就用GitHub_OAuth做认证后端好了。

GitHub_OAuth应用配置#

这里我们要用到Cloudflare的Workers做真实后端逻辑，(当然其他的CI/CD平台也可以，但我提供的是适用于Worker的代码) 选择从hello,world!开始，自定义worker_name后直接部署。

hello,world!

随后在部署好的worker中，选择 编辑代码 ，内容如下：

1
export default {
2
  async fetch(request, env) {
3
    const url = new URL(request.url);
4

5
    // 路由 1: 登录入口
6
    if (url.pathname === "/auth") {
7
      const state = crypto.randomUUID();
8
      const githubAuthUrl = `https://github.com/login/oauth/authorize?client_id=${env.GITHUB_CLIENT_ID}&scope=repo&state=${state}`;
9

10
      return new Response("Redirecting...", {
11
        status: 302,
12
        headers: {
13
          "Location": githubAuthUrl,
14
          "Set-Cookie": `sx_state=${state}; HttpOnly; Secure; Path=/; Max-Age=600; SameSite=Lax`,
15
        },
16
      });
17
    }
18

19
    // 路由 2: 回调处理
20
    if (url.pathname === "/callback") {
21
      const code = url.searchParams.get("code");
22
      const returnedState = url.searchParams.get("state");
23
      const cookies = request.headers.get("Cookie") || "";
24
      const savedState = cookies.match(/sx_state=([^;]+)/)?.[1];
25

26
      if (!returnedState || returnedState !== savedState) {
27
        return new Response("安全校验失败：State 不匹配，请求可能已被篡改。", { status: 403 });
28
      }
29

30
      const response = await fetch("https://github.com/login/oauth/access_token", {
31
        method: "POST",
32
        headers: {
33
          "content-type": "application/json",
34
          "accept": "application/json"
35
        },
36
        body: JSON.stringify({
37
          client_id: env.GITHUB_CLIENT_ID,
38
          client_secret: env.GITHUB_CLIENT_SECRET,
39
          code,
40
        }),
41
      });
42

43
      const data = await response.json();
44

45
      if (!data.access_token) {
46
        return new Response("GitHub 授权失败", { status: 401 });
47
      }
48

49
      // 返回给 Decap CMS 的握手信号
50
      const content = `
51
        <html><body><script>
52
        (function() {
53
          function receiveMessage(e) {
54
            window.opener.postMessage(
55
              'authorization:github:success:${JSON.stringify({
56
                token: data.access_token,
57
                provider: "github"
58
              })}',
59
              e.origin
60
            );
61
          }
62
          window.addEventListener("message", receiveMessage, false);
63
          window.opener.postMessage("authorizing:github", "*");
64
        })()
65
        </script></body></html>`;
66

67
      return new Response(content, {
68
        headers: {
69
          "content-type": "text/html",
70
          "Set-Cookie": "sx_state=; HttpOnly; Secure; Path=/; Max-Age=0",
71
        }
72
      });
73
    }
74

75
    return new Response("OAuth Proxy is running", { status: 200 });
76
  },
77
};