Astro

什么是 Astro

Astro 是一款面向内容驱动场景的现代化静态站点框架，由 Astro 团队于 2021 年正式发布，是近年前端生态中热度增长最快的静态站点生成器（SSG）之一。

它以「内容优先、性能优先」为核心设计理念，独创的群岛架构从根本上解决了传统前端框架默认全量加载 JavaScript 的性能问题，默认输出零客户端 JS 的纯静态 HTML，仅在需要交互的位置按需加载脚本，在保持现代组件化开发体验的同时，让站点首屏性能与 SEO 表现接近原生静态页面的天花板。

目前 Astro 已成为内容博客、营销官网、技术文档、品牌展示站等场景的主流选型，被众多企业与开源项目采用。

Astro核心架构

群岛架构（也译作岛屿架构）是 Astro 最核心的技术创新，也是它与其他所有静态站点框架最本质的区别。该概念最早由 Etsy 架构师 Katie Sylor-Miller 提出，经 Preact 作者 Jason Miller 推广，最终由 Astro 实现并带向主流。

1. 核心原理

可以用「静态海洋 + 交互岛屿」来直观理解：

静态海洋：页面绝大多数内容（文章正文、标题、图片、导航等纯展示内容）都会被渲染为纯静态 HTML/CSS，不携带任何 JavaScript，加载速度极快。
交互岛屿：页面中少数需要交互的组件（评论区、搜索框、轮播图、点赞按钮等）作为独立的「岛屿」存在，只有这些岛屿会加载对应的 JS 并独立激活交互能力。

传统前端框架（React/Vue 全家桶）采用全量水合（Hydration）：即使页面 90% 是静态内容，也要加载完整的运行时，重建整个页面的虚拟 DOM 才能实现交互。而 Astro 采用部分水合（Partial Hydration），只给真正需要交互的组件加载 JS，其余内容完全静态，首屏交互时间（TTI）可获得数倍提升。

2. 客户端水合指令

Astro 通过 client:* 指令精确控制每个岛屿组件的加载时机，开发者可以根据组件优先级灵活选择：

指令	触发时机	适用场景
`client:load`	页面加载完成后立即加载	首屏关键交互组件，如导航栏、搜索框
`client:idle`	浏览器空闲时加载	非紧急交互，如评论区、分享按钮
`client:visible`	组件滚动到可视区域时加载	页面下方的组件，如底部表单、推荐卡片
`client:media`	满足指定媒体查询时加载	响应式组件，如移动端专属菜单
`client:only`	仅在客户端渲染，跳过服务端渲染	纯客户端交互、依赖浏览器 API 的组件

3. 进阶：服务器群岛（Server Islands）

在 Astro 5.0 中，群岛架构进一步扩展出服务器群岛能力，将静态与动态的边界从客户端延伸到了服务端。

页面主体内容依然以静态 HTML 形式缓存于 CDN 边缘节点，保证极速访问
少数需要动态个性化的内容（用户头像、购物车、实时评论等）作为独立的服务器岛屿，按需从服务端渲染并注入页面
静态缓存与动态内容互不干扰，既保证了页面整体性能，又解决了纯静态站点无法实现个性化的痛点

Astro核心特性

1. 默认零客户端 JavaScript，极致性能

Astro 构建产物默认是纯 HTML + CSS，没有一行运行时 JavaScript，无需额外优化就能获得极高的 Lighthouse 性能得分，Core Web Vitals 指标天然优秀，是内容站性能的第一梯队方案。只有当你主动为组件添加 client:* 指令时，才会产生 JS 加载。

2. 多框架无感混用，不锁定技术栈

这是 Astro 独有的巨大优势：同一个项目里可以同时使用 React、Vue、Svelte、Preact、Solid、Lit 等任意主流前端框架的组件，无需额外配置，也不会互相冲突。

你可以用 Vue 写导航栏，用 React 写评论区，用 Svelte 写动画组件，所有组件最终都会被统一渲染为静态 HTML，仅在激活时加载对应框架的运行时。团队无需统一技术栈，也能复用各生态的成熟组件资源。

3. 原生内容管理：内容集合 + Markdown/MDX

Astro 原生深度支持内容创作场景，是所有通用框架中内容管理能力最完善的方案之一：

