一个前端开发会议网站（使用 11ty 在 Netlify 上构建）

我构建了一个新的小型网站！它是一个列出即将举行的会议的网站，涵盖前端网页设计和开发领域。在过去的几年里（例如 2017 年），Sarah Drasner 承担了这项艰巨的任务。我们使用表单来提交新的会议信息，但它仍然是一项相当手动的任务，基本上是手动编辑博客文章。我想继续做这件事，因为我认为为我们这个细分领域的网页会议提供一个简单的参考页面很有价值，但我希望该网站能够年复一年地持续存在，并降低与维护相关的技术债务。

所以这就是我所做的！

我想把它放到 GitHub 上。

所以我把它放到了那里。 GitHub 的一部分美妙之处在于，它为全世界任何人都打开了通过拉取请求进行协作的可能性。您需要拥有一个 GitHub 帐户，但这是免费的，并且您至少需要在一定程度上了解 Git（这是一个我希望及时解决的障碍），但它比仅仅要求人们通过电子邮件向您发送内容和想法更具协作性。

我想在代码库中使用 Markdown 格式的内容。

这种 前置内容格式，即在 Markdown 文件顶部添加一些数据，是一种非常有用且易于理解的格式。您几乎不需要任何知识，甚至不需要 HTML，就可以创建/编辑这样的文件。

将实际的会议数据存储在代码库中意味着，拉取请求不仅用于设计或功能；更常见的是，它们将用于实际的会议数据。使这个网站充满所有最佳会议的工作是我们所有人的工作，而不仅仅是我们其中一个人的工作。

在撰写本文时，已经有了 30 个已关闭的拉取请求。

我使用 11ty 来构建网站。

11ty 几乎令人着迷地简单。它在一个目录中查找它需要处理或移动到另一个目录的内容。它开箱即用地支持我最喜欢的模板系统：Nunjucks。加上我上面提到的前置内容 Markdown。

我能够从本质上 设计一个卡片，它显示我们从 Markdown 文件中获得的数据，然后通过循环遍历这些 Markdown 文件并应用模板化的卡片来构建网站的主页。

11ty 基于 Node.js，所以虽然我确实遇到了一些学习曲线，但对我来说在其中工作很舒适。肯定有一些 配置 来完成我想做的事情。例如，这就是我必须创建“会议集合”以便循环遍历它们的方式。

config.addCollection("conferences", function(collection) {
  let allConferences = collection.getFilteredByGlob("site/conferences/*.md");
  let futureConferences = allConferences.filter(conf => {
    return conf.data.date >= new Date();
  });
  return futureConferences;
});

该网站托管在 Netlify 上。

在这里使用 Netlify 的一个原因是它非常容易使用。我通过将其连接到 GitHub 代码库在 Netlify 上创建了一个网站。我告诉它如何构建网站（它是一个简单的命令：eleventy）以及构建的网站文件在哪里（dist），就是这样。实际上，这甚至也是代码库的一部分。

现在，每当我推送到主分支（或接受一个拉取请求到主分支）时，网站都会自动重建和部署。只需几秒钟。这真的很棒。

更好的是，对于每个拉取请求，Netlify 都会首先确保一切正常。

因此，Netlify 不仅非常易于使用，而且我还免费获得了很多东西，例如该网站在其 CDN 上速度非常快等等。

我还很高兴我在这里几乎没有使用 Netlify 的功能，因此有很多东西我可以随着时间的推移深入研究。我打算这么做！

我使用 Zapier 每天重建网站。

这个网站具有一定的时间敏感性。这个网站的目的是作为即将举行的会议的参考。查看过去的会议不太有趣（尽管将来我们可能会有一个可浏览的档案）。我喜欢从主页上删除过去会议的想法。如果这是 PHP（或其他什么），我们可以在运行时做到这一点，但这是一个静态网站（出于目的）。在构建时执行此类操作没什么大不了的（请参阅上面仅返回今天日期之后的会议的代码片段）。但我们不能仅仅等待拉取请求来重建网站，我也不想把它变成我每天都需要手动做的事情。

幸运的是，使用 Zapier 这很容易。

Phil Hawksworth 曾经将此发挥到极致，并 构建了一个每分钟重建一次的时钟网站。

---

这个网站不仅仅是一个实验。我希望能够继续运行它！如果您是会议组织者的一部分，我非常确定将其添加到 添加您的会议 中不会有任何坏处，只要它具有可执行且可操作的行为准则，并且属于前端网页设计和开发领域。