如何将HTML模板部署到Cloudflare Pages(免费)

如何将HTML模板部署到Cloudflare Pages(免费)

为什么选择 Cloudflare Pages?

Cloudflare Pages 提供免费的静态网站托管服务,配备全球 CDN、自动 HTTPS 和无限带宽,是 HTML 网站模板的理想部署目标。

前置条件

  • 一个 Cloudflare 账户(免费)
  • 准备好你的 HTML 模板文件
  • 一个 GitHub 或 GitLab 仓库(可选,用于 CI/CD)

方法一:直接上传(最快)

  1. 登录你的 Cloudflare 控制台
  2. 导航到 Pages 并点击 创建项目
  3. 选择 上传资源
  4. 拖放你的模板文件夹(必须包含 index.html)
  5. 点击 部署站点
  6. 你的站点将立即通过 .pages.dev 域名上线

方法二:Git 集成(推荐)

  1. 将你的模板推送到 GitHub 或 GitLab 仓库
  2. 在 Cloudflare Pages 中,选择 连接到 Git
  3. 选择你的仓库
  4. 设置构建配置:
    • 构建命令: 纯 HTML 留空即可
    • 输出目录: /dist
  5. 点击 保存并部署
  6. 后续推送将自动触发重新部署

添加自定义域名

  1. 在 Pages 项目中,进入 自定义域名
  2. 点击 设置自定义域名
  3. 输入你的域名
  4. Cloudflare 会自动配置 DNS 和 SSL

性能优化

  • Brotli 压缩: 在 Cloudflare 设置中启用
  • 缓存规则: 为静态资源设置较长的 TTL
  • Early Hints: 启用后可加快资源加载速度

总结

Cloudflare Pages 是 HTML 模板的理想免费托管方案。借助全球 CDN、自动 HTTPS 和基于 Git 的部署,你可以在 5 分钟内将模板变为在线网站。立即下载 免费模板 试试吧。

相关模板