原生支持 Markdown、MDX（在 Markdown 中嵌入组件），支持 GFM 语法、代码高亮、数学公式等扩展
内置内容集合（Content Collections）系统，支持用 Zod Schema 对文章 Front Matter 做类型校验与自动补全，构建时自动检查内容格式错误，避免线上出现字段缺失
支持按目录组织内容，自动生成分类、标签、归档等页面，无需手动配置路由

4. 多渲染模式灵活切换

Astro 不局限于纯静态生成，支持多种渲染模式按需切换，满足不同业务需求：

SSG（静态站点生成）：默认模式，构建时生成全部静态页面，性能最高，适合内容稳定的站点
SSR（服务端渲染）：通过适配器部署到 Node.js、Deno 或边缘运行时，支持动态接口、用户登录等能力
ISR（增量静态再生成）：已发布的静态页面可在后台按需重新渲染，兼顾静态性能与内容时效性
边缘渲染：部署到 Cloudflare Workers、Vercel Edge 等边缘节点，实现全球低延迟动态响应

5. 内置生产级优化

原生图片优化：自动压缩、格式转换、响应式尺寸、懒加载，无需额外插件
CSS 作用域：组件样式默认隔离，避免全局污染，自动合并与压缩
SEO 友好：静态 HTML 天然利于爬虫抓取，内置站点地图、RSS 生成、元数据管理能力
资源预加载、自动内联关键 CSS 等优化开箱即用

6. 优秀的开发体验

基于 Vite 构建，热更新速度极快，开发过程流畅无等待
原生支持 TypeScript，组件与内容均有完整类型提示
统一的 .astro 组件语法，类 HTML 写法，学习门槛低
官方 CLI 提供项目脚手架、集成一键安装等能力

Astro基础使用与核心语法

1. 快速初始化

环境要求：Node.js 18.17.0 及以上版本。在终端执行官方脚手架命令，按提示选择即可创建项目：

bash

npm create astro@latest

启动本地开发服务器：

bash

npm run dev

默认访问 http://localhost:4321 即可预览站点。

2. 项目目录结构

标准 Astro 项目的核心目录如下：

my-astro-site/
├── public/             # 静态资源目录，直接映射到站点根路径
├── src/
│   ├── components/     # 可复用组件（.astro / .vue / .jsx 等）
│   ├── content/        # 内容集合目录，存放 Markdown 文章
│   │   └── config.ts   # 内容集合 Schema 配置文件
│   ├── layouts/        # 页面布局模板
│   └── pages/          # 页面路由目录，文件路径即 URL 路径
├── astro.config.mjs    # Astro 全局配置文件
└── package.json

3. .astro 组件语法

.astro 是 Astro 专属的组件文件格式，语法非常接近 HTML，学习成本极低，整体分为两部分：

astro

---
// 顶部代码围栏：服务端脚本，构建时执行，不会发送到客户端
const title = "我的博客";
const posts = await getCollection("blog");
---

<!-- 下方是模板部分，支持 HTML 语法 + JS 表达式 -->
<main class="container">
  <h1>{title}</h1>
  <ul>
    {posts.map(post => (
      <li><a href={`/post/${post.slug}`}>{post.data.title}</a></li>
    ))}
  </ul>
</main>

<style>
/* 组件内样式，默认作用域隔离 */
.container { max-width: 1200px; margin: 0 auto; }
</style>

顶部 --- 包裹的代码仅在服务端/构建时运行，可直接读取文件、查询数据，不会暴露给客户端
模板使用 {} 插入 JavaScript 表达式，支持循环、条件判断等逻辑
样式默认局部作用域，不会污染全局

4. 文件路由系统

Astro 采用基于文件的自动路由，src/pages/ 目录下的文件路径直接对应页面 URL：

src/pages/index.astro → 站点首页 /
src/pages/about.astro → /about
src/pages/blog/[slug].astro → 动态路由，如 /blog/hello-world
src/pages/blog/[...slug].astro → 捕获所有路由，支持多级路径

Astro核心能力

内容集合是 Astro 管理结构化内容的官方标准方案，相当于为你的 Markdown 内容建立了一张「类型安全的数据表」，是搭建博客、文档站的核心功能。

1. 核心价值

