栀海的博客

博客开张：用 Astro + Firefly + Cloudflare 上线

Fri, 09 Oct 2026 00:00:00 GMT

欢迎来到栀海的博客。

这个站点用 Astro 做静态生成，托管在 Cloudflare Workers 的静态资源服务上。选它的原因很简单：

零成本：免费额度对一个个人博客来说绰绰有余（每天 10 万次请求，静态资源每天不限请求数）。
零运维：不需要服务器、不需要装 Nginx、证书自动签发和续期。
快：静态文件走 Cloudflare 全球边缘节点，国内访问一般也能接受。
写作舒服：文章就是 Markdown 文件，写完 git push 或者一条命令就上线。

怎么发一篇新文章#

在 src/content/blog/ 里新建一个 .md 文件，开头写上元信息：

1
---
2
title: 文章标题
3
description: 一句话摘要，会显示在列表和搜索结果里
4
pubDate: 2026-10-09
5
tags: ['随笔']
6
draft: false
7
---
8

9
正文用 Markdown 写就行。

然后本地预览：

Terminal window

1
npm run dev      # http://localhost:4321

确认没问题后发布：

Terminal window

1
npm run deploy   # = astro build + wrangler deploy

就这两步。

接下来想写什么#

一些折腾记录（软路由、NAS、各种自建服务）
读书笔记
一些关于效率工具的想法

如果这个博客能坚持写下去，那它就已经完成使命了。

把博客部署到 Cloudflare（含绑定自有域名）

Thu, 08 Oct 2026 00:00:00 GMT

这篇文章记录把本博客部署到 Cloudflare 的完整流程。全程免费，只有域名需要花钱（也可以先用免费的 *.workers.dev 子域）。

一、本地构建并首次部署#

Terminal window

1
npm install          # 只做一次
2
npm run deploy       # astro build + wrangler deploy

第一次运行 wrangler deploy 会打开浏览器要求授权登录 Cloudflare 账号。登录完成后回到终端，会看到：

1
Uploaded my-blog (x.xx sec)
2
Deployed my-blog triggers (x.xx sec)
3
  https://my-blog.<你的子域>.workers.dev

这个 *.workers.dev 地址就是你的博客，已经自动带 HTTPS。

Worker 名称在 wrangler.jsonc 的 name 字段，它决定了 workers.dev 子域名，必须是全局唯一的。如果提示被占用，改个名字再部署即可。

二、绑定自己的域名#

在 Cloudflare 控制台 Workers & Pages → 你的 Worker → Settings → Domains & Routes，点 Add → Custom Domain，填 blog.example.com。
如果域名还没接入 Cloudflare：先在控制台 Add site 添加域名，然后到域名注册商处把 NS 改成 Cloudflare 给的两个名称服务器。
添加成功后 Cloudflare 会自动签发证书，通常 1～15 分钟生效。
顺手把 astro.config.mjs 里的 site 和 src/consts.ts 里的 url 改成新域名，这样 RSS 和站点地图里的链接才是对的。

三、值得打开的开关#

SSL/TLS → Edge Certificates：Always Use HTTPS、Automatic HTTPS Rewrites、HSTS。
Speed：Brotli、HTTP/3、Early Hints。
Caching → Cache Rules：静态资源（/_astro/*）可以设长缓存，Cache-Control 交给 Astro 生成的指纹文件名处理即可。
Analytics：开启 Web Analytics，免费且不需要在页面里塞第三方脚本。

四、常见问题#

现象	原因与处理
`Error 1027`	Workers 免费额度当天用尽（10 万次/天，UTC 零点重置）；静态资源站点一般很难碰到
访问域名 522 / 521	这是源站类错误，纯静态部署在 CF 上不会出现；出现说明路径配置有问题，检查 `wrangler.jsonc` 的 `assets.directory`
子域被占用	改 `wrangler.jsonc` 里的 `name`
页面样式丢失	检查 `npm run build` 是否成功、`dist/` 是否生成
国内访问慢	免费版没有中国大陆节点，通常走香港/日本；这是免费方案的固有代价

五、之后的更新流程#

Terminal window

1
npm run dev        # 本地写、本地看
2
npm run deploy     # 满意了就上线

如果想更省事，可以把仓库连到 Cloudflare 的 Git 集成（Workers Builds），以后 git push 就自动构建部署。

这个博客的 Markdown 速查表

Thu, 01 Oct 2026 00:00:00 GMT

正文支持常见的 Markdown 语法，下面是可以直接复制改写的示例。

标题与段落#

## 是二级标题，### 是三级标题。段落之间空一行即可。

列表#

无序列表：

第一项
第二项
- 嵌套一项

有序列表：

第一步
第二步

引用#

引用块适合放摘录或强调。可以写多行。

代码#

行内代码用反引号，比如 npm run deploy。

代码块可以标语言，构建时会自动做语法高亮：

1
export function greet(name) {
2
  return `Hello, ${name}!`;
3
}

Terminal window

1
npm run build
2
npx wrangler deploy

表格#

功能	命令
本地预览	`npm run dev`
构建	`npm run build`
构建并部署	`npm run deploy`

链接与图片#

链接：[Cloudflare](https://www.cloudflare.com/) → Cloudflare

图片：把文件放进 public/，然后用 ![说明](/图片名.png) 引用；文章专属图片也可以放在 src/content/blog/ 旁边用相对路径引用。

分隔线#

以上这些基本够用。真需要复杂排版时，Astro 还支持在页面里写组件，Markdown 和组件可以混用。