使用 Astro、Bun 和 Cloudflare 重构个人网站

在使用了多年基于 Docusaurus 和 React 的较重架构之后，是时候做出改变了。2026年7月23日，Ammar Najjar 分享了他使用更轻量、更快且更易维护的技术栈重构个人网站的经验。随着越来越多的开发者寻求高效创建和管理网站的方法，这一话题在当今尤为适用。

为什么选择 Astro？

本次重构选择 Astro 是因为它默认输出零 JavaScript。这意味着可以减少客户端需要处理的工作量，从而加快网站加载速度。通过使用 Astro，网站获得了出色的 Core Web Vitals 评分，这是衡量网站在加载速度和用户体验方面性能的指标。

迁移到 Bun

开发环境切换到了 Bun，这是一个现代 JavaScript 运行时。这一变化使开发过程更加敏捷高效。Bun 替代了传统的 Node.js 环境，提供了更快的启动时间和整体提升的性能。

优化 JavaScript 使用

本次重构的主要成果之一是，网站大多数页面传输的 JavaScript 少于 10 KB。这种优化有助于加快加载速度，对于保持访客参与度和提升搜索引擎排名至关重要。

智能图像优化

为了提升视觉性能，项目实现了智能图像优化技术。这包括自动尺寸注入（即自动调整图像大小以适应不同的屏幕尺寸）以及响应式处理，确保图像在任何设备上都展现良好。

支持多语言

国际化 (i18n) 也是本次重构的一个重点。通过设置内容集合，网站可以支持多种语言，从而面向更广泛的受众。

部署流水线

在部署方面，使用了 GitHub Actions 配合 Cloudflare Pages。这种组合实现了简化的更新流程，并确保网站能够高效可靠地部署。Cloudflare Pages 还利用了全球内容分发网络 (CDN)，有助于将内容快速分发给世界各地的用户。

附加功能

本次重构还包括多个提升用户体验的附加功能：

• 暗黑模式： 该功能的集成不会引起布局偏移，这对于保持流畅的用户体验非常重要。
• Shiki 语法高亮： 此功能使用 CSS 变量来提供现代且易用的代码展示。

结论

使用 Astro、Bun 和 Cloudflare 迁移到更轻量的技术栈，打造出了一个易于开发和维护的高性能个人网站。这种方法凸显了现代 Web 开发工具带来的诸多优势。

优点

• 得益于极少的 JavaScript，加载速度极快。
• 通过智能图像优化提升了用户体验。
• 通过国际化支持多种语言。
• 结合 GitHub Actions 和 Cloudflare 实现高效的部署流程。

缺点

• 需要学习新的工具和框架。
• 与现有插件或库之间可能存在潜在的兼容性问题。
• 高级功能可能需要额外的配置。

注意事项

本文仅供教育目的，在实施类似解决方案时，必须将所有占位符值替换为实际数据。读者在依赖这些观点前应核对原始来源。

常见问题解答

• 什么是 Astro？ — Astro 是一个静态网站生成器，默认输出零 JavaScript，从而提升网站性能。
• 什么是 Bun？ — Bun 是一个现代 JavaScript 运行时，相比 Node.js 提供了更快的启动速度。
• 什么是 Core Web Vitals？ — Core Web Vitals 是评估网站加载性能和用户体验的指标。
• 图像优化是如何工作的？ — 图像优化技术会自动调整图像大小，并确保它们在各种设备上正确显示。
• 什么是国际化 (i18n)？ — 国际化是指设计网站以支持多种语言和地区的过程。
• 什么是 GitHub Actions？ — GitHub Actions 是一个自动软件工作流程（包括部署过程）的工具。
• 什么是 Cloudflare Pages？ — Cloudflare Pages 是一个利用全球 CDN 快速高效部署静态网站的平台。
• 为什么暗黑模式很重要？ — 暗黑模式通过减少眼部疲劳并提供优于浅色主题的视觉体验来提升用户体验。

标签

#webdev #performance #javascript #astro #bun #cloudflare #static-site #web-development #internationalization #image-optimization