跳到主要内容
OSSpark

搜索文章

2611 字
13 分钟

用 Astro 和 Cloudflare Workers 快速搭建个人博客

目录

用 Astro 在本机把博客预渲染成静态文件,再用 Wrangler 发到 Cloudflare Workers,可以先得到一个能打开的线上地址,不必先租云服务器。自己的域名可以后加,接到同一份站点上。

「快」指的是先用平台分配的 workers.dev 把博客亮起来。国内买 .com 要实名,改 DNS 要等生效,订阅源里的绝对地址还写在构建结果里,这些不要和第一段托管混成同一步。

下面按 Astro 静态站来写。构建和发布用常见的 Node.js 包管理器与 Wrangler;同样的分段也适用于其他会产出静态目录的站点。

先分清三层#

域名相关的工作常被收成「买个域名、解析一下」。实际至少有三层:

  • 注册商保管域名所有权,决定这个名字登记在谁名下。
  • 解析商回答「这个名字指向哪里」,也就是谁有权设置 NS、A、CNAME。
  • 托管商真正提供网页文件。

一种常见拆法是:在阿里云买 .com,把 DNS 服务器改成 Cloudflare 提供的两个 NS,页面交给 Cloudflare Workers 免费档托管。不必在 Cloudflare 买域名,也不必为了这一步去买云服务器、CDN 或 SSL 证书。

图 001 注册商、解析商和托管商分成三层

图 001 三层可以不在同一家。workers.dev 只经过托管商。图为示意,不是控制台截图。

workers.dev 属于托管商送的默认主机名,不经过你自己的注册商。自己的 .com 是后来加到同一个 Worker 上的另一块门牌。所以「先上线」指的是托管通了,不是域名手续已经结束。

本机构建,再交给 Worker#

静态文件从哪来#

Cloudflare 不会替你跑 Astro。Markdown 变成 HTML、RSS、sitemap,以及站点若启用了搜索索引,都发生在本机构建。开发服务器可以预览草稿;搜索和正式的绝对链接,要看生产构建后的结果。

按项目文档安装 Node.js 和包管理器。构建完成后,输出目录里已经是可以直接提供的静态文件。接下来的发布,只是把这份目录送上边缘节点。

Worker 和 Wrangler 是什么#

Cloudflare 是一张全球边缘网络。Worker 是这张网上一个有名字的服务。Wrangler 是本机命令行工具,用来登录账号并把文件推上去。

传统 Worker 是一段在边缘执行的 JavaScript。静态博客通常更简单:不必手写请求处理脚本,只让 Worker 托管构建产物。访客访问时,没有一台长期开着的博客虚拟机;就近的节点按 URL 路径返回静态文件。

配置和发布命令#

对应配置可以写成:

{
"name": "my-blog",
"compatibility_date": "2024-12-01",
"assets": {
"directory": "./dist",
"not_found_handling": "404-page"
}
}

name 是 Cloudflare 账号里的服务名,也是免费链接的第一段,换成你自己的名字即可。assets.directory 指定上传目录,按你的构建输出修改。not_found_handling 为 404-page 时,未知路径返回站点自己的 404 页面,而不是平台默认报错页。compatibility_date 锁定运行时功能集,避免平台升级后行为悄悄变化,日期按你创建项目时选取。

没有 main 入口脚本。这是静态资产托管,不是手写 fetch 处理器。Cloudflare 对 Astro 静态站接到 Workers 的说明见官方框架指南。

发布用的命令不必写进项目依赖,可以临时拉取最新 CLI:

Terminal window
pnpm build
pnpm dlx wrangler@latest login
pnpm dlx wrangler@latest deploy

若项目用 npm 或 yarn,把构建命令换成项目里实际的脚本即可。login 会打开浏览器,把本机授权到 Cloudflare 账号。deploy 读取上面的配置并上传。本机若要模拟 Cloudflare 的路由(包括自定义 404),可以用 pnpm dlx wrangler@latest dev --local,它和 pnpm dev 不是同一件事。

构建和部署必须分开。没有构建产物就部署,会失败或发上一份空内容。改了文章却只部署、没有重新构建,线上仍是旧站。

图 002 从本机写稿、构建静态文件到 Wrangler 上传

图 002 先得到 dist/,再上传。Cloudflare 不替你跑 Astro。图为示意。

先用 workers.dev 验证托管#

自定义域之前,先让 Worker 在 Cloudflare 的免费域名上跑通。每个账号有一块 *.workers.dev 空间。Worker 部署成功后,终端会给出类似下面的地址:

https://my-blog.<账号子域>.workers.dev

第一段来自配置里的 name,账号子域由 Cloudflare 分配,同一账号下的 Worker 共用这一段。workers.dev 是 Cloudflare 自己的域名,证书也由他们签发。这一步不需要买域名,也不需要改 DNS。

图 003 workers.dev 地址由 Worker 名称、账号子域和平台域名组成

