Astro启动器

velocity — Astro 启动器模板

作者 southwellmedia

Velocity 是 Southwell Media 开源的 Astro 启动器，内置 Tailwind CSS、TypeScript、组件库、内容集合与 SEO 工具，采用 MIT 许可。

打开源站下载源码 ZIP

看看你的网站会是什么样

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

3 个预览视图
桌面端首页1 / 3
桌面端截图首屏预览

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

全部页面与视图 3

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

采集于 2026-10-03查看来源

值得关注的模板亮点

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

01

提供 57 个组件，覆盖 UI、patterns、layout、blog、landing、seo 等 7 个类别，均带类型并适配深色模式

02

设计令牌系统使用 OKLCH 颜色与流式排版，内置 default 和 midnight 两套主题

03

SEO 工具包含 meta 标签、JSON-LD、sitemap、robots.txt 与自动生成的 OG 图片

04

内容集合覆盖博客、页面、作者和 FAQ，使用 Zod 做类型安全校验

05

包含联系表单与 newsletter 的 API 路由，并可按需使用 React islands 增加客户端交互

06

采用 MIT 许可，允许免费使用、修改、商用和分发，需保留版权与许可声明

模板详细介绍

Velocity 是一个基于 Astro 的启动器模板，仓库由 southwellmedia 维护，采用 MIT 许可，可免费使用、修改、商用和分发，分发时需保留版权与许可声明。模板在 Astro 之上集成 Tailwind CSS 与 TypeScript，提供 57 个组件（分布在 UI、patterns、layout、blog、landing、seo 等目录）、基于 OKLCH 颜色与流式排版的设计令牌系统、default 与 midnight 两套主题，以及类型安全的博客、页面、作者、FAQ 内容集合（使用 Zod 校验）。SEO 方面包含 meta 标签、JSON-LD、sitemap、robots.txt 与自动生成的 OG 图片；另有联系表单和 newsletter 的 API 路由，并可按需引入 React islands 实现客户端交互。i18n 方面，仓库内置 locale 感知的 schema，完整多语言支持需通过配套 CLI 创建项目。使用前需注意：需要 Node 22.12 及以上版本，包管理器示例为 pnpm；演示图片、字体、图标等第三方素材的许可需单独核对，域名、托管等外部服务可能另行收费。

Astro启动器

适合你的项目吗？

适用场景

  • 搭建以内容为主的营销站点或博客，直接复用其博客、作者与 SEO 结构
  • 需要组件库与设计令牌体系作为起点的 Astro 项目
  • 希望用内容集合与 Zod 校验管理博客、页面、FAQ 等结构化内容
  • 需要联系表单或 newsletter 接口，并可按需加入 React 交互的站点

适合人群

  • 熟悉 Astro、Tailwind CSS 与 TypeScript 的开发者
  • 需要 MIT 许可、可自由修改和商用的启动模板的团队
  • 计划以内容集合方式组织博客与页面内容的项目
  • 希望先使用默认主题、再按设计令牌自定义外观的站点

上手与定制指南

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

  1. 1

    需要 Node 22.12 及以上版本，README 中的命令以 pnpm 为例

  2. 2

    克隆仓库后执行 pnpm install，并复制 .env.example 为 .env 完成环境变量配置

  3. 3

    站点信息在 src/config/site.config.ts 中配置，设计令牌与主题分别位于 src/styles/tokens/ 和 src/styles/themes/

  4. 4

    开发模式下可访问 /components 查看全部组件

  5. 5

    完整 i18n 支持需通过配套 CLI（pnpm create velocity-astro）创建项目

查看仓库使用说明

授权与来源资料

使用条件与限制

免费使用 · 保留许可声明

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

使用时需要遵守

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

额外费用与待核对事项

  • 使用该模板需要 Node.js 22.12 或更高版本，低于此版本的运行环境无法按 README 的步骤安装与开发。
  • 仓库内置的仅为 locale 感知 schema，完整的多语言（i18n）功能需通过配套 CLI（pnpm create velocity-astro）创建项目才能获得，直接克隆本仓库不包含完整 i18n。
  • 使用前需复制 .env.example 为 .env 并配置环境变量，联系表单、newsletter 等 API 路由依赖相应配置才能正常工作。
  • 演示图片、字体、图标及其他第三方素材需按各自许可核对，不能仅凭代码的 MIT 许可判断。
  • 域名、托管、数据库、支付或 AI 等外部服务可能另外收费。
查看原文依据

Permission is hereby granted, free of charge

许可证原文

Install (requires Node 22.12+)

README 原文

Or use the CLI for the full experience including i18n:

README 原文

cp .env.example .env

README 原文
https://github.com/southwellmedia/velocity/blob/main/LICENSEhttps://github.com/southwellmedia/velocity/blob/main/README.md

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

项目核对记录与介绍依据

模板资料

来源平台
Astro Themes
资料与维护参考分
资料较完整 · 87 / 100
技术栈
Astro
网站类型
启动器
这个分数如何计算

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

这个项目需要核对什么

记录的仓库更新时间
2026-04-08
截图检查日期
2026-10-03

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

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

