摘要：本文将以一个HTML文件为例手把手教你如何利用 Cloudflare Pages 免费、高速地部署一个 HTML 网站，并绑定你的个人域名。

一、概述

1.Cloudflare

本文使用Cloudflare为例作为教程，而我们可以先了解一下Cloudflare，Cloudflare是一家全球化的云服务公司，提供网络安全、内容分发网络（CDN）、域名解析（DNS）、DDoS防护等基础设施服务。其核心目标是通过分布式网络优化网站性能并增强安全性。我们可以用来部署静态网站（有免费版，相当于白嫖，适合自己没有服务器的）。

2.什么是静态部署、什么是动态部署？

• 静态部署：
  在 Cloudflare 中，这通常指的是使用 Cloudflare Pages 托管纯 HTML、CSS、JavaScript 和图片文件。
• 动态部署：
  在 Cloudflare 中，这通常指的是使用 Cloudflare Workers 或 Pages Functions（Pages 的服务端函数功能）。
• 区别

一句话总结：
静态部署是“给所有人发同一张提前印好的传单”（速度快、内容固定），动态部署是“给每个人写一封量身定制的信”（内容灵活、实时互动）。

二、建立文件及部署

1.准备

• 一个可以正常访问的域名
  如果没有，可以到以下网站购买
  阿里云
  京东云
  腾讯云
• 一个HTML文件

2.使用Ai生成HTML为例

• 打开所使用的Ai工具发送你的需求

• 此时，Ai直接把这个文件生成后，自动开始了预览功能
  

• 点击预览旁边的 “代码” 按钮
  

• 复制代码区域内所有代码
  

• 新建一个文件夹，命名可随意

• 在新建的这个文件夹内新建一个文本文档

• 使用编辑工具打开这个文本文档，然后把刚刚复制的所有代码复制到里面，并且保存

• 将刚刚编辑好的文本文档进行后缀的更改，将原来的.txt更改为.html，这里以index.html为例
  
  到此我们就把本地文件所准备好了，下面到了使用Cloudflare的部署部分

2.使用Cloudflare对刚刚新建好的文件进行部署

• 打开Cloudflare进行注册登录
  

• 注册登陆完成后，点击主菜单下的 Workers & Pages
  

• 在 Workers & Pages 菜单下，点击右上角的 Create application ，并且选择 Looking to deploy Pages? Get started 里的 Get Started

• 此时选择第二栏 Drag and drop your files ，点击 Get started
  

• 给项目进行命名，然后点击 Create project
  

• 然后看见提示有上传文件的字样
  

• 此时可以把刚刚准备好的文件拖入框内（注意：不是拖入后缀为.html 的文件，而是刚刚新建且包含了.html的文件夹），然后点击右下方的 Deploy
  

• 稍微加载后可以看见，有上传成功的字样，此时已经完成了部署，并且生成了一个pages.dev后缀的网址
  
  我们可以试着打开这个网址，试着能否正常打开。
  

经过测试，确定了这个网址可以正常打开，到此，整个部署已经完成，可以进入绑定域名的步骤，因为通常 Cloudflare 给的这个pages.dev为后缀的网址在国内通常都会被“墙”

3.绑定域名

• 随后在刚刚部署好的 Pages 项目页面，选中刚刚新建的项目，点击顶部的 Custom domains (自定义域) 标签
  

• 点击 Set up a custom domain
  

• 在 Domain 栏目内填写需要绑定的域名，然后点击 Continue
  

• 下一个页面后，继续点击蓝色按钮 Activate domain
  

• 网站稍微审核过后，页面内容里的 Domain 会显示为 Active ，此时表示绑定成功
  

• 我们可以试着打开绑定的域名，验证是否可以正常打开
  
  此时，可以完全正常的打开，到此，我们的全部工作已经完成！

三、结束

通过以上的步骤，可以学会如何部署一个纯HTML页面，也可以使用类似方法，部署一个静态的个人博客，以及更多的功能。同时，也可以尝试修改本地的 HTML 文件，再次上传部署，体验一下“版本迭代”的过程；或者尝试学习使用 Git，实现代码一提交，网站自动更新的 CI/CD 流水线！