使用 Astro 与 Tailwind CSS 构建的静态博客模板
fuwari — Astro 博客模板
作者 saicaca
基于 Astro 与 Tailwind CSS 的静态博客模板,内置搜索、深浅色模式、RSS 与扩展 Markdown 语法。
看看你的网站会是什么样
浏览真实页面截图,比较内容排版与手机效果。点击下方缩略图切换,放大查看整页细节。
全部页面与视图 3
截图用于了解视觉与布局,交互效果请以实际项目为准。
值得关注的模板亮点
从已有项目资料中,快速了解它的特点。
内置 Pagefind 搜索、RSS 订阅与文章目录
支持浅色/深色模式,主题色与横幅可自定义
响应式布局,附带页面过渡与动画
扩展 Markdown 语法:提示块、GitHub 仓库卡片、Expressive Code 增强代码块
文章以 Markdown 文件管理,frontmatter 支持标签、分类、封面与草稿状态
模板详细介绍
Fuwari 是一个用 Astro 构建的静态博客模板,样式层使用 Tailwind CSS。它面向个人博客场景,提供文章列表、文章详情、关于页等基础页面,并支持通过 src/config.ts 调整站点配置。
内容以 Markdown 文件形式存放在 src/content/posts/ 目录,通过 pnpm new-post <filename> 生成新文章,文章头部使用 frontmatter 定义标题、发布日期、描述、封面图、标签、分类、草稿状态与语言。模板内置 Pagefind 搜索、RSS 订阅、目录导航、浅色/深色模式,以及可自定义的主题色与横幅。
Markdown 方面,除 Astro 默认支持的 GitHub Flavored Markdown 外,还提供提示块(Admonitions)、GitHub 仓库卡片,以及基于 Expressive Code 的增强代码块。模板自带多语言 README(含中文、日文、韩文等,由社区提供,可能不总是最新)。
构建产物为静态站点,可部署到 Vercel、Netlify、GitHub Pages 等平台,部署前需在 astro.config.mjs 中修改站点配置。本地开发要求 Node.js 20 及以上、pnpm 9 及以上。仓库采用 MIT 许可,可免费使用、修改、商用和分发该版本代码,但演示图片、字体、图标等第三方素材需单独核对许可。
适合你的项目吗?
适用场景
- 搭建个人技术博客或写作站点
- 需要站内搜索与 RSS 订阅的静态内容站
- 希望用 Markdown 管理文章并自定义主题配色的博客
- 部署到 Vercel、Netlify 或 GitHub Pages 等静态托管平台
适合人群
- 熟悉 Markdown 写作、希望少写代码的个人博主
- 使用 Astro 或愿意学习 Astro 的前端开发者
- 需要多语言文章标记(frontmatter 中可设 lang)的写作者
上手与定制指南
结合仓库当前版本的说明,按下面的资料检查内容、配置与运行要求。
- 1
本地环境需 Node.js 20 及以上、pnpm 9 及以上。
- 2
可通过模板生成新仓库,或运行 npm create fuwari@latest 等命令初始化。
- 3
克隆仓库后执行 pnpm install 安装依赖,pnpm dev 启动本地开发服务器。
- 4
站点配置在 src/config.ts 中修改,部署前需调整 astro.config.mjs 的站点配置。
- 5
使用 pnpm new-post <filename> 创建文章,文件位于 src/content/posts/。
授权与来源资料
使用条件与限制
免费使用 · 保留许可声明本次收录的是公开仓库中采用 MIT 许可的免费版本;免费范围为该版本代码,不代表外部服务或第三方素材免费。
使用时需要遵守
- 允许免费使用、修改、商用和分发该版本代码。
- 分发代码副本或实质性部分时,保留原作者版权声明和完整 MIT 许可声明。
- 代码按现状提供;担保与责任限制以原许可证及适用法律为准。
额外费用与待核对事项
- 演示图片、字体、图标及其他第三方素材需按各自许可核对,不能仅凭代码的 MIT 许可判断。
- 域名、托管、数据库、支付或 AI 等外部服务可能另外收费。
查看原文依据
https://github.com/saicaca/fuwari/blob/main/LICENSEhttps://github.com/saicaca/fuwari/blob/main/README.mdPermission is hereby granted, free of charge
许可证原文
DeepSeek 根据仓库许可证和 README 整理 ·2026-10-05。结果仅覆盖已读取资料,依赖、图片、字体及后续条款变更以各自原文为准。
项目核对记录与介绍依据
模板资料
- 来源平台
- Astro Themes
- 资料与维护参考分
- 资料较完整 · 95 / 100
- 技术栈
- Astro
- 网站类型
- 博客
这个分数如何计算
本站按许可资料(最高30分)、演示链接(12分)、预览图(10分)、Star数(15分)、记录的维护时间(15分)、描述完整度(8分)、功能记录(5分)和分类资料(5分)计算。它不是代码、安全或性能测试,也不是 Google 评分;有链接不代表已实测可用。
这个项目需要核对什么
- 记录的仓库更新时间
- 2026-03-10
- 截图检查日期
- 2026-10-05
已收录演示链接。请用你的内容与屏幕尺寸检查;有演示不代表表单、认证或支付已经可用。
目录记录的主要技术栈是 Astro。请通过依赖清单和锁文件核对实际版本与托管要求。这些说明基于收录资料,不代表代码审计或部署实测。
查看具体选型方法 →介绍的制作与核对状态
介绍由 AI 辅助整理目录与仓库资料。仓库作者不等于这篇介绍的审核者。
审核声明: [email protected] · 2026-10-05
查看当时使用的来源资料
SHA-256: 486645147dba5b2da18d6ae2e9d46ad72d123a4fe8c564be0e2826ebd8225ece
2026-10-05T11:02:13.435Z
来源文件 / 仓库# 🍥Fuwari


