深入探讨 Node.js 网站重新设计

Node.js 刚刚推出了一个新的 Next.js 网站并分享了幕后细节。他们考虑过 Nextra，但最终选择了自定义 Next.js 设置。该网站是静态构建的，使用 ISR 来生成动态内容。

现在您已经注意到nodejs.org 的全新外观了！

我们在设计时非常谨慎，既向过去致敬，又展望未来。该网站有许多聚合用例、数千个页面，并且是许多人的日常资源。整个故事有一些死胡同和弯路。但最终这是集体努力的结果。凭借超过三打贡献者的贡献以及与精选合作伙伴的出色团队合作，该项目得以实现。该网站改进了信息架构，以前所未有的方式将内容带到用户的指尖，并在未来几年建立了稳定的开发平台。我们还迭代了改进的开发人员体验、更清晰的 CI/CD 反馈以及平易近人的技术堆栈。

请继续阅读，更深入地了解这段旅程并洞察即将发生的事情。

规模和限制

nodejs.org 网站已经存在超过 14 年了。类似于实用下载和文档主页的设计首次出现于 2011 年底。这是 Node.js 0.6天的背景。

从那时起，该网站的规模随着项目的需要而缓慢增长。它包含 1600 多页。在鼎盛时期，它拥有近 20 种本地化语言。该域每月处理30 亿个请求，传输的数据量为 2 PB。毫不夸张地说，该网站是 Node.js 社区的重要资源。确保更改不会对用户和贡献者造成不必要的干扰绝对是至关重要的。

错误的开始：nodejs.dev

该项目首次尝试重新设计于 2019 年开始。工作从新域和新存储库nodejs.dev开始。回想起来，这可能从一开始就无意中注定了该项目的失败。该团队面临着孤立开发的挑战。简而言之，这个代码库不是社区或贡献者所在的地方。不存在已建立的贡献者工作流程。已经很忙的人们自愿贡献出自己的时间，不想学习第二套工具。这是一个太沉重的负担。该项目无法维持维持势头所需的领导力。此外，新技术堆栈的单一切换会很复杂，并对网站的现有存在构成风险。

然而，nodejs.dev 带来了很多经验教训和更新的内容。我们创建了一系列综合学习资源，并将其运用到当前的设计中。所有这一切正在形成一个愿景：渐进式进化、就地开发以及尽可能少的干扰。

在飞行中重新组装飞机

2022 年，Claudio Wunder 加入了该项目。他弥合了两项开发工作之间的差距。他引导网络团队走向一个新的方向：回到现有的存储库。考虑如何重建站点，同时仍作为生产级资源运行。

代码库开始在多个维度上显示出它的年龄。设计已经过时了。对于大多数参与该项目的 Web 开发人员来说，Metalsmith 和 Handlebars 模板已经不再受欢迎。该网站的内部结构很难扩展，而且文档也很少。尝试混合代码和内容是一个挑战。

团队仔细考虑了技术堆栈。正在进行的重新设计的第一阶段涉及nextra，一个优秀的 Next.js 静态站点生成器。这是一个很好的入门方式，但随着网站的发展，我们需要自定义设置。我们发现自己越来越“突破”nextra 的惯例，依赖于 nextra 抽象的底层 Next.js 模式和强大工具。

Next.js是一个自然的发展过程，以其灵活性和强大功能而著称。例如，该网站仍然是为了最终用户速度和基础托管独立性而静态构建的，但利用 Next.js 的增量静态重新生成来获取动态内容（例如版本）。 React 提供的创作体验不仅更符合贡献者当前的技能，而且还与我们可以使用的更大的工具生态系统更加一致。

在此过程中，我们与Vercel建立了密切的合作伙伴关系。当网站的规模在静态导出期间使 webpack 的内存管理紧张时，他们提供了直接支持。这是一种共生关系。我们的需求推动他们的平台得到改进，他们的平台使我们能够构建更好的网站。我们在公开发布之前对新版本进行了 Beta 测试，这是该框架的真实压力测试。

2023 年 4 月，我们进行了一次小型切换。这是一个有点讽刺的说法。拉取请求有 1600 个文件，将 GitHub UI 推向了渲染能力的极限。网站的基础设施会发生变化，但外观、内容和创作体验将保持不变。这是一个重要的里程碑——证明我们可以在飞行中重建飞机。

重新设计

OpenJS 基金会非常友善地资助我们与设计师Hayden Bleasel一起进行重新设计。 Hayden 为该网站带来了现代设计，并帮助我们思考遇到的多方面用例。结果是我们可以用它来指导我们的开发的Figma文档。其中包括用户体验流程、暗/亮模式、页面布局、移动视口注意事项和组件细分。

