为世界所有美好而战

做最好的今日，回顾最好的昨日，迎接最完美的明天。#

一、何为Cloudflare Pages？#

Cloudflare Pages 是一个优秀的静态网站托管平台，具有全球 CDN、自动部署和免费 SSL 证书等特性。本指南将详细介绍如何将 Mizuki (Astro项目) 部署到 Cloudflare Pages。

二、Cloudflare Pages挂载#

1. 挂载准备：

   • Git 仓库：确保您的 Mizuki 项目已上传到 GitHub、GitLab 或其他支持的Git 平台
     ❎如何使用Github-全球最大的同性交友网站
     ✅点我直达即可注册/登录

2. Cloudflare Pages部署:

   • 点我直达Cloudflare Pages；

   • 点击右上角+，pages,选择从现有仓库导入或从 本地导入，下一步；

   • 选择从现有仓库导入时，需要选择您创建的Mizuki项目的仓库，下一步；

   • 部署配置：

     名称	选项
     项目名称:	xxx (您的项目将被部署到 xxxh.pages.dev)
     生产分支:	main
     构建设置:	如果您的项目使用静态站点生成器或构建工具，请为Cloudflare设置构建指令
     框架预设:	无
     构建命令:	npm run build
     构建输出目录:	dist
     根目录:	/(根据您的项目结构选择)

   • 环境变量:

     变量名称	变量值	说明
     NODE_VERSION	18	指定node.js版本
     PNPM_VERSION	8	指定pnpm版本

   • 配置完成后，点击 保存并部署Save and Deploy 开始部署,可能等待时间较长，部署详情（以下部分自动完成，无需个人操作）：

     • Cloudflare Pages 会克隆您的仓库

     • 安装依赖（pnpm i）

     • 构建项目（pnpm build）

     • 将 dist 目录部署到全球 CDN

     • 首次部署可能需要几分钟时间。

     • 获取部署信息

     • 部署完成后，您将获得：

     • 站点 URL：点击预览您的博客

     • 自动生成的 SSL 证书

     • 全球 CDN 分发

   • 如若出现错误，可根据提示进行排查，在本地进行调试，再次部署即可。

3. 绑定自定义域名：

   • 在项目设置中，选择 “Custom domains”
   • 添加您的域名（如 blog.yourdomain.com）
   • 按照提示配置 DNS 记录
   • Cloudflare 会自动配置 SSL 证书

三、总结#

Cloudflare Pages 是部署 Mizuki (Astro项目) 的优秀选择，具有以下优势：

🚀 部署简单，配置直观
🌍 全球 CDN，访问速度快
🔒 免费 SSL 证书
🔄 自动部署
📊 内置分析工具
按照本指南操作，您应该能够成功将 Mizuki 博客部署到 Cloudflare Pages，享受快速、稳定的访问体验。