构建时校验：通过 Schema 定义文章必须的字段（标题、日期、标签等），字段缺失或类型错误会在构建时报错，避免线上异常
类型自动推导：TypeScript 自动补全所有内容字段，开发时无需手动定义类型
统一内容查询：通过统一 API 查询所有文章，支持筛选、排序、分页，无需手动读取文件
多内容类型隔离：博客文章、作者信息、文档手册可分为不同集合，各自独立管理

2. 基础配置与使用

创建内容目录：在 src/content/ 下新建集合文件夹，如 blog/，放入所有 Markdown 文章
定义 Schema：在 src/content/config.ts 中配置集合规则：

import { defineCollection, z } from 'astro:content';

const blog = defineCollection({
  type: 'content',
  // 用 Zod 定义文章 Front Matter 的字段与类型
  schema: z.object({
    title: z.string(),
    description: z.string(),
    pubDate: z.coerce.date(),
    tags: z.array(z.string()).default([]),
    draft: z.boolean().default(false),
  }),
});

// 导出所有集合
export const collections = { blog };

查询内容：在页面或组件中通过 API 获取文章数据：

import { getCollection, getEntry } from 'astro:content';

// 获取博客集合下所有非草稿文章
const allPosts = await getCollection('blog', ({ data }) => !data.draft);

// 根据 slug 获取单篇文章
const post = await getEntry('blog', 'hello-world');

Astro生态与部署

1. 集成系统（Integrations）

Astro 采用官方统一的集成体系，无需手动配置，一键开启扩展能力：

框架集成：@astrojs/react、@astrojs/vue、@astrojs/svelte 等，启用后即可直接使用对应框架组件
功能集成：@astrojs/sitemap（自动生成站点地图）、@astrojs/rss（RSS 订阅）、@astrojs/mdx（MDX 支持）
部署适配器：@astrojs/vercel、@astrojs/cloudflare、@astrojs/node 等，一键适配对应平台的 SSR 部署
CMS 集成：支持 Contentful、Sanity、Strapi、Notion 等主流内容管理系统

2. 主题与模板

Astro 官方提供了主题市场，涵盖博客、文档、官网、作品集等多种场景，既有免费开源主题，也有商业高质量主题。相比 Hexo 等老牌工具，Astro 主题的现代化程度与定制灵活性更高。

3. 主流部署方案

Astro 生成的纯静态站点支持所有静态托管平台，SSR 模式可通过适配器部署到对应运行环境：

静态部署：Vercel、Netlify、Cloudflare Pages、GitHub Pages，绑定仓库后自动构建部署，零配置
SSR/边缘部署：Vercel Edge、Cloudflare Workers、Netlify Edge Functions、Node.js 服务器
国内部署：阿里云 OSS + CDN、腾讯云 COS + CDN，也可通过 Docker 部署到自有服务器

Astro优缺点分析

优点

性能天花板级表现：默认零 JS 输出 + 部分水合，内容站性能表现碾压传统全栈框架，SEO 友好度拉满
技术栈灵活度极高：支持多框架组件混用，不绑定单一技术生态，团队复用成本低
内容管理能力完善：内容集合 + 原生 Markdown/MDX 支持，非常适合内容创作场景
渲染模式全面：从纯静态到服务端渲染、边缘渲染无缝切换，站点可从小到大一脉相承
开发体验优秀：基于 Vite 的热更新、原生 TypeScript、简洁的组件语法，上手平滑

缺点

生态成熟度仍在发展：相比 Next.js、Hexo 等老牌工具，第三方插件、主题数量仍有差距，复杂功能可能需要自行开发
动态能力有边界：核心定位是内容站，复杂的全栈应用（如后台管理系统、电商交易系统）不如 Next.js/Nuxt 顺手
存在一定学习曲线：新手需要理解群岛架构、水合时机、服务端/客户端代码边界等概念，比纯开箱即用的博客工具门槛略高
依赖 Node.js 环境：需要 Node.js 构建，相比 Hugo、Zola 等单二进制工具便携性稍差

Astro与主流静态站点工具横向对比

