Astro博客工具站企业官网启动器

astrowind — Astro 博客模板

作者 arthelokyo

AstroWind 是一个基于 Astro 与 Tailwind CSS 的免费开源网站模板，提供博客、企业官网与工具站所需的页面组件和配置，采用 MIT 许可发布。

打开源站下载源码 ZIP

看看你的网站会是什么样

浏览真实页面截图，比较内容排版与手机效果。点击下方缩略图切换，放大查看整页细节。

3 个预览视图

桌面端首页1 / 3

访问演示网站在新标签页打开

桌面端截图首屏预览

由服务器浏览器实际访问页面后截取。

全部页面与视图 3

截图用于了解视觉与布局，交互效果请以实际项目为准。

采集于 2026-09-30查看来源

值得关注的模板亮点

从已有项目资料中，快速了解它的特点。

提供 30 多个带类型化 props 的页面区块组件，覆盖 hero、features、bento、tabs、pricing、FAQ、testimonials、team、timeline、gallery、projects、countdown、newsletter 等常见版块

博客支持 Markdown 与 MDX 内容、分类与标签、RSS 订阅、社交分享及相关文章，内容文件存放在 src/data/post/ 下

通过 src/config.yaml 集中配置站点信息、SEO 元数据、Open Graph、Twitter 卡片、i18n 语言与文字方向、博客分页与固定链接

基于 CSS 变量与 Tailwind 主题令牌定制颜色和字体，支持深色模式与 RTL，并提供 shadcn/ui 兼容的设计令牌

仓库包含 AGENTS.md 与 .agents/skills/，为 AI 编码助手提供项目约定和常见任务的步骤说明

构建产物输出到 dist 目录，可手动部署到任意静态托管服务，也提供 Netlify、Vercel、Cloudflare Workers 的部署入口

模板详细介绍

AstroWind 是一个免费开源的 Astro 起始主题，用于搭建博客、企业官网或工具类站点。仓库采用 MIT 许可，代码可免费使用、修改、商用和分发，但演示图片、字体、图标等第三方素材需单独核对许可。模板内置 30 多个页面区块组件（hero、features、bento、tabs、pricing、FAQ、testimonials、team、timeline、gallery、projects、countdown、newsletter 等），组件带类型化 props，可组合使用。博客功能支持 Markdown 与 MDX 内容、分类与标签、RSS 订阅、社交分享、相关文章，内容文件放在 src/data/post/ 下，构建时读取。站点配置集中在 src/config.yaml，可设置站点名称、基础路径、SEO 元数据、Open Graph、Twitter 卡片、i18n 语言与文字方向、博客分页与固定链接、分类与标签路径、分析工具等。设计定制通过 CSS 变量与 Tailwind 主题令牌完成，涉及 CustomStyles.astro、tailwind.css 和 shadcn.css 三个文件，支持深色模式与 RTL。模板使用 output: 'static' 静态输出，博客页面需要 prerender = true 才能正常工作；运行需要 Node.js 22.22.3 或更新版本。仓库还包含 AGENTS.md 与 .agents/skills/ 目录，为 Claude Code、Codex、Cursor 等工具提供项目约定和常见任务的操作步骤。部署方面，构建产物输出到 dist 目录，可手动部署到任意静态托管服务，也提供 Netlify、Vercel、Cloudflare Workers 的一键部署入口。

Astro博客工具站企业官网启动器

适合你的项目吗？

适用场景

搭建以 Markdown 或 MDX 撰写内容的博客，需要分类、标签、RSS 和社交分享
制作企业官网或产品落地页，使用现成的页面区块组合出首页与内页
作为 Astro 项目的起始模板，在此基础上增删组件和页面
需要深色模式、RTL 或 shadcn/ui 风格设计令牌的站点
希望借助 AGENTS.md 与 .agents/skills/ 让 AI 编码助手协助完成常见配置和内容调整

适合人群

熟悉 Astro 或愿意学习 Astro 的开发者
需要免费开源、MIT 许可模板的个人或团队
以静态输出为主、内容以 Markdown/MDX 维护的博客或官网项目
希望使用 Tailwind CSS 进行样式定制的前端开发者
使用 Claude Code、Codex、Cursor 等 AI 编码助手辅助开发的团队

