Astro 静态网站搭建实战教程：从入门到部署到 Cloudflare Pages

近年来，Astro 凭借其出色的构建性能和灵活的框架集成能力，迅速在静态站点生成器（SSG）中崭露头角。相比传统的 SSG（如 Gatsby、Next.js 的静态导出），Astro 的核心理念是“零运行时 JavaScript”，非常适合用于搭建博客、文档站点、营销页面等轻量、快速加载的静态网站。

本教程将带你从零开始，一步步搭建一个 Astro 静态博客站点，并部署到 Cloudflare Pages，实现免费、快速、CDN加速的静态托管。

一、Astro 简介#

Astro 是一个现代化的静态站点生成器，其核心特性包括：

✅ 支持多种框架（React、Vue、Svelte、Solid.js 等）组件混用
✅ 构建速度快，输出纯 HTML/CSS/JS，无需客户端 JavaScript
✅ 支持 Markdown 内容、MDX、数据加载、API 路由等
✅ 开发体验优秀，支持 HMR（热更新）

二、环境准备#

在开始之前，请确保你已安装：

Node.js（推荐 v16+）
npm / pnpm（本教程使用 npm）

三、创建 Astro 项目#

1. 初始化项目#

1
npm create astro@latest my-astro-blog

选择以下选项：

✅ 选择默认模板（或选择 blog 模板，看是否已有预设）
✅ 是否安装依赖：Yes

进入项目目录：

1
cd my-astro-blog

2. 启动本地开发服务器#

1
npm run dev

访问 http://localhost:3000，你将看到 Astro 默认首页。

四、构建一个静态博客#

Astro 支持通过 Markdown 文件创建页面。我们来创建一个简单的博客结构。

1. 创建博客文章目录#

1
mkdir -p src/content/blog

2. 添加一篇 Markdown 博文#

1
---
2
title: "我的第一篇博客"
3
date: "2025-04-05"
4
---
5

6
欢迎来到我的博客！
7

8
这是第一篇文章，我正在学习使用 Astro 搭建静态网站。

3. 创建博客页面模板（使用 Astro 组件）#

创建一个 src/pages/blog/[slug].astro 动态路由：

1
---
2
import { getCollection } from 'astro:content';
3

4
const blogPosts = await getCollection('blog');
5
---
6

7
<ul>
8
  {blogPosts.map(post => (
9
    <li>
10
      <a href={`/blog/${post.slug}`}>{post.data.title}</a>
11
    </li>
12
  ))}
13
</ul>

创建动态页面 src/pages/blog/[slug].astro：

1
---
2
import { getCollection } from 'astro:content';
3

4
const allPosts = await getCollection('blog');
5
const post = allPosts.find(p => p.slug === Astro.params.slug);
6

7
if (!post) {
8
  throw new Error('Post not found');
9
}
10
---
11

12
<h1>{post.data.title}</h1>
13
<p>{post.data.date}</p>
14
<article>
15
  <content />
16
</article>

五、本地构建与测试#

1
npm run build

构建完成后，静态文件会输出到 dist/ 目录。你可以使用 serve 来本地测试：

1
npm install -g serve
2
serve dist

访问 http://localhost:5000，确保博客页面可以正常访问。

六、部署到 Cloudflare Pages#

1. 登录 Cloudflare Dashboard#

前往 https://dash.cloudflare.com，并登录你的 Cloudflare 账户。

2. 创建新项目#

点击 “Pages” → “Create a project” → “Connect Git repository”
选择你已有的 Git 仓库（如果没有，建议先推送到 GitHub）

3. 配置构建设置#

在配置页面填写以下信息：

Production branch：main（或你的主分支）
Build command：npm run build
Build output directory：dist

点击 “Save and Deploy”

4. 等待部署完成#

Cloudflare 会自动拉取代码、安装依赖、执行构建，并部署你的网站。

完成后，你将获得一个类似 your-project.pages.dev 的域名，可以直接访问。

七、绑定自定义域名（可选）#

如果你想绑定自己的域名，只需：

在 Cloudflare Pages 的域名设置中添加自定义域名
在你的域名 DNS 中添加 CNAME 记录指向 Cloudflare 提供的地址

八、Astro 高级功能推荐#

✅ MDX 支持：在 Markdown 中嵌入 React/Vue 组件
✅ RSS Feed：自动生成 RSS 订阅链接
✅ Tailwind CSS / SCSS / CSS Modules：样式方案自由选择
✅ API Routes：在 src/pages/api/ 下创建服务器端 API
✅ 集成 CMS：支持 Contentful、Sanity、Markdown 等内容源

九、总结#

项目	Astro
构建速度	✅ 极快
输出大小	✅ 极小，无运行时 JS
支持框架	✅ React/Vue/Svelte 等
部署方式	✅ 支持 GitHub Pages、Vercel、Cloudflare Pages 等
中文社区	✅ 逐渐完善

十、结语#

Astro 是目前静态网站生成器中极具潜力的新星，性能优秀、灵活度高、生态开放。结合 Cloudflare Pages 的免费 CDN 加速和全球部署能力，搭建个人博客、技术文档、产品官网等静态站点非常合适。

📌 GitHub 示例项目地址（推荐 Fork 学习）： https://github.com/baiduxc/fuwari

📢 如果你喜欢本教程，欢迎点赞、收藏、转发！ 🔍 关注我，带你从零掌握现代前端技术与部署方案！