如何部署上线做好的 AI 网页?

全程可视化 · 免费全球 CDN · 10 分钟搞定

痛点

“Gemini 3、ChatGPT 做的 AI 网页发给朋友,国内打不开?
不想买服务器、不想备案,还要默认 HTTPS?”

本期目标

“把你的 HTML 文件在 Cloudflare Pages 免费上线。
自动 CDN 加速,任何手机都能直接访问!”

01

先看你有什么文件?

📄

纯静态网页

index.html + css/js

🔥 本期重点
⚛️

前端框架

Vue / React (src目录)

🔌

带后端

Python / Node.js

02

部署全景图

🤖
AI 生成代码
💻
本地预览检查
☁️
Cloudflare Pages
自动 HTTPS · 全球 CDN
🔗
pages.dev / 自定义域名
03

准备清单

  • 电脑 & 浏览器
  • AI 生成好的代码
  • Cloudflare 账号(免费注册)
04

选哪个平台?

本节课用 Cloudflare Pages 做案例,其他常见方案也可按需要选择:

推荐 / 本次案例

Cloudflare Pages

✅ 免费 CDN + 默认 HTTPS;仓库/上传皆可;全球加速。

Vercel

✅ 前端框架友好、自动构建; 中国大陆访问偶尔慢。

Netlify / Render

✅ 简单 CI/CD + Serverless; 免费额度有限,国内速度一般。

GitHub Pages

✅ 完全免费适合静态站; 需推代码,功能简单,国内速度较慢。

国内云静态托管 (腾讯/阿里等)

✅ 国内访问快; 可能需要备案,按流量计费,证书需配置。

05

开始实战

跟着做,5步上线

1

整理代码文件

新建一个文件夹,把所有文件放进去。必须要有 index.html

my-project/
├── index.html (入口)
├── style.css
└── script.js
2

注册并登录 Cloudflare

访问 cloudflare.com 注册账号,完成邮箱验证后进入 Workers & PagesPages

⚠️ 首次登录会提示添加站点,可先跳过,直接点击 “Create a project”

3

创建 Pages 项目

方式 A:连仓库 Authorize GitHub/GitLab,选仓库;纯静态可留空构建命令,输出目录填根目录或 dist
方式 B:直接上传 选择 Upload Assets,拖拽打包好的静态文件或 zip;每次更新重新上传即可。
4

配置域名 & HTTPS

默认获得 .pages.dev 域名和免费证书;在 Settings → Domains 里添加自定义域名。

DNS 指向:给自定义域添加 CNAME 指向 pages.dev,勾选 “Always use HTTPS”。

上线成功!

复制 pages.dev 或自定义域链接,全球 CDN 秒级访问;更新代码自动重新部署。