Astro 是一个现代化的靜态网站生成器，以其出色的性能和开发体验受到广泛歡迎。本文將介紹如何在蘋果电脑 Apple macOS 上从零开始搭建 Astro 开发环境並部署到 Cloudflare Pages。

🚀 环境準備

1. 安裝必要工具

安裝 Homebrew（如果尚未安裝）

/bin/bash -c ”$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)“

安裝 Node.js（Astro 需要 Node.js 18+）

brew install node

验证安裝

node —version npm —version

2. 创建 Astro 項目

使用官方腳本创建新項目

npm create astro@latest my-astro-site

进入項目目錄

cd my-astro-site

安裝依賴

npm install

🛠️ 开发階段

啟动开发服務器

npm run dev

訪問 http://localhost:4321 查看你的网站，支持熱重載，修改代碼即时可見。

項目結構概览

my-astro-site/ ├── src/ │ ├── pages/ # 頁面组件 │ ├── layouts/ # 佈局组件 │ └── components/ # 可復用组件 ├── public/ # 靜态資源 └── astro.config.mjs # 配置文件

添加頁面

在 src/pages/ 创建 .astro 或 .md 文件：

---
// src/pages/about.astro
---
<html>
  <head>
    <title>关於我们</title>
  </head>
  <body>
    <h1>歡迎来到 Astro！</h1>
    <p>这是一个靜态生成的頁面。</p>
    <p>Mountos Code Lab</p>
  </body>
</html>

📦 構建优化

生產环境構建

npm run build

構建後的文件將生成在 dist/ 文件夾，適合部署到任何靜态託管服務。

预览生產版本

npm run preview

☁️ 部署到 Cloudflare Pages

1. 準備部署配置

在項目根目錄创建 wrangler.toml：

name = “my-astro-site” compatibility_date = “2024-01-01”

[pages] build_command = “npm run build” build_output_dir = “dist”

2. 推送到 GitHub

初始化 Git

git init git add . git commit -m “Initial Astro project”

連接到 GitHub 倉庫

git remote add origin https://github.com/你的用戶名/你的倉庫名.git git push -u origin main

3. 配置 Cloudflare Pages

1. 登錄 Cloudflare Dashboard
2. 进入 “Workers & Pages”
3. 点击 “Create application” → “Pages”
4. 連接你的 GitHub 倉庫
5. 構建设置：

• Build command: npm run build
• Build output directory: dist

4. 自动部署

此後每次推送代碼到 GitHub，Cloudflare Pages 都会自动構建和部署：

git add . git commit -m “更新网站內容” git push origin main

💡 实用技巧

添加自定義域名

在 Cloudflare Pages 項目的 “Custom domains” 中添加你的域名。

环境变量配置

在 Cloudflare Pages 的 “Environment variables” 中设置生產环境变量。

性能优化

分析包大小

npm run build && npx bundle-analyzerdist/_astro/

🎯 總結

整个流程非常簡单：

1. 本地开发：npm run dev
2. 代碼管理：推送到 GitHub
3. 自动部署：Cloudflare Pages 处理構建和发布

Astro 加上 Cloudflare Pages 的组合，为开发者提供了快速、免費且高性能的网站託管方案。现在就开始構建你的第一个 Astro 网站吧！

提示：記得定期更新 Astro 版本以获得最新功能和安全更新：npm update astro