轻量、极速、现代的静态网站生成框架。
一文带你从安装到实战，彻底掌握 Astro。
Astro 是什么？
Astro是一个现代的前端框架，用来构建静态网站和内容驱动的项目（如博客、文档站、作品集等）。它最大的特点是：
- 🪶零 JavaScript by default：默认不加载前端 JS。
- ⚡️极快的加载速度：只渲染必要的部分。
- 🧩支持多框架组件混用：可以在同一个项目中使用 React、Vue、Svelte、Solid 等。
- 📝内置 Markdown / MDX 支持。
- 🌐SEO 友好：生成纯静态 HTML。
一句话总结：
Astro = Markdown + 组件化 + 极快静态网站生成。
安装与项目初始化
1. 环境要求
- Node.js ≥ 18
- npm、pnpm 或 yarn 均可
推荐使用 pnpm：
npminstall-gpnpm2. 创建项目
运行命令：
pnpmcreate astro@latest选择：
✔ Where should we create your new project?(你想创建的项目名？)› my-astro-blog ✔ How would you like to start your new project?(使用哪个模板？)› Blog ✔ Install dependencies?(安装依赖？)› Yes ✔ Initialize a newgitrepository?(初始化git仓库？)› Yes进入项目目录：
cdmy-astro-blogpnpmdev浏览器访问http://localhost:4321
🎉 你的 Astro 网站已经运行起来了！
项目结构
Astro 默认目录结构如下：
my-astro-blog/├──public/# 静态资源（图片、字体等） ├── src/│ ├── components/# 组件目录 │ ├── layouts/# 布局组件 │ ├── pages/# 页面目录(对应路由)│ ├── content/# Markdown 内容目录 │ └── styles/# 样式文件 ├── astro.config.mjs # Astro 配置文件 ├── package.json └── tsconfig.jsonAstro 基础语法
Astro 文件的后缀名是.astro，它既可以写 HTML，也能嵌入 JS 逻辑。
1. 文件结构
一个.astro文件分为两部分：
--- const title = "Hello Astro!" ---<html><head><title>{title}</title></head><body><h1>{title}</h1></body></html>---之间是前端脚本区（Astro Script Block），支持 JS/TS。
下方是模板区，用于写 HTML（可插入{}表达式）。
2. 模板语法
--- const items = ['Coffee', 'Tea', 'Juice'] ---<ul>{items.map(item =><li>{item}</li>)}</ul>- 使用
{}包裹 JS 表达式 - 支持条件、循环、模板插值
3. 组件导入
Astro 支持多种组件：
--- import Header from '../components/Header.astro' import Footer from '../components/Footer.astro' ---<Header/><main><h1>Welcome!</h1></main><Footer/>也可以混用 React、Vue 等框架的组件：
--- import Counter from '../components/Counter.jsx' ---<Counterclient:load/>这里的client:load指定在浏览器端渲染组件。
Astro 提供多种渲染策略：
| 指令 | 说明 |
|---|---|
client:load | 页面加载后执行 |
client:idle | 页面空闲时执行 |
client:visible | 滚动到可视区域后加载 |
client:only="react" | 仅客户端渲染 React 组件 |
4. 布局组件（Layout）
Astro 的布局非常直观。
创建一个src/layouts/BaseLayout.astro：
--- const { title } = Astro.props ---<html><head><metacharset="UTF-8"/><title>{title}</title></head><body><header>🌅 Dawn Café</header><slot/><footer>© 2025 LeiHou</footer></body></html>页面中使用：
--- import BaseLayout from '../layouts/BaseLayout.astro' ---<BaseLayouttitle="About Us"><h1>关于我们</h1><p>这里是Dawn Café的故事...</p></BaseLayout>使用 Markdown 创建博客内容
Astro 内置 Markdown 支持，你只需要在src/content/blog/下新建.md文件。
1. 示例文章
src/content/blog/first-post.md--- title: "我的第一篇Astro博客" pubDate: 2025-10-28 description: "学习Astro框架，从安装到搭建博客" author: "雷猴世界" --- 欢迎来到我的第一篇Astro博客！ 这是一个超快、现代、静态的博客框架。2. 创建博客列表页面
src/pages/blog.astro --- import BaseLayout from '../layouts/BaseLayout.astro' import { getCollection } from 'astro:content' const posts = await getCollection('blog') ---<BaseLayouttitle="博客列表"><h1>📝 博客列表</h1><ul>{posts.map(post => (<li><ahref={`/blog/${post.slug}/`}>{post.data.title}</a><small>{post.data.pubDate}</small></li>))}</ul></BaseLayout>Astro 会自动根据 Markdown 文件生成静态路径。
访问/blog即可看到博客列表。
3. 单篇文章模板
src/pages/blog/[slug].astro --- import BaseLayout from '../../layouts/BaseLayout.astro' import { getCollection } from 'astro:content' const posts = await getCollection('blog') const post = posts.find(p => p.slug === Astro.params.slug) ---<BaseLayouttitle={post.data.title}><article><h1>{post.data.title}</h1><p>{post.data.description}</p><post.Content/></article></BaseLayout>部署与优化
1. 构建
pnpm build生成的静态文件在dist/目录。
2. 预览
pnpm preview3. 部署到 Netlify / Vercel
直接推送到 GitHub，然后在 Vercel 或 Netlify 上导入仓库即可自动部署。
（Astro 官方推荐 Vercel。）
具体的操作步骤放在下一篇文章讲解～
📘 官方文档：https://docs.astro.build
💬 社区：https://astro.build/blog
Astro 可快速构建 SEO 友好的静态网站，还支持多框架组件混用，落地时要考虑部署、组件复用的工程效率问题。试试RollCode 低代码平台，轻松实现私有化部署、自定义组件、静态页面发布（SSG + SEO）。
