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 在构建后自动生成。