对比维度	Astro	VitePress	Next.js (SSG)	Hugo	Hexo
核心定位	通用高性能内容站	技术文档专用	全栈 React 框架	通用极速静态站	个人博客专用
默认 JS 体积	零 JS	少量运行时	80KB+ React 运行时	零 JS	少量主题 JS
组件能力	多框架混用	Vue 组件	React 组件	Go 模板	EJS 等模板
构建速度	快	极快	一般	极快（天花板）	一般
内容管理	内容集合（类型安全）	简易 Markdown	需自行实现	分类/标签体系	Front Matter
动态扩展	SSR/边缘渲染	弱	全栈能力完善	无	无
学习成本	中等	低	较高	中等	低
最佳场景	博客、营销官网、内容站	技术项目文档	全栈应用、复杂官网	大内容量博客	新手个人博客

Astro适用场景与选型建议

不推荐场景

重度交互的 Web 应用：如后台管理系统、SaaS 产品、在线工具等，优先选择 Next.js 或 Nuxt
完全零代码纯写作需求：如果完全不想写代码、只想要开箱即用的主题，Hexo 或 Hugo 上手更直接
超大规模内容站（数千篇以上）：构建速度相比 Hugo 等编译型工具仍有差距，内容量极大时优先选 Hugo

整体而言，Astro 是当前静态站点领域的「全能优等生」——在性能、灵活性、开发体验三者之间做到了极佳的平衡，既解决了传统框架性能冗余的痛点，又保留了现代前端的组件化能力，是绝大多数内容型站点的优质选型。

Astro 从零搭建个人博客

一、前置环境准备

Astro 基于 Node.js 运行，搭建前需要先准备好基础环境。

1. 安装 Node.js

要求 Node.js 版本 ≥ 18.17.0，推荐安装 LTS 长期支持版，稳定性最好。

下载地址：Node.js 官网
安装全程默认下一步即可，完成后打开终端执行以下命令验证：

bash

node -v
npm -v

输出版本号即说明安装成功。

2. 安装 Git

用于后续代码提交、部署和主题克隆，新手可直接默认安装。

下载地址：Git 官网
验证命令：

bash

git --version

二、初始化 Astro 博客项目

我们从零开始搭建一个基础博客，不依赖预制模板，方便你理解每一部分的原理。

1. 创建项目

打开终端，进入你想存放项目的文件夹，执行官方脚手架命令：

bash

npm create astro@latest

执行后会出现交互式引导，按以下选择即可：

Where would you like to create your new project? → 输入项目名，例如 my-astro-blog
How would you like to set up your new project? → 选择 Empty（空项目，从零搭建）
Would you like to install dependencies? → 选择 Yes
Would you like to initialize a new git repository? → 可选 Yes
How would you like to configure TypeScript? → 选择 Strict（严格模式，类型提示更完善）

2. 启动本地预览

项目创建完成后，进入项目目录并启动开发服务：

bash

cd my-astro-blog
npm run dev

启动成功后，打开浏览器访问 http://localhost:4321，就能看到 Astro 默认的欢迎页面。

提示：Astro 基于 Vite 构建，修改文件会毫秒级热更新，开发体验非常流畅。

三、项目核心目录结构

初始化完成后，项目的核心文件和目录如下，日常开发主要操作 src 目录：

my-astro-blog/
├── public/                # 静态资源目录（图片、字体等），直接映射到站点根路径
├── src/
│   ├── components/        # 可复用组件（导航栏、卡片等）
│   ├── content/           # 内容集合目录，存放所有 Markdown 博客文章
│   ├── layouts/           # 页面布局模板，统一头部、底部结构
│   ├── pages/             # 页面路由目录，文件路径 = 访问 URL
│   └── styles/            # 全局样式文件
├── astro.config.mjs       # Astro 全局配置文件
└── package.json           # 项目依赖与脚本

四、全局基础配置

打开项目根目录的 astro.config.mjs，这是 Astro 的主配置文件，我们先配置最基础的站点信息：

javascript

import { defineConfig } from 'astro/config';

// https://astro.build/config
export default defineConfig({
  // 站点正式域名，用于生成 sitemap、RSS 和绝对路径（部署前改成你的真实域名）
  site: 'https://你的域名.com',
  // 输出格式：静态站点模式
  output: 'static',
  // 启用 Markdown 代码高亮（内置 Shiki，支持百余种语言）
  markdown: {
    shikiConfig: {
      theme: 'github-dark', // 代码高亮主题
      wrap: true,
    },
  },
});

五、创建内容集合（核心功能）

内容集合（Content Collections）是 Astro 管理博客内容的官方标准方案，它可以给你的 Markdown 文章加上类型校验，避免字段缺失、格式错误等问题。

