Astro + Tailwind CSS 静态博客搭建指南

这是一套面向 GitHub Pages 的纯静态博客流程:本地写 Markdown,提交到 GitHub,GitHub Actions 自动构建并发布到线上。

1. 本地开发

npm install
npm run dev
npm run build

Astro 会输出纯静态文件,Tailwind 负责样式构建。构建完成后,最终产物会生成到 `dist/` 目录。

2. 修改站点配置

常用配置集中在 `src/config/site.ts`,包括站点标题、作者名、导航、社交链接、SEO 描述和评论配置。

3. 新建文章

npm run new "新的技术笔记"

文章保存在 `src/content/posts/`,每篇文章都需要配置标题、描述、发布时间、分类、标签和封面图。

4. GitHub Pages 部署

在仓库 Settings -> Pages 中选择 GitHub Actions。推送到 `main` 后,工作流会自动安装依赖、构建项目并发布 `dist/`。

5. 自定义域名

如果绑定域名,在 Pages 设置里填写域名并开启 HTTPS。DNS 侧可以添加 `CNAME` 到 `xhioer.github.io`。

6. 长期维护

文章内容由 Git 管理,图片建议放在 `public/covers/` 或 `src/assets/`。搜索索引由 Pagefind 在构建后自动生成。