AI+Cloudflare Pages打造免费静态网站教程

在当前大模型普及的时代，即使是普通用户也能通过简单的描述，让AI为你快速生成一个静态网页。然而，“独乐乐不如众乐乐”，当你拥有了一个AI为你定制的网页，想要分享给全世界看时，又该如何操作呢？主题铺今天就为大家带来一个超实用的教程，教你如何利用“赛博活佛”——AI结合Cloudflare的方式，利用提供的免费静态网站托管服务 Cloudflare Pages，轻松发布你的网页，而且没有请求数量限制！

Cloudflare Pages：你免费的静态网站托管利器

Cloudflare是一个功能聚合的强大平台，提供了CDN加速、DDoS防护、DNS管理等众多工具。其中，它的Pages服务专门用于托管静态网站，不仅免费，而且没有请求数量限制，非常适合个人博客、项目展示页或AI生成的简单网页。

第一步：注册Cloudflare账户

要使用Cloudflare Pages，首先你需要一个Cloudflare账户。

1. 访问注册页面：打开浏览器，访问Cloudflare的注册页面：https://dash.cloudflare.com/sign-up。
2. 填写注册信息：
   • 你可以使用国内的电子邮箱进行注册。
   • 填写邮箱地址和密码。
   • 重要：务必勾选“我不是机器人”进行真人检测，然后才能点击“注册”按钮继续。
3. 验证邮箱：注册后，你将收到一封来自Cloudflare的验证邮件（主题通常是“Please verify your email address”）。
   • 点击邮件中的验证链接。
4. 登录并切换语言：验证成功后，使用刚刚注册的账号登录Cloudflare。登录后，你可以在页面右上角找到语言切换选项，将其切换为“中文”，以便后续操作。

第二步：创建你的第一个Pages项目

登录Cloudflare并切换为中文界面后，我们就可以开始创建项目来托管你的网页了。

1. 导航到Workers和Pages：
   • 在Cloudflare页面的左侧菜单栏中，找到【计算（Workers）】选项。
   • 点击展开后，选择【Workers 和 Pages】。这将打开一个新页面。
2. 创建新项目：
   • 在新打开的Workers和Pages页面中，点击【创建应用程序】（或【创建】）按钮。
3. 选择部署方式：
   • Cloudflare Pages支持从GitHub等代码仓库同步文件，但考虑到国内GitHub的访问稳定性，主题铺建议选择【直接上传】。
   • 点击【开始使用】。
4. 命名你的网站：
   • 你将进入填写网站名称的界面。这个名称将作为你网站的子域名，因此只能使用英文、数字和破折号（-）。
   • 例如，你可以命名为 i-have-a-lot-of-ideas。
   • 确定名称后，点击【创建项目】。

第三步：上传你的静态网页文件

现在，你已经创建了项目，可以开始上传你的网页文件了。

1. 准备网页文件：
   • 你可以让DeepSeek或其他AI大模型帮你构思一个简单的网页，并将其HTML代码下载下来，保存为 index.html。
   • 在你的本地电脑上，创建一个新的文件夹（例如 ihavealotofideas），并将 index.html 文件放入其中。
2. 上传网页文件夹：
   • 回到Cloudflare刚刚创建项目的页面（你应该停留在上传文件的界面）。
   • 点击【从计算机中选择】（或直接将文件夹拖拽到指定区域）。
   • 选择你刚刚创建的本地文件夹（例如 ihavealotofideas）。
   • 等待文件上传完成。当提示“所有文件均已成功上传”时，即可进行下一步。
3. 部署站点：
   • 确认文件上传成功后，点击【部署站点】按钮。
   
   • Cloudflare会很快完成部署。部署成功后，你将看到一个显示部署详情的页面，其中包含了你的网站访问链接。点击链接，即可查看你刚刚部署的网页！
   就像文章中提到的示例 https://i-have-a-lot-of-ideas.pages.dev，你的网站将拥有一个以 .pages.dev 结尾的免费子域名。

第四步：后续更新与部署新网页

如果你后续修改了网页内容，或者新增了网页（例如让DeepSeek帮你设计了另一个明亮风格的个人主页），如何更新或添加呢？

1. 准备更新文件：
   • 例如，你新增了一个 index_1.html 文件，将其放入你之前创建的本地文件夹（例如 i-have-a-lot-of-ideas）中。现在这个文件夹里有 index.html 和 index_1.html 两个文件。
2. 进入项目详情页：
   • 回到Cloudflare控制台，再次导航到【计算（Workers）】下面的【Workers 和 Pages】。
   • 点击你之前创建的项目名称（例如 i-have-a-lot-of-ideas）。
3. 创建新部署：
   • 在项目详情页的右上角，点击【创建部署】按钮。
   • 选择你本地存放网页的文件夹（例如 ihavealotofideas），然后点击【保存并部署】。
   • 重要提示： Cloudflare Pages的部署是覆盖式的。这意味着每次部署，你都需要上传包含所有网页的完整文件夹，否则未上传的文件将会被删除。确保在提示“所有文件均已成功上传”后再点击部署。
4. 访问新网页：
   • 部署完成后，你就可以通过在主域名后面加上新网页的文件名来访问它了。
   • 例如：https://你的项目名称.pages.dev/index_1.html（如果你的主页是 index.html，直接访问主域名即可）。

最终总结

Cloudflare Pages作为Cloudflare提供的众多免费功能之一，为我们提供了一个极其便捷、高效且成本为零的静态网站托管解决方案。无论是AI生成的创意网页，还是个人作品集、项目展示页，它都能轻松承载。主题铺认为，掌握这项技能，你就能将你的想法和作品快速分享到互联网上，实现“独乐乐不如众乐乐”！后续，主题铺会继续为大家探索Cloudflare其他强大的免费功能，敬请期待！

网站内容参考：如何在 Cloudflare 上部署网页 (qq.com)