1. 创建内容目录

在 src 目录下新建 content/blog 文件夹，所有博客文章都放在这里。

2. 配置内容集合规则

在 src/content/ 目录下新建 config.ts 文件，定义博客文章的字段规范：

typescript

import { defineCollection, z } from 'astro:content';

// 定义博客集合
const blog = defineCollection({
  type: 'content',
  // 用 Zod 定义文章 Front Matter 的字段和类型
  schema: z.object({
    title: z.string(),           // 文章标题（必填）
    description: z.string(),     // 文章摘要（必填）
    pubDate: z.coerce.date(),    // 发布日期（必填）
    tags: z.array(z.string()).default([]), // 标签，默认空数组
    draft: z.boolean().default(false),     // 是否为草稿，默认 false
  }),
});

// 导出所有集合
export const collections = { blog };

配置完成后，只要文章的 Front Matter 字段不符合规则，构建时就会直接报错，从根源避免线上出现格式问题。

六、编写第一篇博客文章

在 src/content/blog/ 目录下新建 hello-astro.md 文件，写入以下内容：

markdown

---
title: 你好，Astro
description: 这是我的第一篇 Astro 博客文章
pubDate: 2026-08-17
tags:
  - Astro
  - 静态站点
draft: false
---

## 欢迎来到我的博客

这是使用 **Astro** 搭建的个人博客，默认零 JavaScript 加载，速度极快。

### 代码高亮示例
```javascript
function sayHello() {
  console.log("Hello Astro!");
}

列表功能

极速静态渲染
多框架组件混用
类型安全的内容管理

文章顶部 `---` 包裹的部分是 Front Matter（元数据），对应我们刚才定义的 Schema；下方就是正常的 Markdown 正文。


## 创建页面与布局
### 1. 全局布局组件
布局组件用于统一所有页面的头部、底部、全局样式，避免重复代码。

在 `src/layouts/` 目录下新建 `BaseLayout.astro`：
```astro
---
// 组件顶部：服务端代码，构建时执行
interface Props {
  title: string;
  description?: string;
}

const { title, description = "我的个人博客" } = Astro.props;
---

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content={description} />
    <title>{title} | 我的博客</title>
  </head>
  <body>
    <header class="site-header">
      <a href="/" class="logo">我的博客</a>
      <nav>
        <a href="/">首页</a>
        <a href="/about">关于</a>
      </nav>
    </header>

    <main class="container">
      <!-- slot 是插槽，页面内容会渲染到这里 -->
      <slot />
    </main>

    <footer class="site-footer">
      <p>© 2026 我的博客 · Powered by Astro</p>
    </footer>
  </body>
</html>

<style>
/* 组件样式默认隔离，不会污染全局 */
.site-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 0;
  border-bottom: 1px solid #eee;
  margin-bottom: 2rem;
}
.logo {
  font-size: 1.2rem;
  font-weight: bold;
  text-decoration: none;
  color: #333;
}
nav a {
  margin-left: 1.5rem;
  color: #666;
  text-decoration: none;
}
.container {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 1rem;
}
.site-footer {
  text-align: center;
  padding: 2rem 0;
  margin-top: 3rem;
  color: #999;
  border-top: 1px solid #eee;
}
</style>

2. 首页（文章列表页）

打开 src/pages/index.astro，替换为以下内容，实现博客文章列表：

astro

---
import BaseLayout from '../layouts/BaseLayout.astro';
import { getCollection } from 'astro:content';

// 获取所有非草稿的博客文章，并按日期倒序排列
const posts = (await getCollection('blog', ({ data }) => !data.draft))
  .sort((a, b) => b.data.pubDate.getTime() - a.data.pubDate.getTime());
---

<BaseLayout title="首页" description="我的个人技术博客">
  <h1>最新文章</h1>
  <ul class="post-list">
    {posts.map((post) => (
      <li class="post-item">
        <a href={`/blog/${post.slug}/`}>
          <h2>{post.data.title}</h2>
          <p class="post-date">
            {post.data.pubDate.toLocaleDateString('zh-CN')}
          </p>
          <p class="post-desc">{post.data.description}</p>
        </a>
      </li>
    ))}
  </ul>
</BaseLayout>

