使用 Eleventy 打造社区驱动型网站：筹备贡献

最近，当我想要开发一个网站时，我发现自己总是选择 Eleventy（也称为 11ty），胜过其他所有工具。很难找到一个静态网站生成器，它既能提供高级模板功能，又能避免干扰你的工作，让你专注于创建。

其中一个网站是 Style Stage，一个由社区贡献的现代 CSS 展示平台。Eleventy 在几个方面非常适合这个社区驱动的项目。

• 它在本地和生产主机上的构建速度极快。
• 它对如何构建模板没有强加任何意见。
• 它能够创建任何类型的文件，并完全控制文件如何以及在哪里呈现。
• 它能够混合使用模板语言，例如 HTML、Markdown 和 Nunjucks。
• 它的性能非常高，因为它编译成静态 HTML，并且生产环境中不需要任何依赖项。

Eleventy 成为创建社区驱动型网站的绝佳选择的首要原因是，它能够从数据源动态创建网站页面。在创建我们的示例社区网站时，我们将回顾如何使用此功能以及更多功能。

创建社区驱动型网站需要哪些准备？

在不远的过去，创建社区驱动型网站可能是一个痛苦的过程，涉及到 CMS 的噩梦，试图创建贡献者的工作流程。现在，借助 Eleventy 和其他一些现代工具，这几乎可以完全自动化，只需最少的监督。

在我们开始邀请贡献者之前，我们自己需要做一些工作。

1. 确定贡献者可以修改哪些内容

这将指导许多其他决策。在使用 Eleventy 构建 Style Stage 的情况下，我创建了一个 JSON 文件，贡献者可以使用它创建拉取请求来修改并提供他们自己的相关元数据，这些元数据用于创建他们的页面。

也许您还想允许访问包含其他资产，或者也许为方便分类和查询数据而创建多个数据文件是有意义的。或者，也许贡献者能够在特定目录中添加 Markdown 文件。

考虑贡献者可以修改或提交内容的范围，并权衡您审查提交内容的可行性。这将有助于建立一个成功的、可管理的社区。

GitHub Actions 可以让您 标记 或关闭包含无效文件的拉取请求，如果您需要对传入的内容进行高级自动化筛选。

2. 创建贡献者指南

提前花时间思考您的指南可以帮助您制定整体计划。您可能会发现需要添加其他功能，或者可以自动化的项目。

准备就绪后，最好将它们包含在 GitHub 存储库中的一个特殊文件中，名为 CONTRIBUTING.md。文件名全部大写是预期的格式。拥有此文件会在贡献者创建拉取请求或问题时自动创建一个额外的链接，并在提示中要求他们确保已查看指南。

如何处理内容许可和作者署名属于此类。例如，Style Stage 在 CC BY-NC-SA 许可证 下发布贡献的样式表，但作者保留其原始图形的版权。作为构建过程的一部分，许可证和作者署名将附加到样式中，并且作者署名元数据将在样式页面模板中更新。

您还需要考虑有关可接受内容的政策以及哪些原因会导致提交被拒绝。Style Stage 指出：

如果使用淫秽、过度暴力或其他令人不快的内容，违反上述指南或维护者酌情考虑的其他原因，提交将被拒绝。

3. 准备工作流程和自动化

虽然 Eleventy 负责网站构建，但其他关键参与者（使 Style Stage 贡献成为可能）是 Netlify 和 GitHub。

贡献者向 GitHub 上的 Style Stage 存储库提交拉取请求，并且当他们这样做时，Netlify 会创建一个部署预览。这使贡献者能够验证他们的提交是否按预期工作，并且通过不必下载提交以确保它们符合指南，从而节省了我的时间（作为维护者）。

所有讨论都通过 GitHub 进行。这具有公开问责制的额外优势，这有助于阻止不良行为者。

如果贡献者需要进行更改，他们可以更新他们的拉取请求或请求重新部署分支预览（如果它是已更改的远程资产）。此重新部署是一个非常小的手动步骤，并且可能并非每个 PR 都需要——甚至根本不需要，具体取决于您接受贡献的方式。

最后一步是最终批准 PR 并合并到主分支。一旦拉取请求被合并，Netlify 会立即将更改部署到生产环境。

