Hexo博客部署Cloudflare Pages完整指南

如何将静态网站发布到Cloudflare Pages

Cloudflare Pages是一个优秀的静态网站托管平台，提供快速全球分发、自动部署和免费SSL证书等功能。下面我将详细介绍如何将你的静态网站发布到Cloudflare Pages。

准备工作

1. 一个Cloudflare账户 - 如果没有，请先注册
2. 你的静态网站文件 - HTML、CSS、JavaScript等
3. GitHub/GitLab账户（可选，用于自动部署）

方法一：通过Git仓库自动部署（推荐）

1. 将网站代码上传到Git仓库

bash

# 初始化Git仓库
git init
git add .
git commit -m "Initial commit"

# 连接到GitHub/GitLab远程仓库
git remote add origin https://github.com/yourusername/your-repo.git
git push -u origin main

2. 在Cloudflare Pages中设置项目

1. 登录Cloudflare仪表板
2. 左侧菜单选择"Workers & Pages"
3. 点击"创建应用程序" > "Pages" > "连接到Git"

3. 配置构建设置

• 选择你的Git提供商（GitHub/GitLab）

• 选择你的仓库

• 在构建设置中：

  • 生产分支：通常为main或master

  • 构建命令：根据你的静态网站生成器而定

    • 纯HTML：可以留空
    • Hugo：hugo
    • Jekyll：jekyll build
    • Next.js：npm run build

  • 输出目录：通常是public、dist或_site

4. 完成部署

点击"保存并部署"，Cloudflare会自动拉取代码并部署你的网站。

方法二：手动上传文件

如果你不想使用Git，也可以直接上传文件：

1. 在Cloudflare Pages中选择"直接上传"
2. 将你的静态网站文件拖放到上传区域
3. 点击"部署站点"

自定义域名设置

1. 在Pages项目设置中，点击"自定义域"
2. 添加你的域名（需先在Cloudflare中添加该域名）
3. 按照提示修改DNS记录

环境变量配置

如果你的网站需要环境变量：

1. 在项目设置中选择"环境变量"
2. 添加生产环境和预览环境所需的变量

自动部署预览

Cloudflare Pages为每个Pull Request自动生成预览部署，方便测试更改。

优势特点

1. 全球CDN - 内容分发到全球边缘节点
2. 免费SSL - 自动提供HTTPS加密
3. 无限带宽 - 无流量限制
4. 自动构建 - 与Git集成实现CI/CD
5. 自定义404页面 - 支持个性化错误页面

常见问题

Q: 我的网站有大量文件，上传有限制吗？

A: Cloudflare Pages单个部署限制为25MB（压缩前），但文件数量无限制。

Q: 如何清除缓存？

A: 在项目设置中有"清除缓存"选项，或通过API操作。

Q: 支持服务器端渲染吗？

A: Cloudflare Pages主要针对静态站点，但可以使用Workers实现动态功能。

通过以上步骤，你可以轻松将静态网站部署到Cloudflare Pages，享受快速、安全的全球分发服务。