从零搭建个人博客：Astro + Cloudflare Pages 完全指南

为什么要自己搭建博客？

不是寄居在 CSDN 或掘金的一亩三分地——那些平台虽然方便，但你的内容被算法控制，页面塞满广告，而且你永远不知道哪天平台会改规则、会关停。

我想要的是一个完全属于自己的空间。

经过几个月的实践和迁移，我现在可以很确定地说：Astro + Cloudflare Pages 是目前个人技术博客的最佳方案。

技术选型

环节	选择	理由
框架	Astro	默认零 JS，构建极快，Markdown 原生支持
托管	Cloudflare Pages	免费、全球 CDN、自动 HTTPS、GitHub 集成
域名	Cloudflare 自带 `*.pages.dev`	免费域名，以后可以绑自定义域名
样式	纯 CSS（自带）	不需要 Tailwind，CSS 变量 + 文件组织足够

为什么不是 Hugo / Hexo / Next.js？

Hugo：Go 模板语法学习曲线陡峭，主题定制痛苦。我最初的博客就是用 Hugo 搭的——能用，但改起来很累。
Hexo：生态老旧，构建速度慢。
Next.js：太重了。个人博客不需要 React Server Components。

Astro 的核心理念：默认输出纯 HTML，只在需要交互的地方加 JS。对于内容型网站来说，这是最正确的架构。

第一步：创建项目

npm create astro@latest mow-blog
cd mow-blog
npm install

选择空白模板（Empty），不装 TypeScript 插件（Astro 自带支持）。

第二步：了解目录结构

mow-blog/
├── astro.config.mjs      # Astro 配置
├── public/
│   └── assets/           # 静态资源（图片、字体）
├── src/
│   ├── content/
│   │   ├── config.ts     # Content Collection schema
│   │   └── posts/         # Markdown 文章放这里
│   ├── layouts/          # 页面布局
│   ├── components/       # 可复用组件
│   ├── pages/            # 路由页面（文件即路由）
│   └── styles/           # CSS 文件

第三步：定义内容模型

Astro 的 Content Collections 让你定义一个 Zod schema，所有 .md 文件的 frontmatter 自动校验：

// src/content.config.ts
import { defineCollection, z } from 'astro:content';

const posts = defineCollection({
  schema: z.object({
    title: z.string(),
    date: z.date(),
    category: z.enum(['技术文档', '学习笔记', '作品集', '随想']),
    type: z.enum(['教程', '知识点', '踩坑记录', '设计决策', '复盘总结', '随笔', '读书笔记']),
    domain: z.array(z.enum(['游戏开发', 'AI与工具', '图形学', '架构设计', '工程实践', '认知与成长', '博客与创作'])).default([]),
    description: z.string().optional(),
    draft: z.boolean().default(false),
  }),
});

export const collections = { posts };

frontmatter 写错了一个字，Astro 会在构建时报错——这比自由格式可靠太多了。

第四步：写文章

在 src/content/posts/ 下创建 .md 文件，填写 frontmatter，然后写正文。构建时 Astro 自动校验、渲染、生成页面，且不加载任何 JavaScript（除非你主动加）。

第五步：部署到 Cloudflare Pages

通过 wrangler CLI 部署：

npm install -g wrangler
npm run build
npx wrangler pages deploy dist --project-name=mow-blog

连接 GitHub 自动部署：

Cloudflare Dashboard → Workers & Pages
创建 Pages 项目 → 连接 GitHub 仓库
Framework: Astro, Build: npm run build, Output: dist
之后每次 git push 自动部署

为什么这套方案好？

免费：Cloudflare Pages 免费额度足够个人博客
快：全球 CDN，HTML 零 JS 负担，首屏秒开
可控：纯静态文件，没有数据库，没有被平台锁定的风险
好改：Astro 文件结构清晰，想改样式就改 CSS，想加功能就写组件
可迁移：dist/ 目录可以部署到任何静态托管

去创造吧。拥有一个自己的空间，这件事值得花一个下午。