[](https://deepwiki.com/saicaca/fuwari)
[](https://app.fossa.com/projects/git%2Bgithub.com%2Fsaicaca%2Ffuwari?ref=badge_shield&issueType=license)
A static blog template built with [Astro](https://astro.build).
[**🖥️ Live Demo (Vercel)**](https://fuwari.vercel.app)

🌏 README in
[**中文**](https://github.com/saicaca/fuwari/blob/main/docs/README.zh-CN.md) /
[**日本語**](https://github.com/saicaca/fuwari/blob/main/docs/README.ja.md) /
[**한국어**](https://github.com/saicaca/fuwari/blob/main/docs/README.ko.md) /
[**Español**](https://github.com/saicaca/fuwari/blob/main/docs/README.es.md) /
[**ไทย**](https://github.com/saicaca/fuwari/blob/main/docs/README.th.md) /
[**Tiếng Việt**](https://github.com/saicaca/fuwari/blob/main/docs/README.vi.md) /
[**Bahasa Indonesia**](https://github.com/saicaca/fuwari/blob/main/docs/README.id.md) (Provided by the community and may not always be up-to-date)
## ✨ Features
- [x] Built with [Astro](https://astro.build) and [Tailwind CSS](https://tailwindcss.com)
- [x] Smooth animations and page transitions
- [x] Light / dark mode
- [x] Customizable theme colors & banner
- [x] Responsive design
- [x] Search functionality with [Pagefind](https://pagefind.app/)
- [x] [Markdown extended features](https://github.com/saicaca/fuwari?tab=readme-ov-file#-markdown-extended-syntax)
- [x] Table of contents
- [x] RSS feed
## 🚀 Getting Started
1. Create your blog repository:
- [Generate a new repository](https://github.com/saicaca/fuwari/generate) from this template or fork this repository.
- Or run one of the following commands:
```sh
npm create fuwari@latest
yarn create fuwari
pnpm create fuwari@latest
bun create fuwari@latest
deno run -A npm:create-fuwari@latest
```
2. To edit your blog locally, clone your repository, run `pnpm install` to install dependencies.
- Install [pnpm](https://pnpm.io) `npm install -g pnpm` if you haven't.
3. Edit the config file `src/config.ts` to customize your blog.
4. Run `pnpm new-post <filename>` to create a new post and edit it in `src/content/posts/`.
5. Deploy your blog to Vercel, Netlify, GitHub Pages, etc. following [the guides](https://docs.astro.build/en/guides/deploy/). You need to edit the site configuration in `astro.config.mjs` before deployment.
## 📝 Frontmatter of Posts
```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 # Set only if the post's language differs from the site's language in `config.ts`
---
```
## 🧩 Markdown Extended Syntax
In addition to Astro's default support for [GitHub Flavored Markdown](https://github.github.com/gfm/), several extra Markdown features are included:
- Admonitions ([Preview and Usage](https://fuwari.vercel.app/posts/markdown-extended/#admonitions))
- GitHub repository cards ([Preview and Usage](https://fuwari.vercel.app/posts/markdown-extended/#github-repository-cards))
- Enhanced code blocks with Expressive Code ([Preview](https://fuwari.vercel.app/posts/expressive-code/) / [Docs](https://expressive-code.com/))
## ⚡ Commands
All commands are run from the root of the project, from a terminal:
| Command | Action |
|:---------------------------|:----------------------------------------------------|
| `pnpm install` | Installs dependencies |
| `pnpm dev` | Starts local dev server at `localhost:4321` |
| `pnpm build` | Build your production site to `./dist/` |
| `pnpm preview` | Preview your build locally, before deploying |
| `pnpm check` | Run checks for errors in your code |
| `pnpm format` | Format your code using Biome |
| `pnpm new-post <filename>` | Create a new post |
| `pnpm astro ...` | Run CLI commands like `astro add`, `astro check` |
| `pnpm astro --help` | Get help using the Astro CLI |
## ✏️ Contributing
Check out the [Contributing Guide](https://github.com/saicaca/fuwari/blob/main/CONTRIBUTING.md) for details on how to contribute to this project.
## 📄 License
This project is licensed under the MIT License.
[](https://app.fossa.com/projects/git%2Bgithub.com%2Fsaicaca%2Ffuwari?ref=badge_large&issueType=license)
看看同类模板
对比同技术栈与用途的模板,找到更适合的视觉与内容结构。

astrowind
⭕️ AstroWind: A free template using Astro v7 and Tailwind CSS v4. Astro starter theme.
Astro · 博客

astro-paper
A minimal, accessible and SEO-friendly Astro blog theme.
Astro · 博客

Firefly
Firefly 是一款基于 Astro 的静态博客主题,由 CuteLeaf 在 saicaca 的 Fuwari 模板基础上二次开发,主打清新美观的视觉风格。
Astro · 博客

astro-theme-cactus
A simple Astro theme. Use it to create your blog or website.
Astro · 作品集

astrofy
Astrofy is a free and open-source template for your Personal Portfolio Website built with Astro and TailwindCS…
Astro · 作品集
accessible-astro-starter
Accessible Astro Starter 是一个以无障碍为核心理念的 Astro 6 启动模板,由 incluud 团队维护。
Astro · 博客
