大家好，我是井云AI的产品经理 Jax。
你敢信，10分钟开发，1 分钟上线，手机电脑都能看。
没错，这就是Gemini 3 Pro带来的变革。
自Gemini 3 Pro发布以来，最引人瞩目的亮点在于其革命性的“Vibe Coding”能力。这项技术让非技术人员也能通过简单的自然语言描述，指挥AI生成符合自己需求的代码。
只要对 AI 说一句：“我想做个个人主页”，它就能自动生成一个完整网站！
无需学习HTML，不必购买域名或配置服务器，一切变得前所未有的简单。
EdgeOne Pages部署，1分钟就能上线您的网站，小白用户也不用怕，不需要github账号了。
现在，动动嘴就行。
您的第一个网站，真的可以这么简单。
本教程只需 3 步：
1️⃣ 用 Gemini 一句话生成网页代码
2️⃣ 下载项目文件
3️⃣ 一键部署到腾讯 EdgeOne，获得网址
教程演示网址：https://subview.jingyun.chat/
全程无需编程，跟着截图操作就行 👇
打开Google Ai Studio的官网（这里需要魔法上网）。
https://aistudio.google.com/apps
打开后，选择Build页面。（如果是从首页进去，就点击这里，直接通过https://aistudio.google.com/apps链接进入的则忽略即可。）
图片展示了Google AI Studio官网界面。左侧导航栏中“Build”选项被红色箭头突出显示。右侧上方有“New Gemini 3: Our most intelligent model to date”及“Try it”按钮。中间部分有“Vibe code GenAI apps”“Chat with models”“Monitor usage and projects”三个功能选项。下方“Get started with Gemini”区域展示了Python代码示例。该图片与文档中“用Gemini一句话生成网页代码”部分内容相关，用于说明在Google AI Studio官网中选择“Build”选项的操作步骤。
然后再输入框中输入：（你自己可以根据需求修改）
我要做一个摄影师的个人主页，展示作品图集、关于我和联系方式，黑色背景+白色文字，高级感。
图片展示的是Google AI Studio的界面，用于生成网页代码。界面左侧有“Build”“Start”“Gallery”等选项，右侧上方有“Build your ideas with Gemini”标题。中间输入框内提示“输入你要做什么内容即可”，并有红色框突出显示“我要做一个简约风格的个人主页，展示公司画像，关于我和联系方式，黑色背景+白色文字，高级感”。下方有“Model: Gemini 3 Pro Preview”等信息，以及“Build”按钮。该图片与上文“用Gemini一句话生成网页代码”内容相关，展示了输入提示词的界面。
第一版给出的是英文版的，效果如下。
图片展示的是Gemini 3 Pro生成的英文版个人主页效果。主页背景为黑色，顶部有导航栏，中间大标题为“Selected Works”，下方有“ALL”“PORTRAIT”“LANDSCAPE”等分类标签，展示多张黑白摄影作品，如戴墨镜的女性、手持相机的男子等。左侧有“Code assistant”区域，显示代码文件列表。右侧有“Checkpoint”区域，可查看和恢复代码版本。底部有“Suggestions”区域，提供AI功能建议。该图片与文档中Gemini生成网页代码的上下文对应，展示了生成效果。
我们继续给他提示词，让它修改，这里比较长，直接复制就可以用了。
请重新生成一个更现代、视觉吸引力更强的个人摄影主页（采用中文版），采用酷炫但不花哨的配色方案（例如深蓝+霓虹紫、暗黑+青柠绿等），避免黑白摄影风。
所有技术必须使用开源且可免费商用的资源：
样式用 Tailwind CSS（通过 CDN 引入），可搭配 DaisyUI 组件；
图标使用 Heroicons 或 Lucide Icons（以内联 SVG 形式嵌入）；
头像用 DiceBear API 随机生成（如 https://api.dicebear.com/9.x/avataaars/svg?seed=yourname）；
背景图/项目图用 Unsplash 或 Pexels 的示例链接（如 https://source.unsplash.com/random/800x600/?tech）；
字体从 Google Fonts 选一款现代无衬线体（如 Inter、Poppins）；
必须支持手机和电脑自适应布局，响应式设计优先；
输出为一个完整的单文件 HTML，无需外部依赖，打开即用。
后续我需要部署到腾讯EdgeOne Pages上面去。
修改后的效果如下：
图片展示了Gemini生成的网页代码效果。左侧是代码生成界面，显示了生成网页的代码内容，包括HTML、CSS和JavaScript代码。右侧是生成的网页展示，页面背景为深色，有“CAPTURE THE FUTURE REALITY”等文字，底部有“欢迎合作”按钮。该图片与文档中“用Gemini一句话生成网页代码”内容相关，展示了Gemini根据提示词生成的网页效果，是文档中介绍Gemini生成网页功能的直观呈现。
继续优化，输入提示词，然后把截图发给Gemini。
红色箭头标记的地方的图片没正常显示出来，且网页其他地方英文都要改为中文版。
图片展示的是Gemini 3 Pro生成的网页代码效果。左侧为代码编辑区域，显示了网页代码及部分组件代码。右侧是网页预览，呈现了“Digital Soul”主题的网页界面，包含“Cyberpunk”“Urban Runner”“Code Matrix”等板块，每个板块下方有对应主题的图片。图片与上下文紧密相关，直观呈现了Gemini 3 Pro根据提示词生成的网页效果，辅助说明其生成网页代码的能力。
图片展示了Gemini 3 Pro生成的网页效果。左侧是网页代码界面，提示“Running for 65s”，并有“Make changes, add new features, ask for anything”等操作提示。右侧是网页预览，显示“NEON VISION - 想象出自作者”标题，有“Digital Soul”“Future City”“Light Speed”等主题板块，底部有“网站合作”等信息。图片与上文提到的继续优化网页，将截图发给Gemini的内容相关，展示了优化后的网页效果。
修改之后的效果看上去非常不错。
图片展示的是Gemini 3 Pro生成的网页代码预览界面。左侧显示代码辅助信息，如Gemini 3 Pro预览已运行124s，中间是网页预览区域，呈现多个网页设计示例，如“霓虹灯效”“数字灵魂”“未来都市”等，底部有“数字灵魂”“未来都市”“代码矩阵”“霓虹灯效”四个选项卡。右侧有“Preview”“Code”“Fullscreen”等功能按钮。该图与文档中Gemini生成网页代码及后续优化内容相关，直观呈现了生成的网页效果。
往下滚动鼠标到网页底部，网站合作这里有一个bug，就是无法点击发送数据。
图片展示的是Gemini 3 Pro生成的网页合作页面。左侧有“传输信道”板块，列出邮箱、社交媒体账号等信息。右侧是“商务合作”板块，包含姓名、邮箱、任务类型等输入框，以及“你好，我想要合作”等提示词输入区域，底部有“发送数据”按钮。图片中红色箭头指向“发送数据”按钮，与上下文提到的“网站合作这里有一个bug，就是无法点击发送数据”相呼应，表明该按钮是发送合作数据的入口。
我们继续截图然后加上提示词发送给Gemini修改。
网站底部箭头所指的地方，无法点击“发送数据”，请修改这个bug。
修改后效果如下，点击提交就能显示成功了，这个现在是模拟的假数据。并没有真正的发送邮件。（如有需要可以继续跟Gemini对话来完善功能即可）
图片展示了Gemini 3 Pro生成网页代码的界面。左侧是代码编辑区域，显示了多个文件夹及文件，如components、pages等。右侧是代码预览区域，显示了“启动上行链路”的网页内容，有“传输信道”“传输参数”等输入框，下方有“传输成功”按钮。图片中红色框突出显示了用户反馈的“无法点击“发送数据””问题，以及一张名为“image.png”的图片。该图片与文档中用Gemini生成网页代码并优化操作的上下文相关，展示了生成的网页代码及反馈问题。
继续优化
身份识别、通讯频率、任务类型、数据包内容，这些表述不太适合国内用户，请改为：姓名、邮箱、类型、内容。
也可以检查网站其他地方有没表述不适合的，都可以优化。
图片展示的是NEO.VISION平台界面，右上角有“首页”“模型库”“关于”等选项。画面中间突出显示“启动上行链路”，下方提示“准备好升级你的视觉品牌了吗？通过以下安全按钮联系我”。右侧红框内是“启动上行链路”相关设置区域，包含“身份验证”“通信频率”“任务类型”“数据内容”等输入框，底部有“发送数据”按钮。该图片与文档中“用Gemini一句话生成网页代码”部分相关，是后续操作的界面展示。
修改完成后，我们把发送邮件按钮优化一下。
请把“发送数据”改为“发送邮件”按钮。点击后直接打开gmail网页版，然后填充对应内容。
修改完后效果如下：
图片展示的是NEO.VISION官网页面。页面上方有“NEO.VISION”标志及导航栏。中间大标题为“开启合作对话”，下方提示“准备好升级你的视觉品牌了吗？请填写下方信息或直接通过邮邮联系我”。左侧有联系方式，包括电子邮件、社交媒体账号及工作地点。右侧是填写信息的区域，有姓名、电子邮箱、项目咨询、需求内容等输入框，底部有“发送邮件”按钮。该图片与文档中“下载项目文件”步骤相关，展示了下载前的官网页面情况。
填充完内容后，点击发送邮件，会打开一个新的Gmail邮件发送的网页。到此操作就完成了。
图片展示的是一个Gmail界面，主题为“[NEO.VISION] 商务合作 - 来自 test”。界面显示收件人为test@gmail.com，发件人为test。邮件内容包含姓名“test”、回复邮箱“test@gmail.com”、意向主题“商务合作”及“我想合作”字样。界面底部有“Send”发送按钮，以及字体、对齐、列表、插入图片等编辑选项。该图片与文档中“01用Gemini一句话生成网页代码”部分相关，展示了使用Gemini生成的网页代码发送邮件后的效果。
点击右上角下载按钮，下载程序压缩包。
图片展示了Gemini 3 Pro生成的网页代码界面。左侧是代码助手界面，显示了项目文件夹结构及部分代码。右侧是生成的网页预览，标题为“NEON VISION”，内容为“开启合作对话”，并有“建立联系”按钮。右上角有“Device”选项，箭头指向该选项。该图片与文档中“下载项目文件”步骤相关，说明点击右上角“Device”按钮后，可下载生成的项目文件。
下载完成后，备用。文件名字你们的创建的项目应该跟我这边不一样。
图片展示了Gemini 3 Pro项目文件下载后的界面。左侧是文件列表，显示文件名为“neon - lens - 视觉创作者.zip”，修改日期为2025/12/16 12:49，类型为WinRAR ZIP压缩文件，大小为46 KB。右侧有一个红色箭头指向文件名称。该图片与文档中“下载项目文件”部分对应，说明下载完成后项目文件的存储情况，文件名为创建项目时自定义的名称，与文档中提到的“文件名字你们的创建的项目应该跟我这边不一样”相呼应。
首先打开EdgeOne Pages的页面，地址为：
https://cloud.tencent.com/product/teo
打开网页后，选择账号登录。
图片展示的是EdgeOne Pages登录成功后的页面。页面左侧显示“切换登录方式”及“选择登录账号”，有主账号和微信用户登录选项，主账号处输入了账号ID。右侧有“AI编程必用后端平台 云开发 CloudBase”的介绍，包括提供MySQL数据库、应用托管服务等优势，以及“立即体验”按钮。该图片与上文“登录成功后，页面如下，然后鼠标移动到右侧‘创建项目’，然后会弹出子菜单，这里选择‘通过上传文件创建’”的内容相关，是后续操作的页面展示。
登录成功后，页面如下，然后鼠标移动到右侧“创建项目”，然后会弹出子菜单，这里选择“通过上传文件创建”。
图片展示的是EdgeOne Pages的页面，地址为console.cloud.tencent.com/edgeone。页面上方有欢迎使用EdgeOne的提示，下方有“提升网站/APP速度及安全性”和“通过Pages快速部署网站”两个板块。右侧“创建项目”处弹出子菜单，其中“通过上传文件创建”被红色箭头指向。该图片与文档中“登录成功后，页面如下，然后鼠标移动到右侧‘创建项目’，然后会弹出子菜单，这里选择‘通过上传文件创建’”的内容对应，直观呈现了操作步骤中选择创建项目方式的页面情况。
把项目压缩包拖到网页中（箭头标记的地方），然后填入项目名称，输入：英文或者拼音
图片展示的是EdgeOne Pages的“直接上传”页面。页面上方有“服务总线”等导航栏。中间区域显示“上传项目资产，一键部署站点”，并有“立即部署”按钮。左侧有“服务总线”等选项。页面中有“项目名称”输入框，已输入“test001”，下方有“加速区域”下拉框，显示“全球可用（含中国大陆）”。下方有“开始部署”按钮，还有“neon - lens - 视觉创作者.zip”文件，显示资产大小为46.99KB，文件数量为1。该图片与文档中“通过上传文件创建项目”步骤相关，展示了操作界面及关键输入项。
然后点击：立即部署。
图片展示的是EdgeOne Pages的“直接上传”页面。左侧为功能导航栏，当前选中“服务加速”。右侧上方显示“上传项目资产，一键部署站点”，下方有项目名称输入框和加速区域选择框，当前显示“全球加速（含中国大陆）”。下方有一个蓝色虚线框区域，内有“上传资产中”字样及进度条，进度为100%。该图片与文档中“通过上传文件创建项目”步骤相关，展示了上传项目资产并一键部署站点的操作界面。
图片展示的是在腾讯EdgeOne Pages页面将项目部署成功后的界面。界面左侧有项目概况、存储等功能选项栏，右侧上方显示项目相关信息，包括项目名称“test001”等，下方是构建日志，记录了从开始构建到完成的时间及各步骤，如“Running build”“Fetching zip file”等操作的具体时间点，后续点击“预览”按钮即可查看网页。
部署成功后如图所示，后面点击“预览”按钮就可以查看网页了。
图片展示了腾讯云EdgeOne Pages一键部署成功后的页面。页面右上角有“立即部署”按钮，下方显示“恭喜！部署成功，您可以点击预览按钮访问页面”，并有彩色气球装饰。左侧是构建日志，记录了构建过程中的各项操作及时间。该图片与文档中“一键部署到腾讯EdgeOne，获得网址”部分对应，直观呈现了部署成功后的界面情况，帮助用户了解部署后的状态及后续操作指引。
点击预览后，在弹出窗口中点击蓝色链接，就可以访问网页了。
图片展示了在EdgeOne Pages页面部署成功后，点击“预览”按钮弹出的窗口。窗口中显示了网址“https://test001-4cguuf8q.edgeone.com/”，并有红色箭头指向该网址，旁边文字提示“点击打开即可访问”。该图片与上下文紧密相关，上下文提到部署成功后点击“预览”按钮可查看网页，此图直观呈现了点击预览后弹出窗口中网址显示及访问指引，帮助用户了解如何访问已部署的网页。
恭喜您，您成功了。
您的网站已经可以非常完美的展现出来了，不仅电脑端可以访问，移动端也可以自适应，效果非常棒。
图片展示的是Gemini 3 Pro一键部署到腾讯EdgeOne后生成的网页界面。背景为深色，左侧有“NEO.VISION”标识，右侧有“首页”“视频库”“关于”“链接”导航栏。中间大字“捕捉未来实境”，下方文字“我们不只是记录影像，我们直面视觉体验，探索霓虹灯下的城市脉搏与数字时代的独特美学”。底部有“浏览作品”和“发起合作”按钮，以及“你基于第三方网络图片，如侵权，请联系删除”提示。该图与文档中部署成功后可预览网页的内容相关，展示了网页的实际呈现效果。
图片展示的是Gemini 3 Pro一键部署到腾讯EdgeOne后生成的网页界面。页面顶部显示网址“test001 - 4qzu6avbsj.edgeone.cool”，并有“Save - Data”选项。中间部分以“NEO VISION”为标题，下方有“次世代视觉艺术”“捕捉未来实境”等文字，还配有“浏览作品”“发起合作”按钮。底部有“仅用于演示和测试目的，请勿输入任何敏感数据”提示。该图片与文档中部署成功后可访问网页的内容相关，直观呈现了网页的实际展示效果。
绑定自定义域名后，全球用户都能访问。
如果要想别人也能访问，就需要配置自定义域名，要不然只能自己访问。这里配置起来也非常简单，前提是需要你要有域名。点击预览后，再点击蓝色链接“自定义域名”。
图片展示的是Gemini 3 Pro项目中“项目概览”页面，背景为“捕捉未来实境”宣传图。页面右侧有项目名称、域名、加速区域等信息，下方显示“项目中”状态。关键信息是“预览地址”处，显示为https://test001 - 1 - starcexx.edgexone.com/ee，右下角有“点击这里可以去配置域名”提示，箭头指向该提示。此图与上下文关系紧密，是配置自定义域名前的预览地址展示，引导用户进行后续域名配置操作。
然后按照提示操作即可，我这里是去阿里云配置的域名，如果你有其他域名服务商请自行前往配置就可以了。
图片展示的是Gemini 3 Pro绑定自定义域名后，进行DNS解析验证的界面。界面上方显示“验证域名 subview.jingyun.chat 的归属权”，下方有DNS解析验证和文件验证两种方式，当前选中DNS解析验证。关键信息是需在域名服务商添加解析记录，示例为“edgeone.cloud.tencent.com”指向“subview.jingyun.chat”，并提示等待TXT记录生效，一般需5 - 10分钟。界面右下角有“验证”和“取消”按钮，当前显示“验证”按钮，且已验证成功。
这里是添加TXT记录
图片展示的是添加TXT记录的界面。界面中“主机记录”处显示为“edgernerereclaim.subview”，“记录值”处有部分被遮挡的内容。两个位置均有红色箭头指向，是核心内容。TXT记录类型为文本，长度限制为255，常用于SPF记录等。界面右侧有TXT记录说明及注意事项，如日常运维中建议清理无用TXT记录等。该图片与上下文紧密相关，是对文档中“这里是添加TXT记录”内容的直观展示。
配置完后，等一会儿就会出现CNAME的问题，接下来继续去域名服务配置即可。
这里是：subview.jingyun.chat.pages.dnsoe6.com.
末尾有一个点，阿里云里面配置的时候会自动省略，不用管就可以。
阿里云的CNAME里面配置为：subview.jingyun.chat.pages.dnsoe6.com
配置 DNS 的 CNAME 记录， 官网文档：
https://edgeone.cloud.tencent.com/pages/document/175074658405122048
图片展示的是腾讯云控制台的域名管理界面。其中，“subview.jingyun.chat.pages.dnsoe6.com”这条记录的CNAME状态显示为“配置中”，并有红色箭头指向该状态。界面左侧有多个功能选项如存储管理、KV存储等，右侧主要为域名管理相关内容。此图与上下文内容相关，上下文在介绍配置DNS的CNAME记录相关操作，图片展示了配置过程中CNAME状态查看的具体页面情况，帮助用户直观了解配置状态。
配置完CNAME后等一会儿显示已配置，这个时候你可以选择去配置HTTPS或者不配置（不配置的话就是访问的时候会有安全提示，不是也能又好）
图片展示的是腾讯云EdgeOne平台中域名管理页面。页面显示“test0501 - cliappxv.edgeone.cloud”已生效，其CNAME为“subview.jingyun.chat.pages.dnsoe6.com”。页面右下角有红色箭头指向“生效后，点击配置HTTPS”文字，提示操作步骤。该图片与上文配置DNS的CNAME记录后，需点击配置HTTPS以申请免费HTTPS证书的内容相关，直观呈现了操作指引位置。
点击配置，去申请HTTPS，这里是免费申请。
图片展示的是腾讯云管理后台中HTTPS配置界面。界面显示“强制HTTPS”开关已关闭，边缘HTTPS证书为“未配置”。下方有“配置”按钮，箭头指向该按钮。该图片与文档中“配置HTTPS”的操作步骤相关，文档提到点击配置后可申请免费HTTPS证书，此图直观呈现了配置HTTPS证书前的界面状态，辅助用户理解操作位置。
选择免费申请证书，然后点确定
图片展示的是腾讯云Gemini 3 Pro的HTTPS证书配置界面。画面中“不配置”和“申请免费证书”两个选项被红色箭头突出显示。下方有“确定”和“取消”按钮，其中“确定”按钮被红色箭头指向。该图片与文档中“点击配置，去申请HTTPS，这里是免费申请”及“选择免费申请证书，然后点确定”的操作步骤相关，直观呈现了申请免费HTTPS证书的界面及关键操作按钮。
点击后，等待配置完成就能正常访问了。
图片展示了腾讯云EdgeOne页面中HTTPS配置界面。界面中“强制HTTPS”开关处于开启状态，下方有“边疆HTTPS证书”按钮，点击后可申请免费证书。还显示了证书状态为“申请中”，并提示需先配置CNAME才能申请证书，申请方式可参考“如何通过CNAME申请”。图片与上文配置完CNAME后申请HTTPS的内容相关，展示了申请HTTPS证书的步骤界面。
图片展示的是腾讯云EdgeOne页面中HTTPS配置界面。界面显示“subview.jingyun.chat”域名的HTTPS配置状态，其中“强制HTTPS”开关已开启。关键信息是“边缘HTTPS证书”已申请成功，证书类型为RSA 2048，申请时间为2020 - 03 - 16 07:59:59，状态为“部署中...”。该图片与上文配置完CNAME后申请HTTPS的内容相关，展示了HTTPS配置的当前状态。
图片展示了Edge One平台中HTTPS配置成功后的界面。画面右侧弹出“HTTPS配置”窗口，显示“强制HTTPS”已开启，且有“边缘HTTPS证书”相关详细信息，如证书类型、有效期、加密算法等。窗口下方有“刷新”按钮。画面左下角有“部署完成”字样。该图片与上文配置完CNAME后申请HTTPS并等待配置完成的内容相关，直观呈现了配置成功后的状态。
这样就能通过这个地址让家人朋友访问了
https://subview.jingyun.chat/
到此，本教程已完成。您现在可以非常快速地访问您的网站了。
