Netlify CMS 与 Gatsby 结合使用——最佳选择，但也存在一些小问题

当我需要一个用于Gatsby网站的内容管理系统时，我选择了Netlify CMS。接下来我会谈谈我的选择标准、优点和缺点。

这是一个为一位完全不懂技术的人（这也是我一开始就需要内容管理系统的原因）制作的个人网站，她一提到网站就想到WordPress。她，也就是我的妻子，虽然技术还算不错，但却不愿意编辑Markdown或其他“复杂的东西”🙃。我的想法是，可以通过一些“现场培训”来弥补一些不太直观的功能。

标准

• 易于设置身份验证/授权
• 使用 Markdown 格式存储文件，存储位置由我决定。
• 可定制，以获得良好的用户体验
• 良好的开发者经验
• 便宜（最好是免费的）

所以，我需要的就是上面这些。几乎所有托管服务都能轻松创建账户和管理身份，这几乎是第一项要求。而这正是你需要服务器的原因，如果你的网站是静态的，你可能还没有服务器。

但是，看看现有的无头CMS选项，比如headlesscms.org上的那些，如果你想要一个基于Git的开源CMS，选择并不多。我当时的目标之一是使用Markdown来编写内容，因为我觉得以后迁移起来会比从WordPress（尤其是WordPress.com）迁移内容要容易得多。另外，我还要提一下，在我最初做调研的时候， TinaCMS还没有发布。

总之，由于我之前使用 Netlify 的体验非常好，Netlify CMS早已是我首选的 CMS 系统。在阅读了《Gatsby 和 Netlify CMS：第一印象》这篇文章后，我决定直接使用Netlify 提供的一键安装功能。

等网站上线运行一段时间后，我就可以回顾一下我的Netlify CMS使用体验了。先说说积极的方面吧。

优点😄

• 与网站一同部署（无需外部托管）
• Netlify 主机服务免费，最多可供 5 位用户使用。
• 轻松添加路线特定编辑链接
• 您可以自己编写代码，实现即时预览。
• 页面类型和字段易于配置
• 可以添加自定义编辑器控件

Netlify CMS 只是一个额外的依赖项（Gatsby 插件），它与您的网站共存。当您向页面添加字段时，网站更改和所需的 CMS 更改可以放在同一个提交中并部署。这很棒，可以自动同步。

在 Netlify 上托管网站时，您可以添加最多 5 个额外用户，这些用户可以作为编辑/管理员登录 CMS。您可以通过 netlify.com 上的帐户轻松配置此功能，就像配置其他任何设置一样。

在网站上添加一个链接，点击后即可跳转到该页面的编辑模式，这只需要使用正确的URL即可。这或许不是最重要的功能，但却是一个能让网站所有者的工作轻松不少的小细节。

编辑页面时，预览会直接显示在富文本编辑器旁边。预览的具体样式由您（开发者）决定。我花了一些时间才弄明白如何复用 Gatsby 网站的样式（我在那里使用了styled-components），但令人欣喜的是，这只需要编写代码就能实现。

页面及其字段可以在 YAML 文件中进行配置，请参阅“集合类型”文档。虽然 YAML 文件容易出错，但它的功能符合预期。有关添加自定义编辑器控件（称为小部件）的文档，请参阅“创建自定义小部件”。

缺点🙁

• 本地保存更改需要额外配置
• GitHub 上有很多未解决的问题。
• 需要改进的富文本编辑器
• 只能预览您正在编辑的部分。
• 使用 Gatsby 可以轻松打破预览
• 糟糕的 HTML 代码会增加自动化 UI 测试的难度。

默认DX不好

当然也有一些缺点。首先也是最明显的一点是，默认情况下，所有通过 CMS 用户界面进行的更改，即使是在本地运行，也会应用到远程 Git 仓库。这最初对我来说是个很大的障碍，直到我解决了本地配置问题，才开始认真寻找其他替代方案。我无法想象在开发过程中如何忍受这种情况，我认为这非常不直观，而且我并非孤例。

这个代码库在 GitHub 上有相当多的未解决的问题。有些问题很小，可以用 Gatsby 来解决，但它的完善程度远不及一些商业替代方案。

例如：我有一个标签字段，标签以逗号分隔的列表形式输入，并以列表形式保存为 Markdown 文件。如果文章中没有任何标签，Netlify CMS 会将其保存为一个值为空字符串的列表。当 Gatsby 尝试为每个标签创建路由时，如果提供的标签为空[""]，就会出现问题。当然，可以对这类问题进行一些调整，但这类小问题需要您自行处理。

富文本编辑器

富文本编辑器在很多方面都有改进空间。它使用的是较旧版本的Slate，虽然一些问题在新版本中已经得到解决，但升级似乎比较复杂。此外，该编辑器也无法自定义。请看这张截图（红线是我的提示）。

插入图片需要展开额外的控件。然而，却有两个始终可见的按钮用于添加代码。谁需要富文本编辑器呢？是想添加代码的人，还是想添加图片的人？🤔 好吧，这两者并不矛盾，但不得不承认这有点奇怪。

预览

预览只能访问当前编辑视图中输入的数据，无法显示整个网站。因此，在网站开发过程中（而不查看 CMS），很容易导致预览出错。您可能希望预览渲染与网站相同的 React 组件，但这些组件不能包含 GraphQL 查询。我在开发过程中多次破坏了预览，直到很久以后查看 CMS 时才发现。“错误：无法获取此 StaticQuery 的结果”这条信息对我来说再熟悉不过了。如果 Cypress 能修复这个问题（自 2016 年 5 月以来一直存在），我至少可以编写测试来检查预览是否出了问题。

关于可测试性还有一点需要说明。如果 HTML 代码更好，编写自动化测试就会更容易，因为我无需使用脆弱的选择器。另一方面，我还没见过哪个 CMS 的 HTML 代码写得好，而我有一个相当全面的测试套件，它通过 CMS 编辑页面并创建新的博客文章，然后在网站上进行验证。

结论🙂

总而言之，就我这次的需求而言，我认为 Netlify CMS 是个不错的选择。如果我的预算更充足，对编辑功能的要求也更高，我可能会做出不同的选择，但就目前的使用场景而言，我已经非常满意了。

鉴于产品负责人/唯一编辑/网站管理员/我的妻子在看到 Netlify CMS 之前对 WordPress 有着强烈的偏好，我惊喜地发现向她推销 Netlify 竟然如此轻松。无法快速预览整个页面完全不是问题，她反而称赞预览能够随着她的输入即时更新，这真是太棒了。她还称赞了 Netlify 的网页界面，认为它比 WordPress 编辑器简洁得多：“这里看起来简洁多了。 ”

最后，我必须说，我非常喜欢那些提供慷慨免费套餐的服务（这里主要指的是 Netlify、GitHub 和 Gatsby），我可以免费试用并学习，以便在工作中进行架构讨论时有所参考。我希望这种商业模式能够持续下去，即使像我这样的“蹭卡用户”也一样，谢谢！