使用 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 起始项目，您可以将其扩展到您自己的社区（或个人）网站。