<style>
.post-list {
  list-style: none;
  padding: 0;
}
.post-item {
  padding: 1.5rem 0;
  border-bottom: 1px solid #f0f0f0;
}
.post-item a {
  color: inherit;
  text-decoration: none;
}
.post-item h2 {
  margin: 0 0 0.5rem 0;
  font-size: 1.3rem;
}
.post-date {
  color: #999;
  font-size: 0.9rem;
  margin: 0 0 0.5rem 0;
}
.post-desc {
  color: #666;
  margin: 0;
}
</style>

保存后刷新首页，就能看到我们刚才写的第一篇文章了。

3. 文章详情页（动态路由）

我们需要通过动态路由，让每篇文章都能自动生成对应的页面。

在 src/pages/blog/ 目录下新建 [...slug].astro 文件（[] 代表动态参数）：

astro

---
import BaseLayout from '../../layouts/BaseLayout.astro';
import { getCollection, getEntry } from 'astro:content';

// 静态生成所有博客文章的路径（SSG 模式必须）
export async function getStaticPaths() {
  const posts = await getCollection('blog');
  return posts.map((post) => ({
    params: { slug: post.slug },
    props: { post },
  }));
}

const { post } = Astro.props;
const { Content } = await post.render();
---

<BaseLayout title={post.data.title} description={post.data.description}>
  <article class="post-detail">
    <header class="post-header">
      <h1>{post.data.title}</h1>
      <p class="post-meta">
        {post.data.pubDate.toLocaleDateString('zh-CN')}
        {post.data.tags.length > 0 && (
          <span class="tags">
            · {post.data.tags.map(tag => `#${tag}`).join(' ')}
          </span>
        )}
      </p>
    </header>

    <!-- 渲染 Markdown 正文内容 -->
    <div class="post-content">
      <Content />
    </div>
  </article>
</BaseLayout>

<style>
.post-header {
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #eee;
}
.post-header h1 {
  margin: 0 0 0.5rem 0;
  font-size: 1.8rem;
}
.post-meta {
  color: #999;
  font-size: 0.9rem;
  margin: 0;
}
.tags {
  margin-left: 0.5rem;
}
.post-content {
  line-height: 1.8;
  color: #333;
}
.post-content :global(img) {
  max-width: 100%;
  border-radius: 4px;
}
.post-content :global(code) {
  background: #f5f5f5;
  padding: 0.2rem 0.4rem;
  border-radius: 3px;
  font-size: 0.9em;
}
.post-content :global(pre) {
  padding: 1rem;
  border-radius: 6px;
  overflow-x: auto;
}
</style>

保存后，访问 http://localhost:4321/blog/hello-astro/ 就能看到完整的文章详情页了。

Astro一键安装常用官方集成

Astro 提供了官方集成体系，一条命令就能安装并自动配置功能，无需手动改配置。

1. 站点地图（Sitemap）

自动生成 sitemap.xml，帮助搜索引擎收录：

bash

npx astro add sitemap

执行后选择确认，会自动安装依赖并写入配置。

2. RSS 订阅

生成 RSS 订阅源，方便读者订阅更新：

bash

npx astro add rss

安装后在 astro.config.mjs 中配置站点信息即可使用。

3. MDX 支持

支持在 Markdown 中嵌入 React/Vue 组件，实现交互式文章：

bash

npx astro add mdx

Astro部署上线（Vercel 免费方案）

本地调试完成后，就可以部署到线上让所有人访问了，推荐使用 Vercel，免费、速度快、自动构建。

1. 推送项目到 GitHub

在 GitHub 新建一个公开仓库
将本地项目代码推送到该仓库

2. 导入 Vercel 一键部署

打开 Vercel 官网，用 GitHub 账号登录
点击 Add New → Project，导入刚才的博客仓库
Vercel 会自动识别这是 Astro 项目，自动填好构建命令和输出目录
直接点击 Deploy 开始部署

等待 1-2 分钟构建完成，Vercel 会分配一个免费域名，直接就能访问你的博客。后续写新文章只需要提交代码到 GitHub，Vercel 会自动更新站点。

Astro日常常用命令汇总

命令	功能说明
`npm run dev`	启动本地开发服务器，带热更新
`npm run build`	构建生产环境静态文件到 `dist` 目录
`npm run preview`	本地预览构建后的生产站点
`npx astro add xxx`	安装官方集并自动配置
`npx astro check`	检查类型错误和内容集合格式问题

