深入探讨 Node.js 网站重新设计
Node.js 刚刚推出了一个新的 Next.js 网站并分享了幕后细节。他们考虑过 Nextra，但最终选择了自定义 Next.js 设置。该网站是静态构建的，使用 ISR 来生成动态内容。
现在您已经注意到nodejs.org 的全新外观了！
我们在设计时非常谨慎，既向过去致敬，又展望未来。该网站有许多聚合用例、数千个页面，并且是许多人的日常资源。整个故事有一些死胡同和弯路。但最终这是集体努力的结果。凭借超过三打贡献者的贡献以及与精选合作伙伴的出色团队合作，该项目得以实现。该网站改进了信息架构，以前所未有的方式将内容带到用户的指尖，并在未来几年建立了稳定的开发平台。我们还迭代了改进的开发人员体验、更清晰的 CI/CD 反馈以及平易近人的技术堆栈。
请继续阅读，更深入地了解这段旅程并洞察即将发生的事情。
规模和限制[1]
nodejs.org 网站已经存在超过 14 年了。类似于实用下载和文档主页的设计首次出现于 2011 年底。这是 Node.js _0.6_天的背景。
从那时起，该网站的规模随着项目的需要而缓慢增长。它包含 1600 多页。在鼎盛时期，它拥有近 20 种本地化语言。该域每月处理_30 亿个请求，传输的数据量为_ _2 PB_。毫不夸张地说，该网站是 Node.js 社区的重要资源。确保更改不会对用户和贡献者造成不必要的干扰绝对是至关重要的。
错误的开始：nodejs.dev[2]
该项目首次尝试重新设计于 2019 年开始。工作从新域和新存储库nodejs.dev[3]开始。回想起来，这可能从一开始就无意中注定了该项目的失败。该团队面临着孤立开发的挑战。简而言之，这个代码库不是社区或贡献者所在的地方。不存在已建立的贡献者工作流程。已经很忙的人们自愿贡献出自己的时间，不想学习第二套工具。这是一个太沉重的负担。该项目无法维持维持势头所需的领导力。此外，新技术堆栈的单一切换会很复杂，并对网站的现有存在构成风险。
然而，nodejs.dev 带来了很多经验教训和更新的内容。我们创建了一系列综合学习资源[4]，并将其运用到当前的设计中。所有这一切正在形成一个愿景：渐进式进化、就地开发以及尽可能少的干扰。
在飞行中重新组装飞机[5]
2022 年，Claudio Wunder 加入了该项目。他弥合了两项开发工作之间的差距。他引导网络团队走向一个新的方向：回到现有的存储库。考虑如何重建站点，_同时_仍作为生产级资源运行。
代码库开始在多个维度上显示出它的年龄。设计已经过时了。对于大多数参与该项目的 Web 开发人员来说，Metalsmith 和 Handlebars 模板已经不再受欢迎。该网站的内部结构很难扩展，而且文档也很少。尝试混合代码和内容是一个挑战。
团队仔细考虑了技术堆栈。正在进行的重新设计的第一阶段涉及nextra[6]，一个优秀的 Next.js 静态站点生成器。这是一个很好的入门方式，但随着网站的发展，我们需要自定义设置。我们发现自己越来越“突破”nextra 的惯例，依赖于 nextra 抽象的底层 Next.js 模式和强大工具。
Next.js[7]是一个自然的发展过程，以其灵活性和强大功能而著称。例如，该网站仍然是为了最终用户速度和基础托管独立性而静态构建的，但利用 Next.js 的增量静态重新生成来获取动态内容（例如版本）。 React 提供的创作体验不仅更符合贡献者当前的技能，而且还与我们可以使用的更大的工具生态系统更加一致。
在此过程中，我们与Vercel[8]建立了密切的合作伙伴关系。当网站的规模在静态导出期间使 webpack 的内存管理紧张时，他们提供了直接支持。这是一种共生关系。我们的需求推动他们的平台得到改进，他们的平台使我们能够构建更好的网站。我们在公开发布之前对新版本进行了 Beta 测试，这是该框架的真实压力测试。
2023 年 4 月，我们进行了一次小型切换。这是一个有点讽刺的说法。拉取请求[9]有 1600 个文件，将 GitHub UI 推向了渲染能力的极限。网站的基础设施会发生变化，但外观、内容和创作体验将保持不变。这是一个重要的里程碑——证明我们可以在飞行中重建飞机。
重新设计[10]
OpenJS 基金会[11]非常友善地资助我们与设计师Hayden Bleasel[12]一起进行重新设计。 Hayden 为该网站带来了现代设计，并帮助我们思考遇到的多方面用例。结果是我们可以用它来指导我们的开发的Figma[13]文档。其中包括用户体验流程、暗/亮模式、页面布局、移动视口注意事项和组件细分。
接下来是将设计实现为代码，这是一项分布在世界各地的努力。重点放在基础设计元素和结构化组件层次结构的顺序构建上。我们从第一天起就构建了组件的变体，并从一开始就考虑了国际化。这减少了返工，并使新手可以轻松完成任何任务。我们开始通过Storybook[14]和Chromatic[15]的托管实例单独构建组件。 Storybook 是原型、迭代和测试组件的好地方。我们选择使用Tailwind CSS[16]，但重点是设计令牌和应用 CSS。这种共同语言帮助新手了解我们的方法并翻译 Figma。
Orama[17]搜索将网站的所有内容放在用户的指尖。它们对我们的静态内容进行索引，并以闪电般的速度提供 API 内容、学习材料、博客文章等结果。那里的团队直接贡献了这种集成，并继续帮助我们提供卓越的体验。很难想象_没有_这个功能。
Node.js 在我们社区中的影响力对我们来说很重要。因此，旧网站已国际化为近 20 种语言。然而，一系列不幸的事件导致我们重置了所有翻译。这是一个艰难的决定，但考虑到当时的情况，这是正确的决定。我们正在与Crowdin[18]合作，重新建立我们的努力。这将包括仔细解析基于 MDX 的新内容。我们期待着未来几个月的持续内部化。
当我们在新的基础设施上构建并开始预览该网站并重新设计时，更深入地了解最终用户的行为是非常宝贵的。我们利用Sentry[19]提供错误报告、监控和诊断工具。这对于识别问题和为我们的用户提供更好的体验有很大帮助。在重新设计工作之前，Sentry 也很有用，可以通过重播用户会话来识别旧站点中的问题。
在所有这些集成和开发步骤中，我们一直关注最终用户的可访问性和性能。 Vercel 和Cloudflare[20]支持可确保网站快速可靠。我们还通过 GitHub Actions 投资了 CI/CD 管道，为贡献者提供实时反馈。这包括使用 Chromatic、Lighthouse 结果进行视觉回归测试，以及一套检查和测试，以确保网站质量保持较高水平。
格蕾丝·霍珀和黑客啤酒节[21]
在整个网站重新设计过程中，我们积极努力打造包容和热情的体验。重新设计工作与 2023 年 9 月的Grace Hopper 庆典开源日[22]以及下个月的Hacktoberfest[23]非常吻合。这两个活动都向整个生态系统的项目展示了新的贡献者。我们通过将“良好的第一个问题”作为离散的开发任务来为这些事件做好准备。就 Grace Hopper 而言，我们还提供了现场指导，以便与会者能够以落地公关结束这一天。我们很自豪地说，我们有许多首次为该项目做出贡献。
仅在 Grace Hopper 期间，就有 28 位作者提出了 40 个 PR。 Hacktoberfest 新增 26 个 PR。
文档，文档，文档[24]
开源项目的好坏取决于它的文档。允许新贡献者异步建立上下文至关重要。为此，我们不将 DX（开发人员体验）限制于工具。重新设计为我们提供了一个很好的机会来发现和改进文档中的差距。在此过程中，我们迭代或引入了：
-
合作者指南[25] -
内容_VS_代码[26] -
贡献[27] -
DEPENDENCY_PINNING[28] -
治理[29] -
自述文件[30] -
翻译[31]
新代码非常注重内联代码和配置注释、关注点分离以及明确定义的常量。整个过程中使用 TypeScript 可以帮助贡献者理解数据的形状和函数的预期行为。
未来的计划[32]
重新设计为 Node.js 网站的新时代奠定了基础。我们拥有坚实的基础，可以持续多年。如果过去有任何指示的话，我们将在这个空间内迭代很长一段时间。
但工作还没有完成。出色地：
-
将网站重新设计扩展到 API 文档。他们位于单独的代码库中，但计划将此处开发的样式移植到 API。这又是一项细致的工作，不能影响日常使用或贡献。 -
探索网站和 API 文档的 monorepo。这应该可以改善重要的耦合，并减少管理两个独立代码库的开销。 -
重新调整国际化努力。先前的翻译无法延续。我们的大量降价/MDX 方法提出了一个独特的挑战，我们正在与 Crowdin 合作解决。 -
持续改进 CI/CD 流程。我们在向贡献者提供自助反馈方面取得了巨大进步，但还有更多工作要做。
谢谢[33]
许多人和组织为实现重新设计做出了大大小小的贡献。我们要感谢：
-
首先也是最重要的是所有使这个项目成为可能的贡献者和合作者。[34] -
Chromatic[35]提供视觉测试平台，帮助我们审查 UI 更改并捕获视觉回归。 -
Cloudflare[36]用于提供为 Node.js 网站、Node.js 的 CDN 等提供服务的基础设施。 -
Crowdin[37]提供了一个平台，使我们能够本地化 Node.js 网站并与译者合作。 -
Hayden Bleasel[38]对 Node.js 重新设计的设计工作。 -
Orama[39]提供了一个搜索平台，可以为我们的内容建立索引并提供闪电般快速的结果。 -
Sentry[40]为其错误报告、监控和诊断工具提供开源许可证。 -
Vercel[41]提供为 Node.js 网站提供服务和支持的基础设施 -
最后，感谢OpenJS 基金会的[42]支持和指导。
社区很强大，我们对共同实现的目标感到兴奋。
原文链接[43]
参考资料
https://nodejs.org/en/blog/announcements/diving-into-the-nodejs-website-redesign#scale-and-constraints: https://nodejs.org/en/blog/announcements/diving-into-the-nodejs-website-redesign#scale-and-constraints
[2]https://nodejs.org/en/blog/announcements/diving-into-the-nodejs-website-redesign#a-false-start-nodejsdev: https://nodejs.org/en/blog/announcements/diving-into-the-nodejs-website-redesign#a-false-start-nodejsdev
[3]https://github.com/nodejs/nodejs.dev: https://github.com/nodejs/nodejs.dev
[4]https://nodejs.org/en/learn/getting-started/introduction-to-nodejs: https://nodejs.org/en/learn/getting-started/introduction-to-nodejs
[5]https://nodejs.org/en/blog/announcements/diving-into-the-nodejs-website-redesign#reassembling-the-airplane-in-flight: https://nodejs.org/en/blog/announcements/diving-into-the-nodejs-website-redesign#reassembling-the-airplane-in-flight
[6]https://nextra.site/: https://nextra.site/
[7]https://nextjs.org/: https://nextjs.org/
[8]https://vercel.com/: https://vercel.com/
[9]https://github.com/nodejs/nodejs.org/pull/4991: https://github.com/nodejs/nodejs.org/pull/4991
[10]https://nodejs.org/en/blog/announcements/diving-into-the-nodejs-website-redesign#redesign: https://nodejs.org/en/blog/announcements/diving-into-the-nodejs-website-redesign#redesign
[11]https://openjsf.org/: https://openjsf.org/
[12]https://haydenbleasel.com/: https://haydenbleasel.com/
[13]https://www.figma.com/: https://www.figma.com/
[14]https://storybook.js.org/: https://storybook.js.org/
[15]https://www.chromatic.com/: https://www.chromatic.com/
[16]https://tailwindcss.com/: https://tailwindcss.com/
[17]https://docs.oramasearch.com/: https://docs.oramasearch.com/
[18]https://crowdin.com/: https://crowdin.com/
[19]https://sentry.io/welcome/: https://sentry.io/welcome/
[20]https://cloudflare.com/: https://cloudflare.com/
[21]https://nodejs.org/en/blog/announcements/diving-into-the-nodejs-website-redesign#grace-hopper-and-hacktoberfest: https://nodejs.org/en/blog/announcements/diving-into-the-nodejs-website-redesign#grace-hopper-and-hacktoberfest
[22]https://ghc.anitab.org/awards-programs/open-source-day/: https://ghc.anitab.org/awards-programs/open-source-day/
[23]https://hacktoberfest.com/: https://hacktoberfest.com/
[24]https://nodejs.org/en/blog/announcements/diving-into-the-nodejs-website-redesign#documentation-documentation-documentation: https://nodejs.org/en/blog/announcements/diving-into-the-nodejs-website-redesign#documentation-documentation-documentation
[25]https://github.com/nodejs/nodejs.org/blob/main/COLLABORATOR_GUIDE.md: https://github.com/nodejs/nodejs.org/blob/main/COLLABORATOR_GUIDE.md
[26]https://github.com/nodejs/nodejs.org/blob/main/CONTENT_VS_CODE.md: https://github.com/nodejs/nodejs.org/blob/main/CONTENT_VS_CODE.md
[27]https://github.com/nodejs/nodejs.org/blob/main/CONTRIBUTING.md: https://github.com/nodejs/nodejs.org/blob/main/CONTRIBUTING.md
[28]https://github.com/nodejs/nodejs.org/blob/main/DEPENDENCY_PINNING.md: https://github.com/nodejs/nodejs.org/blob/main/DEPENDENCY_PINNING.md
[29]https://github.com/nodejs/nodejs.org/blob/main/GOVERNANCE.md: https://github.com/nodejs/nodejs.org/blob/main/GOVERNANCE.md
[30]https://github.com/nodejs/nodejs.org/blob/main/README.md: https://github.com/nodejs/nodejs.org/blob/main/README.md
[31]https://github.com/nodejs/nodejs.org/blob/main/TRANSLATION.md: https://github.com/nodejs/nodejs.org/blob/main/TRANSLATION.md
[32]https://nodejs.org/en/blog/announcements/diving-into-the-nodejs-website-redesign#future-plans: https://nodejs.org/en/blog/announcements/diving-into-the-nodejs-website-redesign#future-plans
[33]https://nodejs.org/en/blog/announcements/diving-into-the-nodejs-website-redesign#thanks: https://nodejs.org/en/blog/announcements/diving-into-the-nodejs-website-redesign#thanks
[34]https://github.com/nodejs/nodejs.org/graphs/contributors: https://github.com/nodejs/nodejs.org/graphs/contributors
[35]https://www.chromatic.com/: https://www.chromatic.com/
[36]https://cloudflare.com/: https://cloudflare.com/
[37]https://crowdin.com/: https://crowdin.com/
[38]https://haydenbleasel.com/: https://haydenbleasel.com/
[39]https://docs.oramasearch.com/: https://docs.oramasearch.com/
[40]https://sentry.io/welcome/: https://sentry.io/welcome/
[41]https://www.vercel.com/: https://www.vercel.com/
[42]https://openjsf.org/: https://openjsf.org/
[43]https://nodejs.org/en/blog/announcements/diving-into-the-nodejs-website-redesign: https://nodejs.org/en/blog/announcements/diving-into-the-nodejs-website-redesign
原文始发于微信公众号（所谓前端）：深入探讨 Node.js 网站重新设计
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/268837.html