上手与定制指南

结合仓库当前版本的说明，按下面的资料检查内容、配置与运行要求。

1
需要 Node.js 22.22.3 或更新版本，可参考仓库中的 .nvmrc
2
使用 npm create astro@latest -- --template arthelokyo/astrowind 创建项目，或克隆仓库后运行 npm install
3
常用命令包括 npm run dev（本地开发服务器）、npm run build（构建到 dist）、npm run preview（本地预览构建结果）、npm run check（检查错误）、npm run fix（运行 Eslint 和 Prettier）
4
模板当前使用 output: 'static'，博客页面需要 prerender = true 才能正常工作
5
演示图片、字体、图标等第三方素材需按各自许可核对，域名、托管等外部服务可能另外收费

查看仓库使用说明

授权与来源资料

使用条件与限制

免费使用 · 保留许可声明

本次收录的是公开仓库中采用 MIT 许可的免费版本；免费范围为该版本代码，不代表外部服务或第三方素材免费。

使用时需要遵守

允许免费使用、修改、商用和分发该版本代码。
分发代码副本或实质性部分时，保留原作者版权声明和完整 MIT 许可声明。
代码按现状提供；担保与责任限制以原许可证及适用法律为准。

额外费用与待核对事项

运行环境要求 Node.js 22.22.3 或更高版本，低于该版本无法正常安装和构建。
模板当前为静态输出模式，博客功能仅在 prerender = true 时可用，否则博客页面无法正常生成。
v1 处于维护模式，仅接收依赖更新与缺陷修复，新功能开发转向 v2，长期使用需考虑后续迁移。
代码采用 MIT 许可，可免费使用、修改、商用和分发，但需保留版权与许可声明。
演示图片、字体、图标及其他第三方素材需按各自许可核对，不能仅凭代码的 MIT 许可判断。
域名、托管、数据库、支付或 AI 等外部服务可能另外收费。

查看原文依据

Permission is hereby granted, free of charge
许可证原文

Requires **Node.js >= 22.22.3** (see `.nvmrc`)
README 原文

The template currently uses `output: 'static'`, but the blog only works with `prerender = true`.
README 原文

**Is AstroWind v1 still maintained?** Yes, in maintenance mode: v1 receives dependency updates and bug fixes, while new development goes to AstroWind v2 (October 2026).
README 原文

**AstroWind** is licensed under the MIT license — see the [LICENSE](./LICENSE.md) file for details.
README 原文

https://github.com/arthelokyo/astrowind/blob/main/LICENSE.md https://github.com/arthelokyo/astrowind/blob/main/README.md

DeepSeek 根据仓库许可证和 README 整理 ·2026-10-01。结果仅覆盖已读取资料，依赖、图片、字体及后续条款变更以各自原文为准。

项目核对记录与介绍依据

模板资料

来源平台: GitHub
资料与维护参考分: 资料较完整 · 100 / 100
技术栈: Astro
网站类型: 博客 · 工具站 · 企业官网 · 启动器

这个分数如何计算

本站按许可资料（最高30分）、演示链接（12分）、预览图（10分）、Star数（15分）、记录的维护时间（15分）、描述完整度（8分）、功能记录（5分）和分类资料（5分）计算。它不是代码、安全或性能测试，也不是 Google 评分；有链接不代表已实测可用。

这个项目需要核对什么

记录的仓库更新时间: 2026-09-12
截图检查日期: 2026-10-01

已收录演示链接。请用你的内容与屏幕尺寸检查；有演示不代表表单、认证或支付已经可用。

目录记录的主要技术栈是 Astro。请通过依赖清单和锁文件核对实际版本与托管要求。这些说明基于收录资料，不代表代码审计或部署实测。

查看具体选型方法 →

介绍的制作与核对状态

介绍由 AI 辅助整理目录与仓库资料。仓库作者不等于这篇介绍的审核者。

已完成服务器许可规则与 AI 来源核对；未经过人工编辑审核。

查看当时使用的来源资料

SHA-256: 4acf123e6673fbe13ef218b12c1ffee5a496e274df5d582c57e175f9783be510

2026-10-01T13:35:17.293Z

来源文件 / 仓库