当然，Eleventy 是一个静态网站生成器，并且多个主机提供 Webhook 来触发构建。Netlify 的构建插件 就是一个很好的例子。但是，如果您需要比每次合并 PR 都更频繁地刷新数据，则可以使用 IFTTT 或 Zapier 设置每日部署或基于各种其他触发器的部署。

值得注意的是，我们在这里讨论的内容确实将您的贡献者受众限制为拥有 GitHub 帐户。但是，GitHub 贡献可以完全通过 Web 界面完成，因此完全可以提供指导，以便其他用户——即使是不懂代码的用户——仍然可以参与。

4. 选择一种贡献者和社区更新的方法

这里首先需要考虑的是，通过评估更改的可能影响，确定让贡献者了解网站更新有多重要。

在 Style Stage 的情况下，核心将保持不变，但有一些计划中的可选功能。我选择了每周（大约）的时事通讯。这样，人们可以选择加入，并且对贡献者和用户都有价值。

Matthew Ström 的“使用 Netlify Forms 和 Netlify Functions 构建电子邮件注册小部件” 是一个学习如何在 Eleventy 中使用静态表单添加时事通讯订阅者的绝佳资源。它还介绍了将订阅者的电子邮件发送到 Buttondown（一种轻量级电子邮件服务）的功能。有关如何在 Eleventy 中管理您的 Buttondown 电子邮件模板和内容的示例，查看 Style Stage 设置，它展示了如何从已发布的网站构建中排除时事通讯。

如果您只期望低优先级的更新，那么 GitHub 的存储库通知可能足以进行通信。创建版本是另一种方法。或者，嘿，甚至可以在网站本身中整合通知。

5. 寻找并吸引潜在贡献者

Style Stage 最初的想法是我通过在 Twitter 上发起投票来验证的。然后，我发布了“征集贡献者”的呼吁，并与回复者以及转发我推文的人进行了互动。一个简短的时间线也有助于找到积极的贡献者，帮助 Style Stage 避免在没有任何提交的情况下启动。许多这些贡献者成为了布道者，将 Style Stage 介绍给了更多的人。我还推广了一场发布直播，该直播也作为宣传材料。

这就是“吸引”贡献者的含义。创建互动渠道并与他们保持互动有助于将偶然的贡献者转变为“粉丝”，鼓励其他人参与。

请记住，网站内容是鼓励参与的好地方！Style Stage 将其整个页面都用于鼓励提交。如果这对您来说不可行，那么您可能会考虑在有意义的地方使用提示来征集贡献。

6. 完成仓库设置并包含社区健康文件

最后，确保您的仓库已公开发布，并且包含适用的“社区健康”文件。这些文件旨在作为帮助建立指南、与社区成员设定良好期望、定义行为准则以及其他有助于社区整体“健康”的信息文档。GitHub 文档中提供了大量关于如何执行此操作的示例、建议和提示。

虽然文档中提到了六个文件，但根据我的经验，您至少需要三个文件：

• 一个位于项目根目录的README.md文件，其中包含项目的名称和对项目内容的良好描述。GitHub 会在仓库文件列表下方显示其内容。
• 一个CONTRIBUTING.md文件，描述贡献的提交流程。请明确说明涉及的步骤以及构成“良好”提交的内容。
• 一个拉取请求模板。我不会说这是强制性的，但它值得添加到此列表中，因为它进一步巩固了提交贡献的期望。许多模板甚至会包含一个详细说明批准要求的清单。

哦，在主分支上设置分支保护规则也是一个好主意。您可以通过转到仓库的设置→分支并选择“添加规则”选项来执行此操作。“合并前需要拉取请求审查”和“需要代码所有者的审查”是需要启用的两个关键设置。您可以查看 GitHub 文档以了解有关此保护的更多信息。

接下来…

我们在这里介绍的内容是使用 Eleventy 创建社区驱动型网站的起点。关键在于，在直接跳入代码之前，需要考虑几件事。社区需要关怀，这需要采取一些步骤来帮助建立一个积极健康且充满活力的社区。

您可能迫不及待地想开始使用 Eleventy 编写社区网站的代码！好吧，这将在本篇两部分文章的下一部分中介绍。我们将一起从头开始开发一个 Eleventy 启动程序，您可以将其扩展到您自己的社区（或个人）网站。