免费 · 开源 · 生产可用

用 Astro v7 + Tailwind CSS v4 搭网站的免费模板

AstroWind 是一套免费、可定制、可直接上线的开源模板。内置 30+ 可组合页面区块、 Markdown/MDX 博客、SEO 元信息、暗色模式与图片优化，适合创业团队、SaaS 官网、作品集、营销落地页与博客。

获取模板
了解特性
AstroWind 模板首页示意图

快速开始

一条命令，就是全部初始化工作

不想先看特性？直接把模板跑起来，两分钟后你就能开始改内容。

Terminal
$ bunx create-astro@latest --template arthelokyo/astrowind

  • 两分钟，一个终端

    按提示创建项目，运行 bun install 与 bun run dev，打开 localhost:4321，看到的演示站就是你自己的代码。需要 Bun 1.4.4 或更高版本。

  • 天生适配 AI 助手

    仓库自带 AGENTS.md 与 16 个分步技能文档，Claude Code、Cursor、Codex 等工具能直接看懂目录约定，帮你加页面、改主题、关博客。

  • MIT 许可，没有附加条件

    客户项目、个人站点、公司官网都可以用。不必保留署名，也无需付费；如果它帮你省下一个下午，去 GitHub 点个 Star 就好。

核心特性

AstroWind 给你准备了什么

一套面向生产环境的静态站点骨架：性能、SEO、内容与组件都已在模板里就位，你只需要换成自己的文案与图片。

Astro v7 + Tailwind CSS v4

静态优先的 Astro 搭配 CSS-first 配置的 Tailwind v4，几乎不向浏览器发送 JavaScript，页面又快又好改。

30+ 可组合页面区块

Hero、特性、Bento、价格对比、FAQ、客户评价、团队、时间线、图库等区块全部带类型定义，按需拼装即可。

开箱即用的博客

Markdown / MDX 文章放在 src/data/post/，自动获得 RSS、分类、标签、相关文章、社交分享与阅读时长。

SEO 与结构化数据

按路由生成 sitemap，默认配置 OG / Twitter 卡片、robots 与 JSON-LD，PageSpeed Insights 四项满分。

暗色模式与图片优化

深浅主题、RTL、shadcn/ui 兼容的设计变量；本地图由 Sharp 优化，远程图交给 Unpic 走 CDN。

为 AI 助手写好说明书

AGENTS.md、CLAUDE.md 与 .agents/skills/ 把常见改造任务写成分步指南，让 AI 改代码有据可依。

模板内部

看懂 AstroWind 的结构，改起来才不迷路

建立在现代化基础之上

把约定写进代码里，让每一次改动都落在正确的地方

配置集中在 config.yaml

站点名、URL、SEO、博客开关与分析都写在 src/config.yaml，由自研 Astro integration 编译成虚拟模块 astrowind:config。

页面基于文件路由

src/pages/ 下的 .astro 与 .md 文件自动成为路由，动态路由负责博客列表、文章、分类与标签。

内容走 Content Layer

src/content.config.ts 用 glob() 加载器读取 src/data/post/ 下的文章，构建时完成校验与渲染。

团队协作开发网站
让站点真正长成你自己的样子。

颜色与字体都是变量

CustomStyles.astro 定义明暗两套 CSS 变量，tailwind.css 用 @theme 暴露设计 token，改一处即可全局换肤。

多种页面版式

首页、落地页、博客页与 Markdown 页各有一套布局，区块组件可以任意组合成新的版式。

完全响应式

从手机到大屏都有一致的阅读体验，移动端菜单、图片尺寸与间距都已处理妥当。

媒体与嵌入内容

内置图片、视频、社交嵌入组件，配合 Astro 资源管线自动压缩与懒加载。

桌面上的网站线框图
把时间留给内容，而不是脚手架。

不必从零搭轮子

导航栏、页脚、面包屑、分页、标签、分享按钮这些重复工作，模板已经写好并且带类型。

静态产物随处可部署

output: static 产出 dist/ 纯静态文件，Vercel、Netlify、Cloudflare Workers、nginx 容器都能直接托管。

持续维护的依赖

v1 处于维护模式，持续接收依赖升级与问题修复，Astro 与 Tailwind 大版本更新也会跟进。

社区与文档

1,300+ 次提交、1700+ fork，加上 16 个 AI 技能文档，遇到问题几乎总能找到参考。

开发工作流示意

四步，把模板变成你的网站

第 1 步：获取模板

在 GitHub 上 fork 或点击 Use this template，也可以用上面的命令直接创建项目。整个代码库立刻属于你。

第 2 步：替换内容

改 src/config.yaml 里的站点信息与 logo，替换首页与 src/data/post/ 里的示例文字，把图片换成自己的素材。

