Cloudflare Pages 部署
约 1158 字大约 4 分钟
2025-11-21
Cloudflare Pages 是一个优秀的静态网站托管平台，具有全球 CDN、自动部署和免费 SSL 证书等特性。本指南将详细介绍如何将 Mizuki (Astro项目) 部署到 Cloudflare Pages。
准备工作
- Git 仓库：确保您的 Mizuki 项目已上传到 GitHub、GitLab 或其他支持的 Git 平台
- Cloudflare 账号：注册一个免费的 Cloudflare 账号
部署步骤
1. 登录 Cloudflare Pages
访问 Cloudflare Dashboard，使用您的账号登录，然后选择 "Pages" 服务。
2. 创建新项目
- 点击 "Create a project" 或 "Connect to Git" 按钮
- 选择您的 Git 提供商（GitHub、GitLab 等）并授权
- 从列表中选择您的 Mizuki 项目仓库
3. 配置构建设置
在项目设置页面中，配置以下构建设置：
基本设置
- Project name: 输入您的项目名称（如
mizuki-blog） - Production branch: 设置主分支（通常为
main或master）
构建配置
# 构建设置
Build command: pnpm i && pnpm build
Build output directory: dist
Root directory: /环境变量（可选）
如果您的项目需要环境变量，可以在 "Environment variables" 部分添加：
| 变量名 | 值 | 说明 |
|---|---|---|
| NODE_VERSION | 18 | 指定 Node.js 版本 |
| PNPM_VERSION | 8 | 指定 pnpm 版本 |
4. 部署项目
配置完成后，点击 "Save and Deploy" 开始首次部署：
- Cloudflare Pages 会克隆您的仓库
- 安装依赖（
pnpm i） - 构建项目（
pnpm build） - 将
dist目录部署到全球 CDN
首次部署可能需要几分钟时间。
5. 获取部署信息
部署完成后，您将获得：
- 站点 URL：如
https://mizuki-blog.pages.dev - 自动生成的 SSL 证书
- 全球 CDN 分发
高级配置
自定义域名
- 在项目设置中，选择 "Custom domains"
- 添加您的域名（如
blog.yourdomain.com） - 按照提示配置 DNS 记录
- Cloudflare 会自动配置 SSL 证书
部署钩子
如果需要触发部署，可以使用部署钩子：
- 在项目设置中找到 "Deploy hooks"
- 创建新的部署钩子
- 保存生成的 URL，用于触发重新部署
预览部署
每个推送的 PR 都会自动创建预览部署：
- URL 格式：
https://<branch-name>-<project-name>.pages.dev - 可以用于预览更改，不影响生产环境
常见问题
Q: 构建失败怎么办？
A: 检查以下几点：
- 确保
package.json中包含pnpm的构建脚本 - 检查 Node.js 版本是否兼容
- 查看构建日志中的错误信息
- 确保所有依赖已正确安装
Q: 如何使用自定义镜像源？
A: 在根目录创建 .npmrc 文件：
registry=https://registry.npmmirror.comQ: 如何优化构建速度？
A: 可以尝试以下方法：
- 启用构建缓存
- 优化依赖安装，使用
.npmrc配置 - 减少不必要的依赖
本地预览部署
在部署前，您可以在本地预览构建结果：
# 安装依赖
pnpm i
# 构建项目
pnpm build
# 本地预览
pnpm preview访问 http://localhost:4321 查看构建后的网站。
CI/CD 集成
Cloudflare Pages 支持自动部署，当您推送代码到指定分支时：
- 自动触发构建流程
- 构建成功后自动更新网站
- 失败时发送通知
您可以在项目设置中配置：
- 部署分支
- 部署条件
- 失败时的操作
性能优化
图片优化
Cloudflare Pages 自动提供图片优化服务：
- 自动转换格式（如 WebP）
- 根据设备调整尺寸
- 自动压缩
缓存策略
默认缓存配置：
- HTML 文件：不缓存
- 静态资源（CSS、JS、图片）：长期缓存
您可以在 _headers 文件中自定义缓存策略：
/cache-control/*
Cache-Control: public, max-age=31536000, immutable监控与分析
Cloudflare 提供内置的分析工具：
- 页面访问量：查看访问统计
- 性能指标：监控加载速度
- 安全分析：查看威胁检测
访问 "Analytics" 部分查看详细数据。
成本
Cloudflare Pages 的免费计划包括：
- 每月 500 次构建
- 无限静态请求
- 20,000 次服务器请求
- 全球 CDN 分发
- 免费 SSL 证书
对于个人博客和小型网站，免费计划通常足够使用。
总结
Cloudflare Pages 是部署 Mizuki (Astro项目) 的优秀选择，具有以下优势：
- 🚀 部署简单，配置直观
- 🌍 全球 CDN，访问速度快
- 🔒 免费 SSL 证书
- 🔄 自动部署
- 📊 内置分析工具
按照本指南操作，您应该能够成功将 Mizuki 博客部署到 Cloudflare Pages，享受快速、稳定的访问体验。