查看具体选型方法 →

介绍的制作与核对状态

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

审核声明: [email protected] · 2026-10-04

查看当时使用的来源资料

SHA-256: 02ff331e3b29d0f81be42a5dacacfb8ff06921cb1cf288384d4e984c0aa78e38

2026-10-03T23:09:14.764Z

来源文件 / 仓库
<p align="center">
  <img src="src/assets/branding/logo-full.svg" alt="Velocity" width="370" />
</p>

<p align="center">
  <strong>Astro 6 Boilerplate</strong> — A production-ready starter template built on Astro 6 and Tailwind CSS v4.
</p>

<p align="center">
  <a href="https://astro.build"><img src="https://img.shields.io/badge/Astro-6.0-bc52ee?logo=astro&logoColor=white" alt="Astro" /></a>
  <a href="https://tailwindcss.com"><img src="https://img.shields.io/badge/Tailwind-4.0-38bdf8?logo=tailwindcss&logoColor=white" alt="Tailwind CSS" /></a>
  <a href="https://www.typescriptlang.org"><img src="https://img.shields.io/badge/TypeScript-5.7-3178c6?logo=typescript&logoColor=white" alt="TypeScript" /></a>
  <a href="LICENSE"><img src="https://img.shields.io/badge/License-MIT-22c55e" alt="License" /></a>
</p>

---

## What's Included

- **57 components** across 7 categories — all accessible, typed, and dark-mode ready
- **Design token system** with OKLCH colors, fluid typography, and two built-in themes
- **SEO toolkit** — meta tags, JSON-LD, sitemap, robots.txt, and auto-generated OG images
- **Content collections** — type-safe blog, pages, authors, and FAQs with Zod validation
- **API routes** — contact form and newsletter endpoints with validation
- **React islands** — optional client-side interactivity where needed
- **i18n-ready** — locale-aware schemas; full i18n via the [CLI](https://github.com/southwellmedia/create-velocity-astro)

---

## Quick Start

```bash
# Clone
git clone https://github.com/southwellmedia/velocity.git my-project
cd my-project

# Install (requires Node 22.12+)
pnpm install

# Configure
cp .env.example .env

# Develop
pnpm dev
```

Or use the CLI for the full experience including i18n:

```bash
pnpm create velocity-astro my-project
```

---

## Commands

| Command | Description |
|---------|-------------|
| `pnpm dev` | Start dev server |
| `pnpm build` | Production build |
| `pnpm preview` | Preview production build |
| `pnpm check` | Astro type checker |
| `pnpm lint` | ESLint |
| `pnpm format` | Prettier |
| `pnpm test` | Vitest |
| `pnpm test:e2e` | Playwright E2E |

---

## Project Structure

```
src/
  components/
    ui/           # 31 UI components (form, data-display, feedback, overlay, etc.)
    patterns/     # 7 composed patterns (ContactForm, SearchInput, StatCard, etc.)
    layout/       # Header, Footer, ThemeToggle, Analytics
    blog/         # ArticleHero, BlogCard, ShareButtons, RelatedPosts
    landing/      # Credibility, TechStack, FeatureTabs, and more
    seo/          # SEO, JsonLd, Breadcrumbs
  content/        # Blog posts, authors, FAQs
  config/         # Site and navigation config
  styles/         # Global CSS and design tokens
  pages/          # Routes, API endpoints, OG image generation
```

---

## Configuration

**Site config**: `src/config/site.config.ts` — name, description, URL, social links

**Design tokens**: `src/styles/tokens/` — colors, typography, spacing

**Themes**: `src/styles/themes/` — switch between `default` and `midnight`, or create your own

**Environment**: `.env` — see `.env.example` for available variables

View all components at `/components` in development.

---

## Contributing

1. Fork the repo
2. Create a feature branch
3. Ensure `pnpm lint` and `pnpm check` pass
4. Open a PR

---

## License

MIT — see [LICENSE](LICENSE) for details.

---

**Links**: [Docs](https://github.com/southwellmedia/velocity-docs) | [CLI](https://github.com/southwellmedia/create-velocity-astro) | [Astro](https://docs.astro.build) | [Tailwind v4](https://tailwindcss.com/docs)

**Built by [Southwell Media](https://southwellmedia.com)**
反馈内容错误

看看同类模板

对比同技术栈与用途的模板，找到更适合的视觉与内容结构。

astrowind

astrowind

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

Astro · 博客

accessible-astro-starter

accessible-astro-starter

Accessible Astro Starter 是一个以无障碍为核心理念的 Astro 6 启动模板，由 incluud 团队维护。

Astro · 博客

astro-erudite

astro-erudite

An opinionated, unstyled static blogging template built with Astro and native CSS.

Astro · 作品集

astro-shopify

astro-shopify

astro-shopify 是一个面向开发者的轻量级电商启动模板，用于构建基于 Shopify 的无头店面。

Astro · 电商

brutal

brutal

A neobrutalism Astro starter theme

Astro · 启动器

qwind

qwind

⭕️ Qwind: A template to make your website using Qwik + Tailwind CSS.

Astro · 工具站