技术栈概览#

核心组件就三个：Astro 做框架，Fuwari 做主题，部署扔到静态托管平台上。

整个站点是纯静态的。没有数据库，没有后端服务器。Markdown 写文章，构建时生成 HTML，CDN 直接分发。

为什么选 Astro#

Astro 是一个静态站点生成器。它和 Hugo、Jekyll、Hexo 干的是同一件事：把内容文件变成可以直接访问的网页。

选它的理由很简单。

第一，性能好。Astro 默认不往页面里塞 JavaScript。构建出来的页面就是纯 HTML 和 CSS，加载速度快。需要交互的地方才加载脚本，官方叫这个”岛屿架构”。

第二，灵活。Astro 支持用 React、Vue、Svelte 写组件。不过对于博客这种内容站，基本用不上。纯 Astro 组件就够了。

第三，开发体验不错。目录结构清晰，src/pages 放页面，src/content 放内容，src/components 放组件。Markdown 和 MDX 都支持。热更新也很快。

NOTE

Astro 从静态站点生成器起步，现在也支持服务端渲染。不过对博客来说，纯静态就够用了。

为什么选 Fuwari#

Fuwari 是一个基于 Astro 的博客主题。作者是 saicaca。

选它是因为：

第一，样式干净。没有花里胡哨的东西，专注于阅读体验。

第二，功能齐全。深色模式、响应式布局、搜索、标签分类、RSS 订阅都有。不用自己从零开始搭。

第三，Markdown 扩展丰富。支持提示框、折叠内容、GitHub 仓库卡片这些东西。写技术文章很方便。

第四，上手简单。改一下 src/config.ts 就能用。文章扔进 src/content/posts 目录，构建时自动处理。

项目结构#

大致长这样：

1
src/
2
├── config.ts          # 站点配置
3
├── content/
4
│   └── posts/         # 文章目录
5
├── components/        # 组件
6
├── layouts/           # 布局
7
└── pages/             # 页面

文章用 Markdown 写，开头有 frontmatter：

1
---
2
title: 文章标题
3
published: 2025-01-01
4
description: 文章简介
5
image: ''
6
tags: [标签1, 标签2]
7
category: 分类
8
draft: false
9
---

published 是发布日期，draft 设成 true 就不会显示在前台。

部署#

Astro 构建出来的是一堆静态文件。我用的是 Cloudflare Pages。

流程：GitHub 仓库连接 Cloudflare Pages，设置构建命令 npm run build，输出目录 dist。每次 push 代码，Cloudflare 自动拉取、构建、部署。最终通过 Cloudflare CDN 分发到全球节点。

为什么选 Cloudflare Pages：

• 免费额度够用
• 自带 CDN，国内访问速度还行
• 支持自定义域名和 HTTPS
• 构建速度快

写作流程#

我用 Obsidian 写文章。但不是直接打开整个博客项目，而是把 src/content/posts 和 src/content/img 两个文件夹软链接到一个单独的目录，然后用 Obsidian 打开这个目录。

1
mkdir ~/Blog
2
ln -s ~/Codes/blog/src/content/posts ~/Blog/posts
3
ln -s ~/Codes/blog/src/content/img ~/Blog/img

这样 Obsidian 里只看到文章和图片，不会被项目里的配置文件、组件代码干扰。写作环境干净很多。

自动提交用的是一个防抖脚本，监听目录变化，停止编辑一段时间后才执行 git commit 和 push。具体实现见：auto_commit_macos

完整链路：

1
Obsidian 写作 → 防抖脚本监听 → 自动 commit/push → GitHub → Cloudflare Pages 构建 → CDN 分发

从停止编辑到文章上线，大约 10 分钟。中间不需要手动操作。

踩过的坑#

几个需要注意的地方。

第一，frontmatter 的 tags 里不能有空格。[Machine Learning] 不行，要写成 [MachineLearning] 或者 [Machine-Learning]。

第二，image 字段如果留空，要写成 image: ''，不能不写。不然构建可能会报错。

第三，部署前记得改 astro.config.mjs 里的 site 配置，填上实际的域名。不然有些功能（比如 RSS）会出问题。

总结#

Astro + Fuwari + Obsidian + GitHub + Cloudflare Pages 这套组合，目标就是让写作尽可能简单。

不需要登录后台。不需要管服务器。不需要担心数据库崩了。

打开 Obsidian，写 Markdown，保存。剩下的事情全自动。

对于只想专注写内容的人来说，这就够了。

Works Cited#

“Astro.” Astro, https://astro.build/. Accessed 29 Dec. 2025.

saicaca. “Fuwari: A Static Blog Template Built with Astro.” GitHub, https://github.com/saicaca/fuwari. Accessed 29 Dec. 2025.

“What Is Astro? An Introduction to the Popular Static Site Generator.” Kinsta, 26 Nov. 2024, https://kinsta.com/blog/astro-js/.