如何将静态网站发布到Cloudflare Pages
Cloudflare Pages是一个优秀的静态网站托管平台，提供快速全球分发、自动部署和免费SSL证书等功能。下面我将详细介绍如何将你的静态网站发布到Cloudflare Pages。
准备工作
- 一个Cloudflare账户 - 如果没有，请先注册
- 你的静态网站文件 - HTML、CSS、JavaScript等
- GitHub/GitLab账户（可选，用于自动部署）
方法一：通过Git仓库自动部署（推荐）
1. 将网站代码上传到Git仓库
bash
csharp
# 初始化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 main2. 在Cloudflare Pages中设置项目
- 登录Cloudflare仪表板
- 左侧菜单选择"Workers & Pages"
- 点击"创建应用程序" > "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，也可以直接上传文件：
- 在Cloudflare Pages中选择"直接上传"
- 将你的静态网站文件拖放到上传区域
- 点击"部署站点"
自定义域名设置
- 在Pages项目设置中，点击"自定义域"
- 添加你的域名（需先在Cloudflare中添加该域名）
- 按照提示修改DNS记录
环境变量配置
如果你的网站需要环境变量：
- 在项目设置中选择"环境变量"
- 添加生产环境和预览环境所需的变量
自动部署预览
Cloudflare Pages为每个Pull Request自动生成预览部署，方便测试更改。
优势特点
- 全球CDN - 内容分发到全球边缘节点
- 免费SSL - 自动提供HTTPS加密
- 无限带宽 - 无流量限制
- 自动构建 - 与Git集成实现CI/CD
- 自定义404页面 - 支持个性化错误页面
常见问题
Q: 我的网站有大量文件，上传有限制吗？
A: Cloudflare Pages单个部署限制为25MB（压缩前），但文件数量无限制。
Q: 如何清除缓存？
A: 在项目设置中有"清除缓存"选项，或通过API操作。
Q: 支持服务器端渲染吗？
A: Cloudflare Pages主要针对静态站点，但可以使用Workers实现动态功能。
通过以上步骤，你可以轻松将静态网站部署到Cloudflare Pages，享受快速、安全的全球分发服务。