第 3 步：调整外观

在 CustomStyles.astro 改明暗主题颜色，在 astro.config.ts 的 fonts 配置里换字体，用现成区块重新拼装页面。

完成，可以上线了

从想法到上线的步骤

组件库

常用页面区块一览

每个区块都是带类型 props 的 .astro 组件，页面只是把它们的顺序和文案组合起来

导航与页脚

桌面下拉菜单、移动端折叠菜单、主题切换、RSS 入口与多栏页脚。

首屏 Hero

标题、副标题、行动按钮与主视觉，支持多种排版变体。

特性与卖点

网格、Bento、标签页、步骤与时间线，把能力讲清楚。

内容区块

图文左右分栏、引用、注释与图库，承载长篇说明。

行动号召

CTA、公告条、粘性按钮与订阅表单，把读者导向下一步。

价格与对比

价格卡片与功能对比表，适合 SaaS 与产品页。

客户评价

评价、社会证明、数据统计与品牌墙，建立信任感。

联系与团队

联系表单、团队介绍、项目展示与常见问题折叠面板。

博客组件

文章卡片、列表、分页、标签、相关文章与 RSS 输出。

项目历程

一个模板，从 2022 年走到今天

从 Astro 1.0 beta 时代起步，跟随每一次大版本演进，也由社区的贡献者一点点打磨。

  1. 诞生在 Astro 1.0 beta 时期

    最初只有几个页面和少量区块，思路却很明确：网站可以同时做到快、简单、好看。

  2. 成为 Star 最多的 Astro 主题

    年底登上 Astro 生态榜首，此后连续多年保持这一位置，第一批来自陌生开发者的 PR 也陆续到来。

  3. 最忙碌的一段时期

    内容集合、图片优化、页面过渡相继加入，区块数量翻倍，博客逐渐成型。

  4. 打磨细节

    跟随 Astro 4 更新，大部分提交来自贡献者：可访问性、工具链、编辑与部署方式的改进。

  5. 稳定迭代

    升级 Astro 5，提交节奏放缓但没有停，Star 数在 10 月突破五千。

  6. Astro 7 与 Tailwind CSS 4

    一年内跟进两个框架大版本：新一代区块、完整落地页示例、更像文档的博客，以及写给 AI 助手的指南。

  7. v1 趋于完整

    首次提交四年后，演示站里不再有占位内容：每个页面、每篇示例文章都是真实的。

继续阅读中文指南

查看全部文章

这几篇文章从安装、定制讲到模板原理与 AI 协作，按需要挑一篇开始即可。所有示例文章都放在 src/data/post/，构建时自动进入列表、分类、标签与 RSS。

FAQ

常见问题

在克隆仓库之前最常被问到的几个问题。更复杂的操作步骤，仓库里的 .agents/skills/ 已经写成了分步指南。

AstroWind 是什么？

一个基于 Astro v7 与 Tailwind CSS v4 的免费开源静态站点模板：包含页头页脚、30+ 可复用区块、Markdown/MDX 博客、暗色模式、RTL、图片优化、SEO 元信息与 RSS，改完内容即可部署到任意静态托管。

开始之前需要准备什么？

Bun 1.4.4 或更高版本（packageManager 中已固定）和一个终端。运行 bunx create-astro@latest --template arthelokyo/astrowind，再 bun install 与 bun run dev。站点信息在 src/config.yaml，颜色字体在 src/components/CustomStyles.astro。

不需要博客，可以关掉吗？

可以。把 src/config.yaml 里的 apps.blog.isEnabled 设为 false，博客路由、RSS 与文章区块都会从构建产物中消失，其余部分不受影响。

怎么换颜色、字体和 Logo？

颜色是 CustomStyles.astro 里的明暗两套 CSS 变量；字体在 astro.config.ts 的 fonts 配置里通过 Astro Fonts API 自托管；Logo 是 src/components/Logo.astro。这些变量同时喂给 shadcn/ui 兼容的设计 token。

真的能让 AI 助手直接改吗？

仓库自带 AGENTS.md 约定与 .agents/skills/ 下 16 个分步技能（关博客、换 OG 图、子路径部署、接 CMS、部署 Cloudflare 等），Claude Code、Codex、Cursor 都能按指南可靠完成任务。

能部署到哪里，需要付费吗？

任何能托管静态文件的地方：Vercel、Netlify、Cloudflare Workers、GitHub Pages、nginx 容器（仓库自带 Dockerfile）或自己的服务器。模板采用 MIT 许可，个人与商业项目都免费。

6.1
GitHub Star
1.7
Fork 数量（千）
37
现成页面区块
100
Lighthouse 评分

Astro + 
Tailwind CSS

免费、开源、生产可用。克隆下来，换成你的内容，然后部署。

获取模板