当您在静态网站中添加任何包含用户生成内容或动态数据的内容时，构建过程的复杂性可能与启动单片 CMS 相当。我们如何在不将多个第三方服务拼接在一起的情况下，将丰富的内容添加到静态网站中呢？
对于开发社区中的人员来说，静态网站生成器是传统内容管理系统 (CMS)（如 WordPress）的热门选择。相比之下，静态网站通常重量轻，高度可配置，快速，易于使用，并且几乎可以在任何地方部署。
对于静态网站，服务器不会生成任何代码；我们用 API 和构建过程取代了数据库和服务器端代码。
这被称为 JAMstack，代表 JavaScript、API 和 Markup。我对 JAMstack 网站有强烈的偏好，因为我觉得比使用在客户项目中偶尔不得不使用的那些通常庞大且单片的 CMS 时对输出的控制力更强。
尽管我对此充满热情，但我经常对 JAMstack 项目中途遇到的陡峭复杂性曲线感到沮丧。通常，前几周是极其轻松的。很容易入门，可以看到明显的进展，一切感觉都很精简快速。随着时间的推移，随着更多功能的添加，构建步骤变得更加复杂，添加了多个 API，突然一切感觉都很慢。换句话说，开发体验开始受到影响。
它通常看起来像这样
造成这种复杂性急剧上升的原因之一是，markdown 可以轻松表示的数据类型有限。关系就是静态网站难以处理的一个例子。页面或资产集合（如图片库）之间的关系只能通过 markdown 以低效的方式表示。需要进行大量的预处理才能解析比简单的标签或类别集更复杂的内容。如果您曾经这样做过，您也会知道在 markdown 中管理关系的创作体验并不理想。
用户生成内容是另一个可能导致静态网站复杂性急剧上升的领域。添加评论、评级、点赞或任何其他类型的动态内容功能将需要第三方服务 - 每个服务都需要管理自己的帐户，更不用说添加第三方脚本可能 对页面性能产生负面影响。
如果某项服务不符合您的特定要求，有时可以使用 Google 表单或 AirTable 等通用平台将解决方案拼凑在一起。
最终结果是我们将数据库外包出去，将内容管理体验碎片化，并拼凑出一堆妥协方案。这与最初设置和部署 JAMstack 网站的轻松程度形成了鲜明的对比。
虽然这种复杂性曲线并非 JAMstack 项目独有，但向 markdown 驱动的网站添加丰富功能比我们愿意承认的要困难得多。发生了什么！？缺乏复杂性是我们最初偏爱 JAMstack 的原因之一。
我们做了网页开发者通常会做的事情。我们将复杂性从一个空间转移到另一个空间，然后自我表扬 😂。服务器端没有复杂性对前端性能有利，但是一旦我们这样做，就没有什么动力去进一步优化。荒谬的构建时间和复杂的工具链已成为现代前端网页开发的可接受现实。
JAMstack Plus
在我听起来太过批评之前，我应该明确表示，我非常喜欢静态网站生成器。我认为它们是许多简单网站的完美解决方案，您仍然应该使用它们。但是，我觉得我拥有的并且可以配置的简单内容管理层比
- 糟糕的内容管理体验，
- 第三方服务的复杂集成，以及
- 低效的构建过程更可取。
我想将 CMS 的优点与静态网站生成器相结合。
而且看来，我并不是唯一得出这个结论的人
WordPress（等等）通常与静态网站生成器_相对_。
我明白了。他们感觉像是不同的世界。
但是 SSG 只接收输入并生成静态输出。您可能仍然需要/想要一个 CMS，WordPress 可以是那个 CMS。它有 API，SSG 可以利用它们。
— Chris Coyier (@chriscoyier) 2019 年 6 月 11 日
我使用静态网站生成器的经历让我觉得它们是一种非常引人注目的工作方式，但请确保您真的想要一个静态网站。我经常看到的是，为了处理数据库可以轻松完成的事情，人们不得不做出混乱的妥协。
— Rachel Andrew (@rachelandrew) 2019 年 9 月 20 日
WordPress 是一种很棒且熟悉的内容编辑体验，但如果您能够以静态方式部署您的网站，以获得最终的速度、稳定性和安全性，会怎样？⚡️您做得到，以下是如何在 Netlify 上执行无头 WordPress 的插件概述：https://#/lz6fscbX3q
— Netlify (@Netlify) 2019 年 7 月 30 日
解决方案不需要是另一个第三方服务，也不需要完全放弃静态网站。您可以使用个性化的内容管理层和统一的 API 来丰富静态网站。它可能不像您想象的那样难。
第一步是为您的网站创建一个 API。您可以使用任何无头 CMS，但我对许多选项的挑战在于，它们对您想要的内容类型做了很多假设。您可能不希望 CMS 管理页面和帖子，而是希望使用它来存储评论或图片。我发现使用 WordPress 时尤其困难。我经常感觉自己是在强迫一个博客平台成为我需要的服务。
新版本的 KeystoneJS (Keystone 5) 是更具主见的内容管理系统的绝佳替代方案。它由许多独立的组件组成，因此您只需添加所需的组件即可。这意味着它感觉不像修改一个博客平台。相反，它就像创建个性化的迷你 CMS 和 API，专门用于您的网站。
我将这种方法称为 JAMstack Plus。
为了帮助您开始使用这个想法，我创建了两个项目
- Supermaya，一个针对静态网站生成器 Eleventy 的入门工具包。
- Keystone JAMstack Plus，一个博客丰富平台。
介绍 Supermaya
我要与您分享的第一个项目是 Supermaya，一个 Eleventy 入门工具包，旨在帮助在没有复杂构建过程的情况下，向博客或网站添加丰富功能。
它包含所有“博客标准”功能，包括
- 帖子和页面
- 分页
- 标签
- RSS 提要
- 服务工作者
- 延迟加载图片
- 关键 CSS（如果启用）
它还具有体贴且可访问的标记。如果正确部署，它应该能够在 Lighthouse 审计中直接获得满分
我并没有专门将 Supermaya 构建为一个向静态网站添加用户生成内容的平台。相反，我开始构建它是因为我对现有静态网站生成器与其他构建工具的集成方式不满意。这就是为什么 Supermaya 中的所有预处理步骤都内置在 Eleveny 本身中的原因。这包括 SCSS 和 JavaScript 的编译。统一编译步骤消除了并行运行 Grunt、Gulp 或 Webpack 等构建工具的需要。
之后，我意识到 JAMstack 网站复杂性增加的另一个原因是与第三方服务的集成，通常用于用户生成内容。为了解决这个问题，Supermaya 可选择与 Keystone JAMstack Plus 入门工具包 绑定，这使得添加用户生成内容和其他丰富功能变得更加容易。
您可以 一起部署 Keystone 和 Supermaya，并在安装过程中按照说明进行操作，同时连接它们。这将把 Keystone 部署到 Herouku，将 Supermaya 部署到 Netlify，以及配置您的管理员用户和 API URL。
使用渐进增强添加丰富功能，因此如果无法访问 API 或出现服务器错误，该网站将继续运行，而不会对用户造成明显的降级或延迟。
JAMstack Plus 入门工具包
该 Keystone JAMstack Plus 入门工具包 允许您向博客添加丰富功能，包括
- 评论
- 点赞
- 阅读列表，以及
- 登录
就像 Supermaya 一样，它可以单独使用。部署后，您将获得访问管理界面的权限，允许您创建和管理内容。您还将获得一个 GraphQL 端点，可以连接到 Supermaya。
它被配置为一个用于用户生成内容的无头 CMS。 它期望页面和帖子由静态网站生成器管理。 但是，只需少量工作——并遵循 Supermaya 中的示例——即可将任何前端连接到 GraphQL API。
我鼓励您修改入门工具包：添加额外功能或直接从 Keystone 提供页面内容。 如果您添加了可以被社区其他成员使用的功能，请贡献回入门工具包，这样我们可以让每个人更容易地为他们的网站添加丰富的功能，而无需使用第三方服务。
注意：自动部署 将部署到 Heroku 的免费实例。 如果不使用，它将定期休眠，这可能导致在一段时间不活动后 API 响应时间变慢。 您可以升级到爱好者实例以避免这种情况。
考虑拥有您自己的数据
JAMstack 和服务器并不冲突。 始终存在一个服务器（通常是多个）——只是谁拥有它。 如果您使用任何类型的第三方服务，他们很可能拥有您的帐户信息、您的内容并收集用户数据。
有时，与部署和管理后端服务的开销相比，这可能是一种可接受的折衷方案，但是当将多个 API 拼接在一起的复杂性变得与 CMS 相当时，我相信管理一个您拥有的微型可配置服务可以为用户、开发人员和内容管理员提供更好的体验。 它还为网站提供了一个坚实的基础，使它们能够超越纯粹的静态内容，发展成更加复杂和多样的应用程序类型。
我认为 JAMstack 不应该通过将所有复杂性推入前端构建过程或通过牺牲开发人员和用户体验来定义。 相反，我认为 JAMstack 应该专注于提供精简、可配置的静态前端。 这些可以连接到 API 以提供用户生成的数据和内容管理服务。 如果它能提供最佳结果，就没有理由不拥有和管理这些服务。