基于 Astro+Tailwind 的静态博客模板，含搜索、RSS、明暗模式等能力

方案简介

Fuwari 是一个以 Astro 构建的静态博客模板，搭配 Tailwind CSS 提供样式与响应式设计。它面向希望快速搭建个人博客的开发者：通过模板生成或脚手架命令即可创建博客仓库，编辑 src/config.ts 即可定制站点，再用 pnpm new-post 写作，最后部署到 Vercel、Netlify、GitHub Pages 等静态托管平台。模板内置平滑动画与页面过渡、明暗模式、可自定义主题色与横幅、基于 Pagefind 的搜索、目录、RSS 订阅以及对 GitHub Flavored Markdown 的扩展语法支持。

亮点与能力

• 使用 Astro 与 Tailwind CSS 构建
• 平滑的动画与页面过渡
• 明/暗模式切换
• 可自定义主题颜色与横幅
• 响应式设计
• 基于 Pagefind 的搜索功能
• Markdown 扩展特性（提示块、GitHub 仓库卡片、Expressive Code 增强代码块）
• 文章目录（TOC）
• RSS 订阅

组成与分工

• Astro：静态站点生成核心，提供页面过渡与构建流程
• Tailwind CSS：样式系统与响应式设计
• Pagefind：提供博客站内搜索功能
• Expressive Code：增强 Markdown 代码块展示
• Biome：用于代码格式化（pnpm format）
• pnpm / Node.js >= 20：运行与依赖管理环境

前置要求

• Node.js >= 20
• pnpm >= 9

如尚未安装 pnpm：

sh
npm install -g pnpm

实施步骤

1. 创建博客仓库

从模板生成新仓库或 fork 本仓库，或运行以下命令之一：

sh
npm create fuwari@latest
yarn create fuwari
pnpm create fuwari@latest
bun create fuwari@latest
deno run -A npm:create-fuwari@latest

2. 安装依赖

克隆你的仓库到本地并安装依赖：

sh
pnpm install

3. 定制站点

编辑配置文件 src/config.ts 来定制你的博客。

4. 创建文章

运行以下命令创建新文章，并在 src/content/posts/ 中编辑：

sh
pnpm new-post

5. 部署

按照 Astro 部署指南将博客部署到 Vercel、Netlify、GitHub Pages 等。部署前需要在 astro.config.mjs 中编辑站点配置。

使用与配置要点

• 本地开发：pnpm dev，在 localhost:4321 启动开发服务器
• 生产构建：pnpm build，输出到 ./dist/
• 本地预览构建结果：pnpm preview
• 代码检查：pnpm check
• 代码格式化：pnpm format

文章 frontmatter 示例：

yaml

---

title: My First Blog Post
published: 2023-09-09
description: This is the first post of my new Astro blog.
image: ./cover.jpg
tags: [Foo, Bar]
category: Front-end
draft: false
lang: jp

---

注意事项与常见问题

• 文章的 lang 仅在文章语言与 config.ts 中站点语言不同时才需要设置
• 部署前必须先在 astro.config.mjs 中编辑站点配置
• 项目采用 MIT 许可证

优缺点

• ✓ 内置搜索与 RSS 等完整博客能力
• ✓ 可自定义主题色与横幅
• ✕ 依赖 Node 20+ 与 pnpm 9

出处

本方案挖掘自开源项目 saicaca/fuwari，方案内容与实施命令均来自其 README 原文。