接下来是将设计实现为代码，这是一项分布在世界各地的努力。重点放在基础设计元素和结构化组件层次结构的顺序构建上。我们从第一天起就构建了组件的变体，并从一开始就考虑了国际化。这减少了返工，并使新手可以轻松完成任何任务。我们开始通过Storybook和Chromatic的托管实例单独构建组件。 Storybook 是原型、迭代和测试组件的好地方。我们选择使用Tailwind CSS，但重点是设计令牌和应用 CSS。这种共同语言帮助新手了解我们的方法并翻译 Figma。

Orama搜索将网站的所有内容放在用户的指尖。它们对我们的静态内容进行索引，并以闪电般的速度提供 API 内容、学习材料、博客文章等结果。那里的团队直接贡献了这种集成，并继续帮助我们提供卓越的体验。很难想象没有这个功能。

Node.js 在我们社区中的影响力对我们来说很重要。因此，旧网站已国际化为近 20 种语言。然而，一系列不幸的事件导致我们重置了所有翻译。这是一个艰难的决定，但考虑到当时的情况，这是正确的决定。我们正在与Crowdin合作，重新建立我们的努力。这将包括仔细解析基于 MDX 的新内容。我们期待着未来几个月的持续内部化。

当我们在新的基础设施上构建并开始预览该网站并重新设计时，更深入地了解最终用户的行为是非常宝贵的。我们利用Sentry提供错误报告、监控和诊断工具。这对于识别问题和为我们的用户提供更好的体验有很大帮助。在重新设计工作之前，Sentry 也很有用，可以通过重播用户会话来识别旧站点中的问题。

在所有这些集成和开发步骤中，我们一直关注最终用户的可访问性和性能。 Vercel 和Cloudflare支持可确保网站快速可靠。我们还通过 GitHub Actions 投资了 CI/CD 管道，为贡献者提供实时反馈。这包括使用 Chromatic、Lighthouse 结果进行视觉回归测试，以及一套检查和测试，以确保网站质量保持较高水平。

格蕾丝·霍珀和黑客啤酒节

在整个网站重新设计过程中，我们积极努力打造包容和热情的体验。重新设计工作与 2023 年 9 月的Grace Hopper 庆典开源日以及下个月的Hacktoberfest非常吻合。这两个活动都向整个生态系统的项目展示了新的贡献者。我们通过将“良好的第一个问题”作为离散的开发任务来为这些事件做好准备。就 Grace Hopper 而言，我们还提供了现场指导，以便与会者能够以落地公关结束这一天。我们很自豪地说，我们有许多首次为该项目做出贡献。

仅在 Grace Hopper 期间，就有 28 位作者提出了 40 个 PR。 Hacktoberfest 新增 26 个 PR。

文档，文档，文档

开源项目的好坏取决于它的文档。允许新贡献者异步建立上下文至关重要。为此，我们不将 DX（开发人员体验）限制于工具。重新设计为我们提供了一个很好的机会来发现和改进文档中的差距。在此过程中，我们迭代或引入了：

• 合作者指南
• 内容_VS_代码
• 贡献
• DEPENDENCY_PINNING
• 治理
• 自述文件
• 翻译

新代码非常注重内联代码和配置注释、关注点分离以及明确定义的常量。整个过程中使用 TypeScript 可以帮助贡献者理解数据的形状和函数的预期行为。

未来的计划

重新设计为 Node.js 网站的新时代奠定了基础。我们拥有坚实的基础，可以持续多年。如果过去有任何指示的话，我们将在这个空间内迭代很长一段时间。

但工作还没有完成。出色地：

• 将网站重新设计扩展到 API 文档。他们位于单独的代码库中，但计划将此处开发的样式移植到 API。这又是一项细致的工作，不能影响日常使用或贡献。
• 探索网站和 API 文档的 monorepo。这应该可以改善重要的耦合，并减少管理两个独立代码库的开销。
• 重新调整国际化努力。先前的翻译无法延续。我们的大量降价/MDX 方法提出了一个独特的挑战，我们正在与 Crowdin 合作解决。
• 持续改进 CI/CD 流程。我们在向贡献者提供自助反馈方面取得了巨大进步，但还有更多工作要做。

谢谢

许多人和组织为实现重新设计做出了大大小小的贡献。我们要感谢：

• 首先也是最重要的是所有使这个项目成为可能的贡献者和合作者。
• Chromatic提供视觉测试平台，帮助我们审查 UI 更改并捕获视觉回归。
• Cloudflare用于提供为 Node.js 网站、Node.js 的 CDN 等提供服务的基础设施。
• Crowdin提供了一个平台，使我们能够本地化 Node.js 网站并与译者合作。
• Hayden Bleasel对 Node.js 重新设计的设计工作。
• Orama提供了一个搜索平台，可以为我们的内容建立索引并提供闪电般快速的结果。
• Sentry为其错误报告、监控和诊断工具提供开源许可证。
• Vercel提供为 Node.js 网站提供服务和支持的基础设施
• 最后，感谢OpenJS 基金会的支持和指导。

社区很强大，我们对共同实现的目标感到兴奋。

原文链接