《前端暴走团》，喜欢请抱走~大家好，我是团长林语冰。
当当当当~惊不惊喜，意不意外，相信大家已经注意到 Node 官网的偷偷变帅了！
凭借许多贡献者以及与出色的团队合作，Node 新官网码到功成。该网站改进了信息架构，以前所未有的方式让用户触手可及，并在未来几年建立了稳定的开发平台。我们还迭代了改良的开发体验、更清晰的 CI/CD 反馈、以及平易近人的技术堆栈。
Node 最近可谓意气风发，不仅重新设计了新官网，还有新设计的吉祥物助阵。
今天，让我们一起来深度学习 Node 官方博客，携手 Node 团队一起回顾重新设计官网的这段旅程，并洞察即将发生的事情。
免责声明
本文属于是语冰的直男翻译了属于是，略有删改，仅供粉丝参考。英文原味版请传送 Diving into the Node.js Website Redesign。
规模和限制
Node 官方网站诞生已经超过 14 岁了。下载和文档主页的设计首次在 2011 年底崭露头角。这是 Node 0.6 的陈年旧事。
从那时起，Node 官网的规模随着项目需要与日俱增，包含了 1600 多页。在巅峰时期，它拥有大约 20 种国际化语言。Node 的域名（nodejs.org）每月处理 30 亿个请求，传输的数据量为 2 千兆字节。
错误的尝试
Node 官网首次尝试重新设计于 2019 年开始。工作从新的域名（nodejs.dev）和新存储库起步。蓦然回首，这可能从一开始就冥冥之中注定了该项目的失败。
这个代码库不是社区或贡献者的常驻之地，也不存在已建立的贡献者工作流程。该项目无法维持蒸蒸日上所需的领导力。此外，新技术堆栈的单一切换会很复杂，并对网站的现有存在构成风险。
虽然但是，Node 新域名的失败带来了很多经验教训和新玩意。我们创建了一系列综合学习资源，并将其运用到当前的设计中。所有这一切正在形成一个愿景：渐进式进化、就地开发，以及尽可能少的干扰。
一边开飞机，一边修飞机
2022 年，网络团队走向一个新的方向：回归现有的存储库，考虑如何重建站点，同时仍作为生产级资源运行。
Node 旧版官网的设计已经 out 了。对于大多数参与该项目的 Web 开发者而言，Node 旧版网站的内部结构很难扩展，而且文档也很少。
Node 团队仔细考虑了技术堆栈。正在进行的重新设计的第一阶段涉及 nextra，这是一个优秀的 Next 静态站点生成器。但随着网站的发展，我们需要自定义设置，依赖于 nextra 抽象的底层 Next 模式和强大工具。
Next 是一个自然选择的进化过程，以其灵活性和强大功能而赫赫有名。举个栗子，Node 新网站仍然是为了终端用户速度和基础托管独立性而静态构建的，但利用 Next 的增量静态重新生成，来获取版本发布等动态内容。React 提供的创作体验不仅更符合贡献者当前的技能，而且还与我们可以使用的更大的工具生态系统更加一致。
在此过程中，我们与 Vercel 强强联手。当 Node 新官网的规模在静态导出时使 webpack 的内存管理紧张时，它们提供了直接支持。我们在公开发布之前对新版本进行了 Beta 测试，这是该框架的真实压力测试。
2023 年 4 月，我们进行了一次小型切换。拉取请求有 1600 个文件，将 GitHub UI 推向了渲染能力的极限。Node 新官网的基建会发生变化，但外观、内容和创作体验将保持不变。这是一个重要的里程碑 —— 证明我们可以一边开飞机、一边修飞机。
重新设计
OpenJS 基金会慷慨解囊，全力资助 Node 团队与设计师一起进行重新设计。设计师为 Node 新官网带来了现代化设计，并辅助我们思考遭遇的多方面用例。结果是我们可以用它来指导我们开发的 Figma 文档。其中包括用户体验流程、暗/亮模式、页面布局和组件细分。
接下来是将设计实现为代码，这是一项分布在世界各地的共同努力。重点放在基础设计元素和结构化组件层次结构的顺序构建上。
我们从第一天起就构建了组件的变体，并从一开始就考虑了国际化。这减少了返工，并使新手可以轻松完成任何任务。我们开始通过 Storybook 和 Chromatic 的托管实例单独构建组件。Storybook 是原型、迭代和测试组件的好地方。我们选择使用 Tailwind CSS，但重点是设计令牌和应用 CSS。
Orama 搜索将网站的所有内容让用户触手可及。它们对我们的静态内容进行索引，并以闪电般的速度提供 API 内容、学习材料、博客文章等结果。
Node 在我们社区中的影响力对我们而言至关重要。因此，Node 旧版官网已经国际化为近 20 种语言。虽然但是，一系列不幸的事件导致我们重置了所有翻译。
当我们在新的基建上构建并开始预览 Node 新官网并重新设计时，我们更深入地了解终端用户的行为十分宝贵。我们利用 Sentry 提供错误报告、监控和诊断工具。这对于识别问题和为我们的用户提供更好的体验大有助益。在重新设计工作之前，Sentry 也很有用，可以通过重播用户会话来识别旧站点中的问题。
在所有这些集成和开发步骤中，我们一直关注终端用户的可访问性和性能。Vercel 和 Cloudflare 支持可确保网站快速可靠。我们还通过 GitHub Actions 投资了 CI/CD 管道，为贡献者提供实时反馈。这包括使用 Chromatic、Lighthouse 结果进行视觉回归测试，以及一套检查和测试，以确保网站质量保持较高水平。
文档
开源项目的好坏取决于它的文档。允许新贡献者异步建立上下文至关重要。为此，我们不将开发体验限制于工具。在此过程中，我们迭代或引入了：
- 合作者指南
- 贡献
- README（自述文件）
- 翻译
- ……
新代码非常注重内联代码和配置注释、关注点分离，以及明确定义的常量。整个过程中使用 TS 可以辅助贡献者理解数据的形状和函数的预期行为。
未来规划
本次重新设计为 Node 官网的新时代奠定了基础。但工作还有待完成：
- 将网站重新设计扩展到 API 文档。它们位于单独的代码库中，但计划将此处开发的样式移植到 API。这又是一项细致的工作，不能影响日常使用或贡献。
- 探索网站和 API 文档的 monorepo（多库开发）。这应该可以改善重要的耦合，并减少管理两个独立代码库的开销。
- 重新调整国际化努力。先前的翻译无法延续。我们的重量级 Markdown/MDX 方案提出了一个独特的挑战，我们正在与 Crowdin 合作解决。
- 持续改进 CI/CD 流程。我们在向贡献者提供自助反馈方面取得了巨大进步，但还有更多工作要做。
致谢
许多 Node 爱好者为实现重新设计做出了贡献。我们要感谢：
- 所有使这个项目成为可能的贡献者和合作者。
- Chromatic 提供视觉测试平台，辅助我们审查 UI 更改，并捕获视觉回归。
- Cloudflare 用于提供为 Node 网站、Node 的 CDN 等提供服务的基建。
- Crowdin 提供了一个平台，使我们能够国际化 Node 官网并与译者合作。
- H.B. 对 Node 重新设计的设计工作。
- Orama 提供了一个搜索平台，可以为我们的内容建立索引，并提供闪电般快速的结果。
- Sentry 为其错误报告、监控和诊断工具提供开源许可证。
- Vercel 提供为 Node 网站提供服务和支持的基建
- 最后，感谢 OpenJS 基金会的支持和指导。
Node 社区十分给力，我们对共同实现的目标感到兴奋。
本期话题是 —— 你觉得 Node 的新官网颜值如何、体验如何？欢迎在本文下方自由言论，文明共享。
坚持阅读，自律打卡，每天一次，进步一点。
《前端暴走团》，喜欢请抱走！我是团长林语冰。谢谢大家的点赞，掰掰~
原文链接：https://juejin.cn/post/7354004824305844234 作者：前端暴走团
