如何使用 Gemini 快速构建并部署网站
本教程将引导你完成从生成代码到网站上线的全过程。你不需要懂编程，只需要会“说话”和简单的复制粘贴。
1
第一阶段：用 Gemini 生成网站代码
首先，你需要让 Gemini 帮你写出网站的 HTML、CSS 和 JavaScript 代码。
构思你的指令
你给 Gemini 的指令越具体，生成的网站效果越好。你可以直接复制下方的指令模板：
# 指令示例：
"请帮我写一个 [个人简历/产品落地页/简单的博客主页] 的单页网站代码。
要求如下：
- 使用 HTML5, CSS3 和 简单的 JavaScript。
- 设计风格要 [现代简约/赛博朋克/温馨可爱/专业商务]，配色方案为 [蓝白/黑金/自定义颜色]。
- 包含以下部分：[头图区域、关于我、项目展示、联系方式]。
- 这是一个响应式设计，要在手机端也能完美显示。
- 请将所有代码合并在一个 index.html 文件中，方便我直接使用。"
获取代码
Gemini 会生成一段长代码。点击代码块右上角的 Copy code (复制) 按钮。
2
第二阶段：在本地准备文件
你需要把 Gemini 给你的代码变成电脑上的一个文件。
-
新建文件夹
在你的电脑桌面上新建一个文件夹，命名为
my-website(或者任何你喜欢的名字)。 -
创建并保存文件
打开记事本 (Windows) 或 TextEdit (Mac)，粘贴刚才复制的代码。
重要提示： 保存文件时，文件名必须是index.html(注意后缀是.html而不是.txt)。 -
本地预览
双击
index.html，浏览器会打开它。如果不满意，回到 Gemini 说：“把标题改大一点”或“换个背景色”，然后重复保存步骤。
3
第三阶段：部署到 Cloudflare Pages
现在文件准备好了，我们需要把它放到互联网上，让所有人都能访问。
1. 注册/登录
访问 dash.cloudflare.com 并登录（如果没有账号，注册一个，完全免费）。
2. 找到入口
在左侧侧边栏，点击 "计算和AI - Workers & Pages"。
3. 上传与部署 (核心步骤)
- 点击蓝色的 "创建应用程序" 按钮。
- 点击 "Upload your static files" (上传静态文件) 标签页。
- 上传你刚才创建的文件夹。
- 给项目起个名字（例如
gemini-demo-site）。 - 点击 "部署"。
4
第四阶段：域名配置
查看你的网站
Cloudflare 会分配一个免费子域名 (https://项目名.workers.dev)。点击链接即可访问。
注意：访问限制
workers.dev 后缀的域名在中国大陆可能无法直接访问。建议绑定自己的域名。
如何绑定自定义域名：
- 在 Workers 和 Pages 中找到你的项目，进入 "设置"。
- 选择 "域名和路由"，点击右上角的 "+添加"。
- 选择 "自定义域" (可以将通过 Cloudflare DNS 解析的域名直接绑定)。
5
第五阶段：更新内容
想要修改网站内容？流程非常简单：循环操作即可。
- 让 Gemini 修改代码 & 覆盖本地
index.html - 进入 Cloudflare 后台项目页
- 点击 "Create new deployment" (创建新部署)
- 再次上传文件夹
总结：你的建站三件套
🤖
Gemini
你的全能程序员
📝
记事本
你的代码编辑器
☁️
Cloudflare
你的免费服务器