如何给自己的网站接入CMS

2026-07-11

正文开始

我的个人博客是用 Next.js 搭建的，文章一直以 Markdown 文件存放在 GitHub 私有仓库里。每次写新文章都要手敲 Markdown 语法，然后提交、推送，偶尔还会把格式搞乱——实在太麻烦了。

于是，我为我的网站接入了CMS（内容管理系统），可以直接用富文本编辑器写文章，写完点发布就会自动推送到Github，十分方便。

这篇文章就来记录我接入 Decap CMS（原 Netlify CMS）的整个过程，包括配置、部署授权服务、以及我踩过的一个大坑。如果你的技术栈也是 Next.js + GitHub，应该能直接照着做。

为什么使用Decap CMS

在动手之前，我也简单对比过几个方案：

  • Strapi / Contentful：功能强大，但需要额外部署后端或付费，对于我的个人博客太重了。
  • WordPress Headless：太臃肿，不符合我“轻量”的初衷。
  • Decap CMS（Netlify CMS 的社区驱动版）：完全免费，基于 Git，无需自建后端。它直接读写 GitHub 仓库里的 Markdown 文件，写完文章自动提交，完美契合我的博客架构。

接入过程

第一步：（新建两个文件）

在public\admin文件夹里新建两个文件（index.html、config.yml），在index.html里面建一个简单的页面，导入decap-cms的js脚本。

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>
  <link rel="icon" href="favicon.svg" type="image/svg+xml" />
</head>
<body>
  <script src="https://unpkg.com/decap-cms@^3.0.0/dist/decap-cms.js"></script>
</body>
</html>

然后在config.yml写出CMS的一些配置，使CMS能连接到你的GitHub仓库。

yaml
backend:
  name: github
  repo: 你的GitHub用户名/你的仓库名   # 例如 shuaiqi/my-blog
  branch: main
  base_url: https://你的worker域名    # 稍后会说明
  auth_type: pkce

media_folder: "public/images"   # 上传的图片存放到这里
public_folder: "/images"

collections:
  - name: "blog"
    label: "博客文章"
    folder: "content/blog"      # Markdown 文件存放的目录
    create: true
    slug: "{{slug}}"
    fields:
      - { label: "标题", name: "title", widget: "string" }
      - { label: "发布日期", name: "date", widget: "datetime" }
      - { label: "正文", name: "body", widget: "markdown" }
第二步：部署 GitHub OAuth 授权服务（敲黑板！！！）

Decap CMS 需要一个独立的 OAuth 服务来帮你完成 GitHub 登录授权。官方和社区有一个现成的模板，我直接 fork 了：https://github.com/ublabs/netlify-cms-oauth

这个模板可以一键部署到 Vercel。我把它导入我的 Vercel 账号，设置了必要的环境变量（GitHub Client ID 和 Client Secret），然后就得到一个默认的.vercel.app域名。

结果，我发现.vercel.app在国内打不开——这是我踩的最大的坑

**解决办法：**我在 Vercel 项目设置里，给这个Worker绑定了一个我自己的子域名，解析生效后，马上就能在国内用了。

然后回到config.yml，把base_url改成你自己Worker的url。（完结撒花！！！）

结尾

感谢你能看到这里。这就是我折腾这个小破站的一点记录，谢谢你的喜欢~~（不要把我的网站放到收藏夹吃灰，😡！）~~，可爱捏。 总之，用上 CMS 之后写文章方便了不少，接下来打算继续折腾评论区功能，敬请期待～下次来的时候，说不定又有新东西了。😊

评论