赛林格

给 Astro 网站配置 Decap CMS 无头后端界面管理系统 - 最新图文完整步骤

1493字 7.5分钟 资源分享

🎉 本文将用图文详细介绍，怎么给 Astro 网站配置无头后端内容管理系统 Decap CMS，以像 Wordpress 那样，用直观的界面后台，来方便管理和创建新的文章，页面等内容。

前言

话说 Astro、Hexo、Hugo 等等静态站点虽然性能强劲，构建速度块，但是没有直观的后台界面管理和创建博文，还是非常不方便的。每次在本地编写 markdown 格式的文章时，还要编写前置元数据，那感觉像是在写代码似的。这次被 Ai 带进 Astro 这个架构的坑里之后，现在来完善最后一块，给 Astro 配置无头后端内容管理系统。

博主当前的网站，使用的是无服务器/VPS的白嫖方案，把站点内容托管在 Github 上，然后部署在 Cloudflare，整个过程全部免费。所以这次选择的无头后端也希望能集成到 Astro 中或是托管在 Cloudflare 上，查遍了目前流行的不流行的十来种无头后端CMS，确定尝试 Decap CMS。

当前网上关于 Astro 以及 Decap CMS 的相关内容并不多，尤其是想找个对应的图片来看看都比较困难，博主花费了很长时间才搭建完成，现在把整个过程整理好，图文并茂的分享给大家。

对了，其它静态博客架构，配置 Decap CMS 步骤差不多。

Decap CMS 是什么？

简单来说，Decap CMS 是一个开源的、基于 Git 的内容管理系统（CMS）。前身是 Netlify CMS，它不像 WordPress 那样需要数据库（MySQL），而是直接通过 GitHub、GitLab 或 Bitbucket 的 API，将你编辑的内容以 Markdown、JSON、YAML 等格式直接 提交（Commit） 到你的代码仓库中。

核心优势：

  • 无服务器/无数据库： 内容即代码。由于内容存在 Git 里，你不需要维护复杂的服务器环境。
  • 对编辑友好： 虽然内容存为 Markdown，但编辑看到的界面是美观的 UI，支持实时预览和拖拽上传图片。
  • 版本控制： 每一篇稿件的修改历史都在 Git 记录中，随时可以回滚。
  • 适配性广： 它可以配合任何静态网站生成器（SSG），如 Hugo, Jekyll, Astro, Next.js, Gatsby 等。
  • 有演示站，可以直接去体验一下！

工作流程

  1. 访问： 你在网站域名后加上 /admin（通常路径）进入后台。
  2. 编辑： 在可视化界面编写文章、上传图片。
  3. 保存： 点击“发布”时，Decap CMS 会自动向你的 Git 仓库推送一个 Commit。
  4. 触发： Git 仓库的变更会触发你的 CI/CD 流程（如 Netlify 或 Vercel），网站自动完成构建并上线。

选择Decap CMS的理由也很简单：

  • 可以部署在 Cloudflare 上 (或者说是集成到项目代码里了)
  • 支持 Markdown
  • 可以预览

最好能实时预览，或者次一点，点击后预览。毕竟编辑的时候，如果无法预览，格式错了都不知道，发布后要来回修改折腾 - 当然其实无法预览也有其它办法，这个下次再分享吧。

部署 Decap CMS

  1. 下载部署代码 ： 去 github 上这个地址：https://github.com/i40west/netlify-cms-cloudflare-pages 下载部署代码
  2. 上传代码
    • 在 Astro 的 public 目录下，上传 admin 文件夹，包含 ：config.yml、index.html
    • 在 根 目录下，上传 functions/api 文件夹，包含：apiauth.js、callback.js
  3. 编辑配置文件 config.yml，参考如下：
backend:
  name: github
  repo: AA/BB          # 替换成你的真实的github用户名/仓库名
  branch: main
  site_domain: https://example.com       # 替换成你的真实的网站地址
  base_url: https://example.com       # 替换成你的真实的网站地址
  auth_endpoint: /api/auth

media_folder: "public/uploads"
public_folder: "/uploads"

collections:
  - name: "blog"
    label: "博客文章"
    folder: "src/content/blog"
    create: true
    # 使用 filename 字段作为生成的文件名
    slug: "{{fields.filename}}"
    fields:
      - {label: "文件名（不带.md）", name: "filename", widget: "string", required: true}
      - {label: "标题", name: "title", widget: "string", required: true}

其中具体的 collections 内容，可以让 Ai 根据你的博客的 markdown 前置字段来编写。

  1. GitHub OAuth App 配置： 点击 Github 右侧顶部的头像 - Settings - Developer settings (右侧底部) - OAuth Apps：
  • 创建 Client ID
  • 创建 Client secrets：复制保存待用 （仅显示1次）
  • Application name：随意填写一个自己看得懂的
  • Homepage URL：填写自己的网站链接地址，如 https://example.com
  • Authorization callback URL：填写如：https://example.com/api/callback 很关键，填错了无法授权github进行登录
  • 保存
  1. 登录后台

配置完成之后，就可以登录网站后台了，地址是：https://你的网站域名/admin

点击 github 进行授权即可登录了，登陆后的界面是这样的，比较简洁清爽，大家看看，还行吗？左侧是文章集，中间是所有文章，右侧可以点击新建文章(中间也有新建按钮)。

点击新建文章后，界面是这样的，说实话，博主感觉非常一般。

  • 左侧输入元数据区，所占的空间太大了，一页都显示不完，有点喧宾夺主，一点都不紧凑，眼睛看着有点累。
  • 右侧可以实时预览，但是吧，往下看可以看到，这个预览一点美感都没有，排版混乱；
  • 正文编辑区本来是重点，结果它占比很小；注意，它可以自由切换富文本编辑和markdown编辑，这两种编辑方式；大家稍微试试就能发现 Decap cms 对 markdown 的预览效果非常一般，如果用它来查看编辑效果，怕是要毁了。

好了，Decap cms 无头后端就是这个样子，想必大家看完本篇文章已经很清楚了。

避坑

  • Github 仓库设置的修改，并不是实时生效的，最好等个1-2分钟，不然由于缓存的问题，导致你看不到修改后的效果，这可能会对调试造成很大障碍，小心在此浪费时间喔。
Astro CMS Cloudflare
相关阅读