图 003 平台送的链接怎么拼出来。图为示意,账号子域以你的控制台为准。

验收只看托管本身:浏览器打开首页、博客列表和一篇文章,故意访问一个不存在的路径,应出现站点自己的 404。此时 RSS 和 sitemap 里的主机名仍可能是 localhost,因为构建时用的公开根地址还没有改成这条 workers.dev 链接。先确认页面能打开即可,订阅源放到绑自己的域名后再对齐。

Wrangler 若登录到错账号,仪表盘里看不到刚部署的 Worker。可先 wrangler logout,再重新 login。

换成自己的域名#

实名和注册#

托管通了之后,才处理自己的 .com。在国内注册商(例如阿里云)买通用域名,通常要先完成账号实名,再准备已实名的域名信息模板,下单时选它。账号实名回答「这个云账号是谁的」,域名实名回答「这个名字登记在谁名下」。核验没过之前,解析和自定义域会卡住。以阿里云为例,官方说明见个人实名认证和通用域名实名核验。

买域名时不要先在注册商的解析面板里加 A 记录。接下来会把 DNS 服务器改成 Cloudflare。

把解析交给 Cloudflare#

若域名已经打开 DNSSEC,改 NS 之前先关掉:父域仍留着旧的 DS 记录、子域已经换成新解析商时,解析可能直接失败。

在 Cloudflare 添加站点时填根域名,例如 example.com,不要填 www.example.com。它会分配两个 *.ns.cloudflare.com。回到注册商,把该域名的 DNS 服务器改成这两行,逐字母核对,不要抄其他账号的 NS。阿里云的说明见修改 DNS 服务器;Cloudflare 见 Full setup。

注册商可能提示最长 48 小时。新域名常见几分钟到几小时。站点状态变为 Active 后,可以把域名换成自己的再查:

Terminal window
dig NS example.com +short

结果应是 Cloudflare 那两个 NS。若仍是注册商原来的 DNS 主机名,就再等,也不要同时在两边加 A 记录。

绑到同一个 Worker#

然后在 Worker 的 Domains & Routes 里添加 Custom Domain,填根域名。Cloudflare 会自己建 DNS 记录并签发证书,不必先手写一条指到别处的 CNAME,也不必另买 SSL。加密模式使用 Full (strict)。若也要 www,再加一次自定义域。官方说明见 Workers Custom Domains。

workers.dev 和自定义域指向同一个 Worker。加自己的域名不会新建第二份站点。

图 004 workers.dev 和 example.com 都指向同一份静态文件

图 004 自定义域是后加的门牌。图为示意,域名用 example.com 代替。

页面能打开,不等于公开地址已经改对#

浏览器能打开网站,只说明 DNS、证书和文件托管通了。RSS、sitemap、canonical 和社交预览里的链接是写进 HTML / XML 的绝对地址。静态站在运行时不会「看现在用的是哪个域名」,这些地址在构建时由站点根地址写入。

只在面板里绑域名、不重新构建再部署,页面能看,订阅源和分享链接仍可能是 localhost 或 workers.dev。

图 005 浏览器已打开自定义域,RSS 仍可能写着 localhost

图 005 页面能打开不等于订阅源主机名已改对。图为示意,不是真实订阅源截图。

Astro 用配置里的 site 作为站点根地址,常见做法是用环境变量在构建时注入,例如 SITE_URL。它必须是站点根,包含 https://,并且带末尾斜杠,例如 https://example.com/。这类本地环境文件不要提交进 Git。改完后重新构建并部署。

验收时打开 /rss.xml 和站点地图,里面的主机名应与地址栏一致。若使用 Cloudflare Workers Builds,同样的根地址要写在构建环境变量里,不能只存在本机环境文件中。

适用边界#

这条路径适合已经能在本机构建静态站、愿意使用命令行的人。它不消除国内域名实名,也不保证大陆访问一定快。从国内访问 Cloudflare 有时会偏慢,但一般仍能打开;具体耗时随线路变化,本文没有测速记录。

现在不要把解析指到未备案的大陆 IP,也不要在这一步为了备案去买大陆云服务器或提交 ICP。未备案的大陆 IP 会被拦截。以后若备案,通常需要大陆主机和对应主体;过户的是域名持有者。个人博客展示走非经营性备案即可。若网站开始按店铺收款,再单独看经营性许可。

总结#

用 Astro 构建静态文件,再用 Cloudflare Workers 托管,可以不上自己的云服务器就先让博客上线。workers.dev 用来验证托管;自己的域名是后加的主机名。真正容易漏掉的不是「能不能打开」,而是改完域名之后有没有用新的根地址重新构建,让 RSS 和 sitemap 与浏览器里看到的名字一致。

还可以从这里继续#

我是 OSSpark,平时做独立开发,更短的开发手记发在小红书。

  • 小红书:搜 OSSpark

参考资料#