Cloudflare 博客迁移至 EmDash CMS 并完成前端改版
The Cloudflare Blog – Brought to you by EmDash
You likely noticed the recent redesign of the Cloudflare Blog. We added dark mode, modernized the look and feel, and made a lot of other small improvements along the way.
你可能已经注意到Cloudflare博客最近的重新设计。我们增加了深色模式,现代化了外观和感觉,并在此过程中做了许多其他小改进。
What you might not have noticed – well, except for those who are more terminally online – is that the redesign was part of a much bigger migration project. On Wednesday, August 12, we moved the blog to EmDash, a content management system (CMS) built especially to work on Astro and with Cloudflare.
你可能没有注意到——好吧,除了那些更常上网的人——这次重新设计是一个更大迁移项目的一部分。8月12日(星期三),我们将博客迁移到了EmDash,这是一个专为在Astro上运行并与Cloudflare配合而构建的内容管理系统(CMS)。
We’ll take you into the migration story – what we learned and how EmDash got better – as well as into the benefits we’re already seeing from a new platform.
我们将带你了解迁移的故事——我们学到了什么,EmDash如何变得更好——以及我们已经从新平台中看到的好处。
We are Customer Zero
我们是零号客户
At Cloudflare, Cloudflare itself is Customer Zero. This means that we use our products. And – in use – we make them better for ourselves and our customers.
在Cloudflare,Cloudflare本身就是零号客户。这意味着我们使用自己的产品。而且——在使用中——我们为自己和客户改进它们。
This is a very real cultural value at Cloudflare. The burden of proof is on you if you want to use an external vendor. Why can’t that team support you, what gaps are there, why can’t those gaps be filled, and are those “gaps” true requirements?
这是Cloudflare非常真实的文化价值观。如果你想使用外部供应商,举证责任在你身上。为什么那个团队不能支持你,存在哪些差距,为什么这些差距不能被填补,以及那些“差距”是否真的是需求?
This preference is even enshrined in our internal engineering standards, known as our Codex.
这种偏好甚至被写入了我们的内部工程标准,即我们的Codex。
We don’t just build products for others; we build them to run Cloudflare itself. We are our own first, most demanding customer.
我们不仅仅为他人构建产品;我们构建它们是为了运行Cloudflare本身。我们是自己第一个、也是最挑剔的客户。
We validate scale, security, and usability on our own massive infrastructure before a paying customer ever touches the product. If a product breaks, it breaks us first. This forces us to fix issues immediately, ensuring that by the time a feature reaches the enterprise, it has already survived the harshest production environment on earth.
我们在自己的大规模基础设施上验证规模、安全性和可用性,然后付费客户才会接触产品。如果产品出问题,首先受影响的是我们。这迫使我们立即修复问题,确保当功能到达企业客户时,它已经经历了地球上最严苛的生产环境。
With the launch of EmDash and some limitations with our current CMS vendor, we knew that we’d likely be the Customer Zero for EmDash internally at Cloudflare.
随着EmDash的推出以及我们当前CMS供应商的一些限制,我们知道我们很可能成为Cloudflare内部EmDash的零号客户。
Customer Zero in Action
零号客户在行动
When we began our initial migration conversations, we started with two main questions:
当我们开始初步的迁移对话时,我们从两个主要问题开始:
- Does EmDash work for us?
- Can EmDash scale?
- EmDash适合我们吗?
- EmDash能扩展吗?
Does the platform work?
平台能工作吗?
Our first question was the most broad, does EmDash work for us? This is something you’d want to know broadly about any new platform, but especially one that’s pre-1.0.
我们的第一个问题是最广泛的,EmDash适合我们吗?这是你对任何新平台都想知道的事情,尤其是对于1.0版本之前的平台。
To answer this question, we ran through a bunch of common user flows, such as:
为了回答这个问题,我们运行了一系列常见的用户流程,例如:
- Publishing and then unpublishing a post
- Authoring a new post
- Scheduling a post
- Adding media items
- 发布然后取消发布文章
- 撰写新文章
- 安排文章发布时间
- 添加媒体项目
By and large, EmDash held up pretty well to these usability tests. The gaps we found were generally related to:
总的来说,EmDash在这些可用性测试中表现相当不错。我们发现的差距通常与以下方面有关:
- The sheer scale of the Cloudflare Blog (media, content entity search, and bylines)
- Nuances around localization, SEO, and Content Security Policies (CSPs)
- Usability features for the admin editor – especially ones that might delay the publishing of a post – such as easier findability for custom HTML blocks, bugs in the in-entity content editor, and keeping the formatting toolbar in view for longer posts.
- Cloudflare博客的庞大规模(媒体、内容实体搜索和署名)
- 关于本地化、SEO 和内容安全策略(CSP)的细微差别
- 管理编辑器中的可用性功能——尤其是那些可能延迟文章发布的功能——例如更易查找自定义 HTML 块、实体内容编辑器中的错误,以及保持格式工具栏在长篇文章中可见。
The biggest oversight we found was around scheduled posts, which didn’t work until EmDash version 0.19.0. This gap was understandable given the early version of EmDash, but it was also definitely something we didn’t want to be finding out after the scheduled time for a post.
我们发现的最大疏忽是关于定时发布的文章,直到 EmDash 版本 0.19.0 才正常工作。考虑到 EmDash 的早期版本,这个差距是可以理解的,但这也绝对是我们不想在文章预定时间之后才发现的问题。
Can EmDash scale?
EmDash 能扩展吗?
Our biggest concerns were whether our proposed EmDash setup could handle the traffic we saw on the Cloudflare Blog.
我们最大的担忧是,我们提议的 EmDash 设置能否处理我们在 Cloudflare 博客上看到的流量。
The traffic pattern to our blog is incredibly varied. Normal load sits in the neighborhood of 75 requests per second (RPS), but also spikes up to over 5,000 RPS. Some of these spikes line up with the publishing times of new posts, meaning those posts went viral and attracted a lot of attention. Others happen during all points of the day and night, which likely means folks are sending some extra traffic our way, just to see what happens.
我们博客的流量模式非常多样化。正常负载大约在每秒 75 个请求(RPS)左右,但也会飙升至超过 5,000 RPS。其中一些峰值与新文章的发布时间相吻合,意味着这些文章迅速走红并吸引了大量关注。其他峰值则发生在白天和夜晚的任何时间,这可能意味着有人正在向我们发送额外流量,只是为了看看会发生什么。
Performance also matters for our systems (and our readers). Cloudflare is a web performance company, after all, so the speed at which a page loads becomes incredibly important.
性能对我们的系统(和读者)也很重要。毕竟,Cloudflare 是一家网络性能公司,因此页面加载速度变得极其重要。
With those two concerns in mind, we built out some scenarios using k6, an open-source performance testing tool:
考虑到这两个担忧,我们使用 k6(一个开源性能测试工具)构建了一些场景:
- Ramp: Where we gradually increase requests up to triple the prod baseline and then cool down.
- Breakpoint: Where we ramp from 0 to 100 RPS over 10 minutes, stopping when something breaks.
- Burst: Where we throw an immediate traffic load of 7,000 RPS and see what happens.
- 爬坡:我们逐渐增加请求,直到生产环境基线的三倍,然后冷却。
- 断点:我们在 10 分钟内从 0 增加到 100 RPS,当出现问题时停止。
- 突发:我们立即施加 7,000 RPS 的流量负载,看看会发生什么。
For each of those scenarios, we evaluated:
对于每个场景,我们评估了:
- Availability: Failure when more than 0.01% of HTTP requests lead to 5xx errors, meaning the application couldn’t handle the traffic.
- Latency:
- P95 latency: Failure when more than 5% of responses exceed 500ms.
- P99 latency: Failure when more than 1% of responses exceed 1000ms.
- 可用性:当超过 0.01% 的 HTTP 请求导致 5xx 错误时,视为失败,意味着应用程序无法处理流量。
- 延迟:
- P95 延迟:当超过 5% 的响应超过 500 毫秒时,视为失败。
- P99 延迟:当超过 1% 的响应超过 1000 毫秒时,视为失败。
Armed with these tests – and a lot of internal discussion and data points – we came to our production architecture:
有了这些测试——以及大量的内部讨论和数据点——我们得出了我们的生产架构:
- EmDash, running on a Cloudflare Worker
- Running behind the new Workers Cache (we believe as the first major site to do so)
- Using the new EmDash object cache built on Workers KV, which the EmDash team built specifically for our use case.
- Using Cloudflare’s new, first-party Hyperdrive integration with PlanetScale.
- EmDash,运行在 Cloudflare Worker 上
- 运行在新的 Workers Cache 后面(我们相信是第一个这样做的主要网站)
- 使用基于 Workers KV 的新 EmDash 对象缓存,这是 EmDash 团队专门为我们的用例构建的。
- 使用 Cloudflare 新的、第一方 Hyperdrive 与 PlanetScale 的集成。
The multiple layers of caching we put in place play a key role in making the blog both fast and resilient. In the diagram below, they are ordered from top to bottom by proximity to the user:
我们设置的多层缓存机制在提升博客速度和韧性方面发挥了关键作用。在下图中,它们按离用户的远近从上到下排列:
With this setup, we’re typically serving 99.5% of static files from a cache and 70% of requests from a cache, improving frontend performance and decreasing load on the database.
通过这种设置,我们通常能从缓存中提供99.5%的静态文件,并从缓存中处理70%的请求,从而提升前端性能并减轻数据库负载。
Once we had that architecture in place, we could start thinking about the frontend redesign as well.
一旦架构就绪,我们就能开始考虑前端重新设计了。
Frontend redesign
前端重新设计
Beyond updating the backend architecture, the migration offered us the perfect opportunity to bring the blog's interface into alignment with Cloudflare’s updated visual language. We rebuilt the frontend experience using patterns established by the Kumo design system, creating visual and structural consistency between the Cloudflare homepage, dashboard, and marketing sites. The result is a cohesive reading experience that feels like a natural extension of the broader Cloudflare ecosystem.
除了更新后端架构,迁移还为我们提供了绝佳机会,使博客界面与Cloudflare最新的视觉语言保持一致。我们利用Kumo设计系统确立的模式重建了前端体验,在Cloudflare主页、仪表盘和营销网站之间创造了视觉和结构上的一致性。结果形成了连贯的阅读体验,感觉像是更广泛的Cloudflare生态系统的自然延伸。
A major priority for this redesign, and a long-overdue request from our readers, was native support for light and dark modes. We implemented theme switching tied directly to system preferences, alongside an explicit toggle, and ensured that accessibility guidelines were strictly met across both themes. Regardless of preference, the updated palette and code syntax highlighting adapt seamlessly without sacrificing legibility.
这次重新设计的一个主要优先事项,也是读者们期待已久的请求,就是原生支持浅色和深色模式。我们实现了与系统偏好直接关联的主题切换,同时提供了显式切换开关,并确保两种主题都严格符合无障碍指南。无论偏好如何,更新后的配色方案和代码语法高亮都能无缝适应,而不牺牲可读性。
We also took the opportunity to solve a few long-standing user experience quirks, starting with our email subscription form. Previously, the subscription box lived in the top right corner of the page. Because of its placement, readers frequently mistook it for a search bar and typed their search queries directly into the input field.
我们还借此机会解决了一些长期存在的用户体验问题,首先从电子邮件订阅表单开始。以前,订阅框位于页面右上角。由于位置原因,读者经常误以为它是搜索栏,直接将搜索查询输入到该字段中。
To fix this, we moved the email sign-up into a dedicated call-to-action block at the bottom of posts.
为了解决这个问题,我们将电子邮件注册移到了文章底部的专用行动号召区块中。
Now, once a reader finishes an article and wants to stay updated, the prompt to subscribe appears naturally at the end of a post.
现在,当读者读完一篇文章并希望保持更新时,订阅提示会在文章结尾自然出现。
Finally, we introduced two dedicated sidebar features on interior post pages to improve navigation and community engagement. On the right, an "On this page" table of contents tracks your progress and lets you jump directly to specific sections of longer technical posts. On the left, a new "Discuss Online" section makes it effortless to share articles and engage in conversations across social platforms and developer communities.
最后,我们在内页文章页面上引入了两个专用侧边栏功能,以改善导航和社区参与。右侧的“本页内容”目录会跟踪你的阅读进度,并允许你直接跳转到较长技术文章的特定部分。左侧新增的“在线讨论”板块使分享文章和在社交平台及开发者社区中参与对话变得轻而易举。
Rollout strategy
推出策略
As we got nearer to our migration, we started focusing on the broader question of “how do we make this change safely?” Ensuring zero downtime for our readers was a non-negotiable requirement, alongside guaranteeing a seamless fallback mechanism if something went wrong at the last minute.
随着迁移日期的临近,我们开始聚焦于更广泛的问题:“如何安全地实施这一变更?”确保读者零停机时间是不可妥协的要求,同时还要保证在最后一刻出现问题时能有无缝的回退机制。
更进一步:量化金融体系
看懂新闻只是起点——沿量化金融路径,把它变成能交付的工程能力