Astro新手常见问题

修改内容后页面没更新：确认开发服务正在运行，Astro 默认热更新；如果是配置文件修改，重启服务即可。
文章列表不显示新文章：检查 Front Matter 字段是否和 Schema 一致，draft 是否设为了 true。
部署后页面 404：检查链接路径是否正确，动态路由文件名必须是 [...slug].astro。
样式不生效：组件内样式默认隔离，要修改 Markdown 渲染的内容需要加 :global() 包裹。

Astro ​

什么是 Astro ​

Astro核心架构 ​

1. 核心原理 ​

2. 客户端水合指令 ​

3. 进阶：服务器群岛（Server Islands） ​

Astro核心特性 ​

1. 默认零客户端 JavaScript，极致性能 ​

2. 多框架无感混用，不锁定技术栈 ​

3. 原生内容管理：内容集合 + Markdown/MDX ​

4. 多渲染模式灵活切换 ​

5. 内置生产级优化 ​

6. 优秀的开发体验 ​

Astro基础使用与核心语法 ​

1. 快速初始化 ​

2. 项目目录结构 ​

3. .astro 组件语法 ​

4. 文件路由系统 ​

Astro核心能力 ​

1. 核心价值 ​

2. 基础配置与使用 ​

Astro生态与部署 ​

1. 集成系统（Integrations） ​

2. 主题与模板 ​

3. 主流部署方案 ​

Astro优缺点分析 ​

优点 ​

缺点 ​

Astro与主流静态站点工具横向对比 ​

Astro适用场景与选型建议 ​

推荐使用场景 ​

不推荐场景 ​

Astro 从零搭建个人博客 ​

一、前置环境准备 ​

1. 安装 Node.js ​

2. 安装 Git ​

二、初始化 Astro 博客项目 ​

1. 创建项目 ​

2. 启动本地预览 ​

三、项目核心目录结构 ​

四、全局基础配置 ​

五、创建内容集合（核心功能） ​

1. 创建内容目录 ​

2. 配置内容集合规则 ​

六、编写第一篇博客文章 ​

列表功能 ​

2. 首页（文章列表页） ​

3. 文章详情页（动态路由） ​

Astro一键安装常用官方集成 ​

1. 站点地图（Sitemap） ​

2. RSS 订阅 ​

3. MDX 支持 ​

Astro部署上线（Vercel 免费方案） ​

1. 推送项目到 GitHub ​

2. 导入 Vercel 一键部署 ​

Astro日常常用命令汇总 ​

Astro新手常见问题 ​

Astro

什么是 Astro

Astro核心架构

1. 核心原理

2. 客户端水合指令

3. 进阶：服务器群岛（Server Islands）

Astro核心特性

1. 默认零客户端 JavaScript，极致性能

2. 多框架无感混用，不锁定技术栈

3. 原生内容管理：内容集合 + Markdown/MDX

4. 多渲染模式灵活切换

5. 内置生产级优化

6. 优秀的开发体验

Astro基础使用与核心语法

1. 快速初始化

2. 项目目录结构

3. .astro 组件语法

4. 文件路由系统

Astro核心能力

1. 核心价值

2. 基础配置与使用

Astro生态与部署

1. 集成系统（Integrations）

2. 主题与模板

3. 主流部署方案

Astro优缺点分析

优点

缺点

Astro与主流静态站点工具横向对比

Astro适用场景与选型建议

推荐使用场景

不推荐场景

Astro 从零搭建个人博客

一、前置环境准备

1. 安装 Node.js

2. 安装 Git

二、初始化 Astro 博客项目

1. 创建项目

2. 启动本地预览

三、项目核心目录结构

四、全局基础配置

五、创建内容集合（核心功能）

1. 创建内容目录

2. 配置内容集合规则

六、编写第一篇博客文章

列表功能

2. 首页（文章列表页）

3. 文章详情页（动态路由）

Astro一键安装常用官方集成

1. 站点地图（Sitemap）

2. RSS 订阅

3. MDX 支持

Astro部署上线（Vercel 免费方案）

1. 推送项目到 GitHub

2. 导入 Vercel 一键部署

Astro日常常用命令汇总

Astro新手常见问题