案例研究 •

更快地发布内容
Firebase 如何使用 Astro 将博客发布时间从几小时缩短到几分钟

作者
Astro 团队

Firebase 是一个移动和 Web 应用程序开发平台。它允许用户轻松地构建原型并扩展其应用程序,而无需担心各个后端服务。Firebase 获得谷歌支持,受到数百万企业的信赖,能够抽象后端基础设施,让用户专注于日常业务的核心方面。

拥有一个易于访问的博客对 Firebase 来说很重要,这样用户就可以及时了解最新的新闻和公告。Astro 帮助 Firebase 重建了他们的博客,使性能提升了 71%,发布时间从数小时缩短到数分钟。

Firebase 博客的 Lighthouse 评分。

挑战

Firebase 由 10 名开发人员组成的团队以前在 Blogger 上托管他们的博客。使用这个 CMS,他们必须先在 Google Docs 中撰写博客文章,然后将草稿转换为 Blogger 文档。即使是一篇短小的博客文章,在发布前也可能轻易花费一小时的工作时间。

Blogger 中的编辑体验也存在问题

  1. 图像和其他交互式组件需要开发人员手动编写 HTML。
  2. Blogger 没有个人资料图片。你必须直接在博客文章中插入 HTML 和 CSS 来显示个人资料图片。
  3. 有时,即使你知道问题所在,也无法修复!例如,在 Blogger 中很难控制可访问性改进。这导致用户体验不佳。

需求

据 Firebase 博客团队的首席工程师 David East 称,Firebase 需要一个具有现代化开发体验的工具。他们希望维护一个性能更好的博客,并使由 10 名开发人员组成的协作团队能够更快、更顺畅地发布博客。

部分水合。

解决方案与实施

借助 Astro,新团队成员可以在 30 分钟内完成设置,这要归功于其文档。

文档非常出色。我认为非常有帮助的一点是,Astro 在约定方面做得非常好。因此,当你尝试将其用于其预期的工作时,你正在做什么会非常清楚。你永远不必担心你的基础会被抽走。你总能基于这些假设进行开发。

— David East,Firebase 博客团队首席工程师

Firebase 开发人员还能够使用 Astro 实现复杂且易于访问的动画——这是他们在使用 Blogger 时无法做到的,因为它模板功能有限。例如,团队希望在 Firebase 博客主页上创建切片动画。然而,这种切片动画在当今的网页上极难创建。相反,你必须将相同的内容块堆叠在一起,并在动画时移除特定部分,就像幕布一样。屏幕阅读器会尝试阅读和遍历隐藏内容,这会使用户感到困惑。由于 Astro 的灵活性,Firebase 能够以可访问的方式构建此动画。

分层黄色切片动画。

与 Astro 相关的迁移部分进展迅速。他们发现,只需将 Google Doc 内容通过插件转换为 Markdown,然后粘贴到 Astro 文档中,就能看到改进。项目的大部分时间实际上都花在了完善博客设计以及构建概念验证本身上。

成果

通过从 Blogger 切换到 Astro,发布一篇标准博客文章所需的时间从数小时缩短到数分钟。以前,使用 GitHub Actions 生成一个完整站点需要 6 分钟。现在,使用 GitHub Actions 的构建时间平均为 1.5 分钟,总构建时间减少了 75%。

Firebase 的后端功能。