一边开飞机、一边修飞机，Node 官网的重新设计

《前端暴走团》，喜欢请抱走~大家好，我是团长林语冰。

当当当当~惊不惊喜，意不意外，相信大家已经注意到 Node 官网的偷偷变帅了！

Node 最近可谓意气风发，不仅重新设计了新官网，还有新设计的吉祥物助阵。

今天，让我们一起来深度学习 Node 官方博客，携手 Node 团队一起回顾重新设计官网的这段旅程。

免责声明

本文属于是语冰的直男翻译了属于是，略有删改，仅供粉丝参考。英文原味版请传送 Diving int0 the Node.js Website Redesign。

规模和限制

Node 官方网站诞生已经超过 14 岁了。下载和文档主页的设计首次在 2011 年底崭露头角。这是 Node 0.6 的陈年旧事。

从那时起，Node 官网的规模随着项目需要与日俱增，包含了 1600 多页。在巅峰时期，它拥有大约 20 种国际化语言。Node 的域名（nodejs.org）每月处理 30 亿个请求，传输的数据量为 2 千兆字节。

错误的尝试

Node 官网首次尝试重新设计于 2019 年开始。工作从新的域名（nodejs.dev）和新存储库起步。蓦然回首，这可能从一开始就冥冥之中注定了该项目的失败。

简而言之，这个代码库不是社区或贡献者的常驻之地，也不存在已建立的贡献者工作流程。为生活奔走忙碌的人们自愿贡奉献自己的时间，但并不想学习第二套工具。该项目无法维持蒸蒸日上所需的领导力。

一边开飞机，一边修飞机

2022 年，团队回归现有的存储库，考虑如何重建站点。Node 的旧版代码库开始在各个维度上显示出它的老龄化。Node 旧版官网的设计已经 out 了。Node 旧版网站的内部结构很难扩展，而且文档也很少。

Node 团队仔细考虑了技术堆栈。正在进行的重新设计的第一阶段涉及 nextra，这是一个优秀的 Next 静态站点生成器。但随着网站的发展，我们发现自己经常“打破” nextra 的惯例，依赖于 nextra 抽象的底层 Next 模式和强大工具。

Next 是一个自然选择的进化过程，以其灵活性和强大功能而赫赫有名。举个栗子，Node 新网站仍然是为了终端用户速度和基础托管独立性而静态构建的，但利用 Next 的增量静态重新生成，来获取版本发布等动态内容。

我们与 Vercel 强强联手。当 Node 新官网的规模在静态导出时使 webpack 的内存管理紧张时，它们提供了直接支持。我们在公开发布之前对新版本进行了 Beta 测试，这是该框架的真实压力测试。

2023 年 4 月，我们进行了一次小型切换。拉取请求有 1600 个文件，将 GitHub UI 推向了渲染能力的极限。Node 新官网的基建会发生变化，但外观、内容和创作体验将保持不变。

这是一个重要的里程碑 —— 证明我们可以一边开飞机、一边修飞机。

重新设计

OpenJS 基金会慷慨解囊，全力资助 Node 团队与设计师一起进行重新设计。

设计师为 Node 新官网带来了现代化设计，其中包括用户体验流程、暗/亮模式、页面布局、移动视口注意事项和组件细分。

接下来是将设计实现为代码，重点放在基础设计元素和结构化组件层次结构的顺序构建上。我们从第一天起就构建了组件的变体，并从一开始就考虑了国际化。我们选择使用 Tailwind CSS，但重点是设计令牌和应用 CSS。

Orama 搜索将网站的所有内容让用户触手可及。它们对我们的静态内容进行索引，并以闪电般的速度提供 API 内容、学习材料、博客文章等结果。很难想象如果没有这个强大的搜索功能，Node 爱好者该如何方便的查阅文档。

Node 旧版官网已经国际化为近 20 种语言。虽然但是，一系列不幸的事件导致我们重置了所有翻译。

我们利用 Sentry 提供错误报告、监控和诊断工具。这对于识别问题和为我们的用户提供更好的体验大有助益。

Vercel 和 Cloudflare 支持可确保网站快速可靠。我们还通过 GitHub Actions 投资了 CI/CD 管道，为贡献者提供实时反馈。这包括使用 Chromatic、Lighthouse 结果进行视觉回归测试，确保网站质量保持较高水平。

庆典开源日和黑客啤酒节

重新设计工作与 2023 年 9 月的庆典开源日以及下个月的黑客啤酒节不谋而合。我们通过将“良好的第一个 issue”作为离散的开发任务来为这些事件做好准备。就庆典开源日而言，我们还提供了现场指导，以便与会者能够以落地公关结束这一天。

仅在庆典开源日期间，就有 28 位作者提出了 40 个 PR（拉取请求）。黑客啤酒节又收到了 26 个 PR。

文档

开源项目的好坏取决于它的文档。在此过程中，我们迭代或引入了：

• 
  
• 合作者指南
  
• 贡献
  
• README（自述文件）
  
• 翻译
  
• ......
  

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

未来规划

本次重新设计为 Node 官网的新时代奠定了基础。但工作还有待完成：

• 
  
• 将网站重新设计扩展到 API 文档。它们位于单独的代码库中，但计划将此处开发的样式移植到 API。
  
• 探索网站和 API 文档的 monorepo（多库开发）。这应该可以改善重要的耦合，并减少管理两个独立代码库的开销。
  
• 重新调整国际化努力。先前的翻译无法延续。我们的重量级 Markdown/MDX 方案提出了一个独特的挑战，我们正在与 Crowdin 合作解决。
  
• 持续改进 CI/CD 流程。
  

致谢

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

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

本期话题是 —— 你觉得 Node 的新官网颜值如何、体验如何？欢迎在本文下方自由言论，文明共享。

坚持阅读，自律打卡，每天一次，进步一点。