Logo Ernie.SG
用 Astro 把网站迁到 Cloudflare Pages

用 Astro 把网站迁到 Cloudflare Pages

2025年2月10日
2 分钟阅读
Table of Contents

用 Astro 把网站迁到 Cloudflare Pages

想不想用 Markdown 写东西,享受版本控制和自动部署,顺手拿到飞快的页面、友好的 SEO 和省事的搭建流程,再给个人网站接上自己的域名、SSL 和无限带宽——而且统统免费?那就继续往下看!

为什么是 Astro?

Astro 成了我首选框架,原因有几个,而且都挺有说服力:

页面飞快,SEO 友好

  • 默认零 JavaScript,所以页面加载快得离谱
  • 开箱就是 99/100 的 Lighthouse 分数
  • 自动生成 meta 标签和结构化数据

内容驱动

  • Markdown/MDX 是一等公民,所以你想怎么重新渲染内容都很容易
  • 原生支持用于数学排版的 LaTeX
  • 支持 100 多种语言的丰富语法高亮

灵活的开发体验

  • 不挑框架:需要哪里再用 React、Vue、Svelte 或 HTMX
  • 静态输出意味着到哪里都能托管,不受单一供应商掣肘

Cloudflare Pages 的好处

无限带宽

我迁过去的主要原因之一,是 Cloudflare Pages 的免费档给得很大方:带宽不限。也就是说,万一哪天我突然红了,也不会莫名收到一张巨额账单!

自动化 CI/CD

开发流程也很顺:

  • 从 Git 自动部署
  • 为 pull request 提供预览部署
  • 回滚很省事

自定义域名,还有更多

  • 带边缘缓存的全球 CDN
  • 自动优化静态资源
  • 自定义域名设置很简单(当然这个钱你得自己付)
  • 内置 SSL 证书
  • 内置分析
  • 文档写得不错

迁移过程

为此,我做了这些:

  1. 克隆 astro-erudite 模板

  2. 自定义后推到 GitHub

  3. 设置 Cloudflare Pages 并部署:

    • 进入 Cloudflare 控制台 > Compute (Workers)
    • 连接 GitHub 存储库
    • 选择 main 分支用于部署
    • 选择 Astro 作为框架
  4. 连接自定义域名,然后从这里开始把剩下的都交给 Cloudflare

整个过程已经不能更简单了。我有免费的版本控制,而且每次推送到 main,网站都会自动重新部署。

结语

Astro 这套性能优先的路线,加上 Cloudflare 扎实的基础设施,给想快速在互联网上安个家的开发者一个很稳的起点。最好的部分?这一切都免费,所以非常适合个人项目和博客。