这个博客是怎么搭起来的

记录一下这个博客的技术选型和搭建过程，方便以后回看。

技术栈

• Astro：内容型网站框架。文章就是 src/content/blog/ 下的 markdown 文件，构建时生成纯静态 HTML，默认不往浏览器发任何 JavaScript。
• Tailwind CSS 4：样式方案，通过 @tailwindcss/vite 插件接入，文章排版用 @tailwindcss/typography 的 prose 类。
• Cloudflare Pages：托管，推到 GitHub 自动构建部署。

目录结构

/
├── src/
│   ├── content/
│   │   └── blog/          ← 文章（markdown）
│   ├── layouts/
│   │   └── BaseLayout.astro
│   ├── pages/
│   │   ├── index.astro    ← 首页
│   │   ├── about.astro    ← 关于
│   │   └── blog/
│   │       ├── index.astro
│   │       └── [...slug].astro
│   ├── styles/
│   │   └── global.css
│   └── content.config.ts  ← 文章集合的 frontmatter 校验
└── public/
    └── favicon.svg

写一篇新文章

在 src/content/blog/ 下新建一个 .md 文件：

---
title: 文章标题
description: 一句话摘要
pubDate: 2026-10-29
tags: [标签]
---

正文用 markdown 写。

保存之后 pnpm dev 就能在本地看到，推到 main 即自动上线。

为什么是这个组合

个人博客的核心需求是：写起来快、读起来快、维护成本低。Astro 的内容集合给 markdown 加了 frontmatter 类型校验，写错字段会在构建时报错；整站静态化之后托管成本几乎为零。如果以后需要加交互功能（评论、搜索），Astro 的 islands 架构也允许按需引入框架组件，不至于推倒重来。