用 Astro 搭建个人静态网站,并部署为 Cloudflare Workers Static Assets

从 Astro 静态输出到 Cloudflare Workers Static Assets 的完整链路:项目结构、站点配置、404 处理,以及为什么初版不需要服务端渲染。

发布于 更新于

#Astro#Cloudflare#静态网站

个人网站初版最容易走偏的方向,是在一开始就引入数据库、登录和服务端渲染。多数个人内容站其实只需要一件事:把写好的页面可靠地变成静态文件,再由边缘网络发出去。Astro 的静态输出加 Cloudflare Workers Static Assets,正好覆盖这条链路。

先定输出方式,再写页面

Astro 默认就是静态输出:构建后得到一个 dist/ 目录,里面是 HTML、CSS、JS 和静态资源。只要不在项目里引入服务端适配器或按请求渲染的路由,构建结果就可以直接交给静态托管。

这一步值得先确认,因为它决定了后面所有选择:没有数据库,就不要设计需要写入的表单;没有服务端渲染,就不要在页面里依赖请求时才能拿到的数据。把边界写在前面,比上线后再拆功能要便宜得多。

关键配置只有三处

第一处是 Astro 的站点地址。在 astro.config.mjs 里设置 site,这样每个页面生成的 canonical、sitemap 和社交分享地址才有统一的基准,不会在本地地址和正式域名之间来回跳。

第二处是构建产物目录。默认的 dist/ 应该保持不变,让部署配置直接指向它,而不是再包一层自定义目录。

第三处是 Cloudflare Workers 的静态资源配置。在 wrangler.jsonc 里,assets.directory 指向 ./dist,not_found_handling 设为 404-page。后者很重要:它让不存在的路径返回你自己做的 404 页面,而不是托管方的默认空白页。初版必须真的有一个品牌化的 404 页面,否则这项配置只是摆设。

相关说明可以对照官方文档核对:Astro 的配置与部署说明见 Astro 文档,Workers 静态资源的配置见 Cloudflare Workers Static Assets 文档。

内容用集合管理,不要散落在页面里

文章不要直接写进页面模板。更稳的做法是建立一个文章集合,用 section 字段区分栏目,用 frontmatter 统一管理标题、摘要、发布日期、更新日期和草稿状态。列表页、详情页、sitemap 和 RSS 都从同一集合读取,改一处就处处一致,草稿也不会意外出现在生产列表里。

部署链路保持一条线

推荐的链路是:代码仓库、Cloudflare Workers Builds、Worker、正式域名。主分支触发自动部署时,要格外小心:直接推送主分支就等同于生产发布。因此初版开发应该在功能分支上完成,构建通过并由人确认后,才由明确授权的一步合并与发布。自动部署是便利,不是免责。

初版验收清单

在宣称初版完成之前,至少核对这几项:构建成功;六个导航全部可访问;首页不再是框架占位页;404 页面可用;robots 和 sitemap 可访问且不包含空状态页面;移动端导航可用键盘操作并能用 Escape 关闭。任何一项没过,都不应该先上线再修。

← 返回建站教程