Astro

最近更新时间:2026-01-09 17:47:32

我的收藏
Astro 是一个现代化的开源 Web 框架,在 Web 开发社区中拥有广泛的影响力,是构建内容驱动型网站和应用程序的热门选择。
注意:
目前 Pages 对 Astro 版本的支持为 4+,最低版本为 4,推荐使用 Astro 5。
在部署和运行 Astro 项目时,Pages 平台的运行环境为 Node.js 22+ 版本,建议使用靠前的 Node.js 版本。

核心特点

Astro 提供了以下核心特性:
群岛架构(Islands Architecture):Astro 采用群岛架构设计,将页面中的交互组件视为独立的“岛屿”,只在需要时进行客户端水合,其余保持静态。
服务端渲染(SSR):Astro 的服务端渲染能够在不需要客户端 JavaScript 的情况下渲染动态数据,同时不会减慢不需要该功能的页面。
静态站点生成(SSG):支持预渲染页面,构建时生成静态 HTML。
多框架支持:使用 Astro 时,可以继续使用其它的框架(Vue、React、Svelte)。支持在项目中混合使用多个框架组件。
内容集合:使用类型安全的前置元数据组织 Markdown 和 MDX 内容。
API 路由:用于动态数据处理的服务端 API 端点。

快速开始

在 EdgeOne Pages 上快速部署 Astro 的项目,可以通过以下方式:
通过 Git 仓库导入 Astro 项目。
从 Pages 模板库选择 Astro 模板进行部署。
了解 Astro 在 Pages 部署的表现,可以点击下方的 Pages 的 Astro 示例模板:

查看更多 Pages 的 Astro 模板,可以访问 Astro 模板库

Pages 对 Astro 的特性支持

下表是 Pages 目前支持 Astro 的关键特性。如下:
Astro 特性
支持情况
群岛架构渲染
服务端渲染(SSR)
静态站点生成(SSG)
多框架支持
内容集合(MD、MDX)
API 路由
Actions 路由
中间件
支持 Astro 自带中间件
Image 组件
暂不支持
平台 ISR
暂不支持
未支持的 Astro 特性目前正在 Pages 平台规划中。建议关注 @edgeone/astro 适配器的版本更新,及时获取最新功能和改进。

在 Pages 部署 Astro 项目

1. 安装 Pages 的 Astro 适配器

Pages 的 Astro 的适配器名为 @edgeone/astro 是一个将 Astro 应用的构建结果自动适配到 Pages 平台的适配器,类似于 @astrojs/vercel,它可以配合 Pages 的脚手架工具将本地的 Astro 项目打包部署到 Pages 平台。以下为安装适配器的命令:
npm install @edgeone/astro

2. 配置 astro.config.mjs

按照 Astro 的配置文件的 API,用户需要在 Astro 的项目中的astro.config.mjs 配置 Pages 平台的适配器。配置示例如下:
import { defineConfig } from "astro/config";
import edgeoneAdapter from "@edgeone/astro";

export default defineConfig({
adapter: edgeoneAdapter(),
});

3. 部署项目

Git 连接部署
集成好适配器后,您可以将项目提交到 GitHub,GitLab 等平台,然后使用我们的 导入 Git 仓库
CLI 部署
也可以安装 Pages 的脚手架工具,详细安装和使用方法请参考 EdgeOne CLI。配置完成后,使用 `edgeone pages deploy` 命令部署项目。在部署过程中,CLI 会先自动构建项目,然后将构建产物上传并发布。
注意:
EdgeOne CLI 版本要求 ≥ 1.2.0,部署前请先检查版本,避免部署失败。

Astro 的 Pages 适配器配置

适配器支持以下配置选项:
outDir(可选):指定构建输出目录,默认为 .edgeone。示例:outDir: ".edgeone"。
includeFiles(可选):强制包含的文件列表,用于确保某些文件被打包到服务端渲染代码中。支持 glob 模式匹配。示例:includeFiles: ["src/locales/**", "public/config.json"]。
excludeFiles(可选):排除的文件列表,用于排除不需要被打包到服务端渲染代码中的文件。主要用于排除 node_modules 中的特定文件。支持 glob 模式匹配。示例:excludeFiles: ["node_modules/.cache/**"]。
以下为配置示例:
import { defineConfig } from "astro/config";
import edgeoneAdapter from "@edgeone/astro";

export default defineConfig({
output: "server",
adapter: edgeoneAdapter({
outDir: ".edgeone",
includeFiles: ["src/locales/**"],
excludeFiles: ["node_modules/.cache/**"],
}),
});

静态站点生成 (SSG)

可以使用 Astro 来生成完全静态的站点。配置为静态导出模式,可按照如下示例修改 astro.config.mjs

export default defineConfig({
output: 'static' // 启用静态导出
});
请注意:在 Astro 的 SSG(静态站点生成)模式下,所有页面在构建时预渲染为静态 HTML,没有服务端运行时,因此无法使用服务端功能,包括 API 路由(src/pages/api/*)、中间件(src/middleware.ts)等任何需要服务端执行的功能。

服务端渲染 (SSR)

Pages 适配器还支持 Astro 的服务端渲染功能,在 astro.config.mjs 中设置下方配置启用 SSR 模式:

export default defineConfig({
output: 'server' // 启用服务端渲染
});
SSR 模式下允许您在服务器端动态生成 HTML 内容,提供更好的 SEO 支持、更快的首屏加载速度,以及动态内容的实时渲染能力。
除了纯 SSR 模式,Pages 还支持 Astro 的混合模式。在混合模式下,可以灵活控制每个页面的渲染方式:
静态页面:在页面中设置 export const prerender = true,该页面会在构建时预渲染为静态 HTML 文件。
动态页面:未设置 prerender 为 true 的页面将使用 SSR 动态渲染。