# 🚀 AstroWind

<picture>
  <source media="(prefers-color-scheme: dark)" srcset=".github/assets/lighthouse-dark.svg">
  <img src=".github/assets/lighthouse-light.svg" align="right" alt="Lighthouse scores: Performance 100, Accessibility 100, Best Practices 100, SEO 100" width="100" height="358">
</picture>

🌟 _Most *starred* & *forked* Astro theme in 2022, 2023, 2024 & 2025_. 🌟

**AstroWind** is a free and open-source template to make your website using **[Astro v7](https://astro.build/) + [Tailwind CSS v4](https://tailwindcss.com/)**. Ready to start a new project and designed taking into account web best practices.

- ✅ **Production-ready** scores in **PageSpeed Insights** reports.
- ✅ **30+ page-section widgets** (heroes, features, bento, tabs, pricing with comparison table, FAQ accordion, testimonials, team, timeline, gallery, projects, countdown, newsletter…) typed and composable.
- ✅ Integration with **Tailwind CSS v4** supporting **Dark mode** and **_RTL_**.
- ✅ **Fast and SEO friendly blog** with automatic **RSS feed**, **MDX** support, **Categories & Tags**, **Social Share**, ...
- ✅ **Image Optimization** (using new **Astro Assets** and **Unpic** for Universal image CDN).
- ✅ Generation of **project sitemap** based on your routes.
- ✅ **Open Graph tags** for social media sharing.
- ✅ **Analytics** built-in Google Analytics integration.
- ✅ **shadcn/ui-compatible design tokens** (`bg-background`, `text-foreground`, `border-border`…) derived from the theme variables.
- ✅ **AI-ready**: `AGENTS.md` and step-by-step skills in `.agents/skills/` for Claude Code, Codex, Cursor and similar tools.

<br>

![AstroWind Theme Screenshot](https://raw.githubusercontent.com/arthelokyo/.github/main/resources/astrowind/screenshot-astrowind-readme-def-v1.png)

[![arthelokyo](https://custom-icon-badges.demolab.com/badge/made%20by%20-arthelokyo-556bf2?style=flat-square&logo=arthelokyo&logoColor=white&labelColor=101827)](https://arthelokyo.com)
[![License](https://img.shields.io/github/license/arthelokyo/astrowind?style=flat-square&color=dddddd&labelColor=000000)](https://github.com/arthelokyo/astrowind/blob/main/LICENSE.md)
[![Maintained](https://img.shields.io/badge/maintained%3F-yes-brightgreen.svg?style=flat-square)](https://github.com/arthelokyo)
[![Contributions Welcome](https://img.shields.io/badge/contributions-welcome-brightgreen.svg?style=flat-square)](https://github.com/arthelokyo/astrowind#contributing)
[![Known Vulnerabilities](https://snyk.io/test/github/arthelokyo/astrowind/badge.svg?style=flat-square)](https://snyk.io/test/github/arthelokyo/astrowind)
[![Stars](https://img.shields.io/github/stars/arthelokyo/astrowind.svg?style=social&label=stars&maxAge=86400&color=ff69b4)](https://github.com/arthelokyo/astrowind)
[![Forks](https://img.shields.io/github/forks/arthelokyo/astrowind.svg?style=social&label=forks&maxAge=86400&color=ff69b4)](https://github.com/arthelokyo/astrowind)

<br>

<details open>
<summary>Table of Contents</summary>

- [Demo](#demo)
- [TL;DR](#tldr)
- [Getting started](#getting-started)
  - [Project structure](#project-structure)
  - [Commands](#commands)
  - [Configuration](#configuration)
  - [Deploy](#deploy)
- [FAQ](#faq)
- [Contributing](#contributing)
- [Acknowledgements](#acknowledgements)
- [License](#license)

</details>

<br>

## Demo

📌 [https://astrowind.vercel.app/](https://astrowind.vercel.app/)

<br>

## TL;DR

```shell
npm create astro@latest -- --template arthelokyo/astrowind
```

## Getting started

**AstroWind** tries to give you quick access to creating a website using [Astro v7](https://astro.build/) + [Tailwind CSS v4](https://tailwindcss.com/). It's a free theme which focuses on simplicity, good practices and high performance.

Very little vanilla javascript is used only to provide basic functionality so that each developer decides which framework (React, Vue, Svelte, Solid JS...) to use and how to approach their goals.

> **Note:** Requires **Node.js >= 22.22.3** (see `.nvmrc`). The template currently uses `output: 'static'`, but the blog only works with `prerender = true`.

### Project structure

Inside **AstroWind** template, you'll see the following folders and files:

```
/
├── .agents/
│   └── skills/
├── AGENTS.md
├── public/
│   ├── _headers
│   └── robots.txt
├── src/
│   ├── assets/
│   │   ├── favicons/
│   │   ├── images/
│   │   └── styles/
│   │       ├── shadcn.css
│   │       └── tailwind.css
│   ├── components/
│   │   ├── blog/
│   │   ├── common/
│   │   ├── ui/
│   │   ├── widgets/
│   │   │   ├── Header.astro
│   │   │   └── ...
│   │   ├── CustomStyles.astro
│   │   ├── Favicons.astro
│   │   └── Logo.astro
│   ├── content.config.ts
│   ├── data/
│   │   └── post/
│   │       ├── post-slug-1.md
│   │       ├── post-slug-2.mdx
│   │       └── ...
│   ├── layouts/
│   │   ├── Layout.astro
│   │   ├── MarkdownLayout.astro
│   │   └── PageLayout.astro
│   ├── pages/
│   │   ├── [...blog]/
│   │   │   ├── [category]/
│   │   │   ├── [tag]/
│   │   │   ├── [...page].astro
│   │   │   └── index.astro
│   │   ├── index.astro
│   │   ├── 404.astro
│   │   ├-- rss.xml.ts
│   │   └── ...
│   ├── utils/
│   ├── config.yaml
│   └── navigation.ts
├── package.json
├── astro.config.ts
└── ...
```

Astro looks for `.astro` or `.md` files in the `src/pages/` directory. Each page is exposed as a route based on its file name.

There's nothing special about `src/components/`, but that's where we like to put any Astro/React/Vue/Svelte/Preact components.

Any static assets, like images, can be placed in the `public/` directory if they do not require any transformation or in the `assets/` directory if they are imported directly.

[![Edit AstroWind on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://githubbox.com/arthelokyo/astrowind/tree/main) [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/arthelokyo/astrowind)

> 🧑‍🚀 **Seasoned astronaut?** Delete this file `README.md`. Update `src/config.yaml` and contents. Have fun!

<br>

### Commands

All commands are run from the root of the project, from a terminal:

| Command             | Action                                             |
| :------------------ | :------------------------------------------------- |
| `npm install`       | Installs dependencies                              |
| `npm run dev`       | Starts local dev server at `localhost:4321`        |
| `npm run build`     | Build your production site to `./dist/`            |
| `npm run preview`   | Preview your build locally, before deploying       |
| `npm run check`     | Check your project for errors                      |
| `npm run fix`       | Run Eslint and format codes with Prettier          |
| `npm run astro ...` | Run CLI commands like `astro add`, `astro preview` |

<br>

### Configuration

Basic configuration file: `./src/config.yaml`

```yaml
site:
  name: 'Example'
  site: 'https://example.com'
  base: '/' # Change this if you need to deploy to Github Pages, for example
  trailingSlash: false # Generate permalinks with or without "/" at the end

  googleSiteVerificationId: false # Or some value,

# Default SEO metadata
metadata:
  title:
    default: 'Example'
    template: '%s — Example'
  description: 'This is the default meta description of Example website'
  robots:
    index: true
    follow: true
  openGraph:
    site_name: 'Example'
    images:
      - url: '~/assets/images/default.png'
        width: 1200
        height: 628
    type: website
  twitter:
    handle: '@twitter_user'
    site: '@twitter_user'
    cardType: summary_large_image

i18n:
  language: en
  textDirection: ltr

apps:
  blog:
    isEnabled: true # If the blog will be enabled
    postsPerPage: 6 # Number of posts per page

    post:
      isEnabled: true
      permalink: '/blog/%slug%' # Variables: %slug%, %year%, %month%, %day%, %hour%, %minute%, %second%, %category%
      robots:
        index: true

    list:
      isEnabled: true
      pathname: 'blog' # Blog main path, you can change this to "articles" (/articles)
      robots:
        index: true

    category:
      isEnabled: true
      pathname: 'category' # Category main path /category/some-category, you can change this to "group" (/group/some-category)
      robots:
        index: true

    tag:
      isEnabled: true
      pathname: 'tag' # Tag main path /tag/some-tag, you can change this to "topics" (/topics/some-category)
      robots:
        index: false

    isRelatedPostsEnabled: true # If a widget with related posts is to be displayed below each post
    relatedPostsCount: 4 # Number of related posts to display

analytics:
  vendors:
    googleAnalytics:
      id: null # or "G-XXXXXXXXXX"

ui:
  theme: 'system' # Values: "system" | "light" | "dark" | "light:only" | "dark:only"
```

<br>

#### Customize Design

With Tailwind CSS v4, all configuration is CSS-first. To customize Font families, Colors or more Elements refer to the following files:

- `src/components/CustomStyles.astro` — CSS variables for colors and fonts
- `src/assets/styles/tailwind.css` — Tailwind theme tokens (`@theme`), custom utilities (`@utility`), and plugins
- `src/assets/styles/shadcn.css` — shadcn/ui-compatible variables (`--background`, `--border`, `--ring`…) derived from the theme, so shadcn-style components pick up your colors

### Deploy

#### Deploy to production (manual)

You can create an optimized production build with:

```shell
npm run build
```

Now, your website is ready to be deployed. All generated files are located at
`dist` folder, which you can deploy the folder to any hosting service you
prefer.

#### Deploy to Netlify

Clone this repository on your own GitHub account and deploy it to Netlify:

[![Netlify Deploy button](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/arthelokyo/astrowind)

#### Deploy to Vercel

Clone this repository on your own GitHub account and deploy to Vercel:

[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Farthelokyo%2Fastrowind)

#### Deploy to Cloudflare

Clone this repository on your own GitHub account and deploy it to Cloudflare Workers (static assets, no adapter needed; the `wrangler.jsonc` in the repo points Cloudflare at `dist/`):

[![Deploy to Cloudflare](https://deploy.workers.cloudflare.com/button)](https://deploy.workers.cloudflare.com/?url=https://github.com/arthelokyo/astrowind)

<br>

## FAQ

**Is AstroWind v1 still maintained?**
Yes, in maintenance mode: v1 receives dependency updates and bug fixes, while new development goes to AstroWind v2 (October 2026).

**How do I disable the blog, change the Open Graph image, deploy under a sub-path, connect a CMS, deploy to Cloudflare…?**
Ask your AI coding assistant. AstroWind is _AI-ready_: the repository ships an [`AGENTS.md`](./AGENTS.md) with the project conventions and step-by-step skills in [`.agents/skills/`](./.agents/skills/) for the most common tasks, so Claude Code, Codex/ChatGPT, Cursor, Copilot and similar tools can do them reliably (and you can read the skills yourself).

**Which widgets are there and how do I use them?**
Every section is a component in `src/components/widgets/` with typed props. The catalogue with props and where each one is demoed is in [`.agents/skills/use-widgets.md`](./.agents/skills/use-widgets.md); the six pages in `src/pages/landing/` show them combined into complete landing pages.

**Where do blog posts go?**
`src/data/post/` as `.md` or `.mdx` files. They are read at build time.

**Where do I change colors and fonts?**
Colors in `src/components/CustomStyles.astro` (CSS variables for light and dark), Tailwind tokens and utilities in `src/assets/styles/tailwind.css`, fonts in the `fonts` entry of `astro.config.ts`.

**Which Node.js version do I need?**
Node.js 22.22.3 or newer (`.nvmrc`).

<br>

## Contributing

If you have any ideas, suggestions or find any bugs, feel free to open a discussion, an issue or create a pull request.
That would be very useful for all of us and we would be happy to listen and take action.

## Acknowledgements

Initially created by [**Arthelokyo**](https://arthelokyo.com) and maintained by a community of [contributors](https://github.com/arthelokyo/astrowind/graphs/contributors).

## License

**AstroWind** is licensed under the MIT license — see the [LICENSE](./LICENSE.md) file for details.

反馈内容错误