这套博客是怎么搭起来的

整站没有数据库、没有后端进程，服务器上只跑一个 Nginx。构建在我本机完成，产出一堆静态 HTML，再同步上去。

为什么是 Astro

选它有三个具体理由，不是因为它流行：

默认零 JavaScript。页面里没有框架运行时，首屏就是纯 HTML，加载快。
内容集合有类型校验。文章 frontmatter 少写一个 title，构建直接报错，不会上线一个空白标题。
改样式不用跟框架打架。组件就是 .astro 文件，HTML + CSS + 少量 JS 写在一起，比改主题模板直观。

目录结构

blog/
├── src/
│   ├── config.ts           站点信息，改这里
│   ├── content.config.ts   文章字段校验
│   ├── content/posts/      文章都在这里，一个 md 一篇
│   ├── components/         Header / Footer / PostCard
│   ├── layouts/            BaseLayout
│   ├── pages/              路由，文件即路径
│   └── styles/global.css   全站样式
├── public/                 静态资源，原样复制到产物根目录
└── astro.config.mjs        站点配置

src/pages 下的文件路径就是 URL。posts/[...slug].astro 会为每篇文章生成 /posts/<文件名>/。

写一篇新文章

在 src/content/posts/ 下新建 my-post.md：

---
title: '文章标题'
description: '一句话摘要，会显示在列表页和搜索结果里'
pubDate: 2026-10-27
tags: ['标签一', '标签二']
draft: false
---

正文从这里开始。

draft: true 的文章会被构建过程过滤掉，适合写一半先存着。

部署链路

本机构建，rsync 增量同步，Nginx 托管。服务器上不需要装 Node。

npm run build
rsync -avz --delete dist/ user@server:/var/www/blog/

--delete 会删掉服务器上多余的文件，保证产物和本地一致。所以要排除 .well-known 目录，否则会误删证书验证文件。

Nginx 的关键配置

两个点最容易出错：

_astro/ 目录要长缓存。文件名带内容哈希，内容变了文件名就变，可以安全地设 immutable。
HTML 不能缓存。否则发版后用户看到的还是旧页面，得强制刷新才生效。

具体配置见项目里的 nginx/blog.conf。