用 AstroWind 入门，使用 Astro 和 Tailwind CSS 搭建网站

AstroWind 是一个面向 Astro 和 Tailwind CSS 的免费开源模板。它给你一个完整的营销站点：博客、深色模式、优化过的图片和 SEO 元数据，由你在页面里组合的、带类型的组件构成。这篇指南带你从空文件夹走到已部署的站点，一步一步来。如果你不想自己做这些步骤，模板已经为 AI 编程助手准备好了：把工作交给 Claude Code、Cursor 或类似工具，等你想知道它做了什么时再回到这里。

你会做出这些

• 一份在本地运行的模板副本，带上你的名称、颜色和菜单。
• 用模板组件拼出来的首页。
• 你的第一篇博客，会出现在列表里、带上标签，并进入 RSS。
• 部署到 Vercel、Netlify，或任何提供静态文件的主机上的静态构建。

运行 Astro 需要什么

• Node.js 22。 package.json 的 engines 字段写了确切的最低版本；.nvmrc 固定了主版本，所以 nvm use 会给你一个兼容的版本。
• 一个终端和一个编辑器。装了 Astro 扩展的 Visual Studio Code 会在 .astro 文件里提供高亮和补全。
• 如果想用最后的一键部署，需要一个 GitHub 账号。

创建 Astro + Tailwind 项目

Astro CLI 可以从任意 GitHub 仓库生成项目：

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

回答提示（项目文件夹、是否安装依赖、是否初始化 git），然后：

cd my-site
npm run dev

打开 http://localhost:4321。你看到的是演示站：一个首页、几个备选首页、一组落地页、一个演示博客，以及常见的关于、服务、定价、联系和法律页面。你看到的每一样都是可以编辑的文件，开发服务器会在保存时重新加载。

AstroWind 模板里东西都在哪

你几乎所有时间都会花在 src/：

模板自己的机制在 vendor/integration/。你不需要碰它。

最先改的三个文件

src/config.yaml。 改 site.name 和 site.site（你的最终 URL，站点地图、RSS 和 Open Graph 标签需要它），然后改默认的 metadata.title 和 metadata.description。apps.blog 这一块控制博客：不想要博客就设 isEnabled: false，或者改 postsPerPage 和 permalink 模式。

src/navigation.ts。 用你自己的页面替换演示菜单。每一项是 { text, href }；站内链接用 getPermalink('/about')，这样以后部署到子目录时也会遵守 base path。

src/components/CustomStyles.astro。 你的品牌色：--aw-color-primary、--aw-color-secondary 和 --aw-color-accent，再加上文字色和背景色，浅色和深色各一份。模板里的一切都读这些变量。字体在 astro.config.ts 里声明（fonts 项，由 Astro 的 Fonts API 提供），并映射到 CustomStyles.astro 里的 --aw-font-* 变量。定制指南会把这些讲透。

改首页

打开 src/pages/index.astro。一个页面就是一个布局，再加上一叠用 props 配置的组件：

---
import Layout from '~/layouts/PageLayout.astro';
import Hero from '~/components/widgets/Hero.astro';
import Features from '~/components/widgets/Features.astro';
import CallToAction from '~/components/widgets/CallToAction.astro';

const metadata = {
  title: 'Acme: invoices without the spreadsheet',
  description: 'Send, track and reconcile invoices in one place.',
};
---

<Layout metadata={metadata}>
  <Hero
    tagline="Invoicing"
    title="Invoices without the spreadsheet"
    subtitle="Send, track and reconcile in one place."
    actions={[{ variant: 'primary', text: 'Start free', href: '#pricing' }]}
    image={{ src: '~/assets/images/hero-image.png', alt: 'Product screenshot' }}
  />

  <Features
    id="features"
    title="What you get"
    items={[
      { title: 'Recurring invoices', description: 'Set it once.', icon: 'tabler:repeat' },
      { title: 'Payment links', description: 'Card or bank transfer.', icon: 'tabler:credit-card' },
    ]}
  />

  <CallToAction title="Ready?" actions={[{ variant: 'primary', text: 'Start free', href: '/signup' }]} />
</Layout>

大多数区块组件共用同一组基础 props：title、subtitle、tagline、用于锚点的 id，以及用于自定义背景的 bg 插槽。图标来自 Tabler，通过 astro-icon 使用。区块组件的清单、主要 props，以及每个组件在哪个演示页里用到，写在 .agents/skills/use-widgets.md；src/pages/landing/ 下的落地页展示了把它们拼成完整页面的样子，落地页指南解释了背后的思路。

发布第一篇文章

创建 src/data/post/hello-world.md：

---
publishDate: 2026-08-24T00:00:00Z
title: Hello, world
excerpt: The first post on the new site.
image: ~/assets/images/hello.jpg
imageAlt: The team at the launch party
category: News
tags:
  - company
author: Your name
---

Write in Markdown. Headings, lists, tables, code blocks and images all work;
use the `.mdx` extension to embed components.

文章会出现在 /hello-world（config.yaml 里的 permalink 决定具体模式）、博客列表、它的分类页和标签页、RSS 和站点地图里，Open Graph 标签和结构化数据也会替你生成。draft: true 会在你还在写的时候把文章排除在构建之外；updateDate 标记一次修订，显示在标题下方，并提供给搜索引擎。Markdown 演示文章展示了每种元素渲染出来的样子。

检查并构建

npm run check   # astro check, ESLint and Prettier
npm run build   # static site in dist/
npm run preview # serve dist/ locally

构建结果是完全静态的：dist/ 是一个文件夹，里面是 HTML、CSS、JavaScript 和优化过的图片，任何 Web 服务器都能托管。

部署你的 Astro 站点（Vercel、Netlify、Cloudflare）

• Vercel 或 Netlify： 连接仓库；两者都会识别 Astro，用 npm run build，输出目录是 dist/。README 里有这两个以及其他主机的一键按钮。
• Cloudflare Pages、GitHub Pages，或任何静态主机： 上传 dist/。需要额外设置的两种情况，分别由 .agents/skills/ 里的 deploy-cloudflare 和 deploy-with-base-path 技能说明。
• 你自己的服务器： 仓库包含一个 Dockerfile，用 nginx 提供 dist/。

第一次部署之后，如果还没改过，把 config.yaml 里的 site.site 设成真实 URL，这样规范链接、站点地图和社交预览才会指向正确的地方。

接下来

• 把模板改成你的品牌：颜色、字体、Logo、网站图标。
• 模板内部是怎么工作的：集成、永久链接、图片和元数据。
• 做一个能转化的落地页：六个落地页示例背后的指南。
• 在用 AI 编程助手？仓库带有 AGENTS.md 和 .agents/skills/ 里的分步技能，让助手遵守模板的约定。怎样用得最好。