上周文章发布了之后，我看到很多人按教程都成功的把Gemini 3生成的网站弄上线了，给你们点赞！
但在后台，在群里，还有留言区，也有很多读者问了我很多后续问题，比如怎么把Gemini生成的网站内容更新成自己的作品？
又怎么在更新了自己的内容后，再让Gemini改代码不会覆盖自己的修改？如何制作一个完全属于自己的还能方便修改的网站呢？
今天这篇文章就做一个进阶补充。
我对上一篇教程中，我用Gemini 3 写的一个网站做了修改，把其中的部分作品换成了我自己的用来验证。
先说一下我上次介绍的发布工具网站，好用是好用，但我也踩了坑。
事情是这样，我自己在写教程的过程中，一不小心就把它送的免费积分用完了。
虽然是免费，但它每个月只送300积分，正常上传发布访问浏览量不大的情况是没问题，但一旦你做了更多操作。比如像我写教程，多尝试了一个功能，刷的一下就把积分搞没了。结果我上传的网站全挂了，所以这就是有人说我放在教程里的网站打不开了，就是这个原因。
这就有点坑了。
所以，我后面又找了一个新的发布工具，免费发布，没有积分要求，但免费版有提交次数要求，送了500次，对我们做一个网站来说是足够用了。这个是我前司腾讯的产品（十足的信任感），跟谷歌一样也是一位大善人。
它的地址是：https://console.tencentcloud.com/edgeone/pages
注册的时候可能会让你填很多信息，比如绑卡之类的，但基本上都可以跳过，不影响你发布网站和应用。
你注册好了之后，就可以来到服务总览这个页面，然后点创建项目，导入Git仓库。
登录并关联你的github账号，然后选择你要发布的项目。
跟上一篇介绍的一样，各种默认设置都不用改，只需要改下环境变量
变量名填上GEMINI_API_KEY ，右边的变量值随便填几个数字，完事直接点开始部署。
稍微等一会就自动部署成功了，点上面那个蓝色链接就能见到自己的网站了。
好，下面讲讲今天文章的重头戏：
如果你有一些代码基础，其实直接手动去改源代码也是可以的。方法就是直接点开Code，对着代码直接改链接，改文本内容即可。
只不过有一个问题就是，当你再次让AI帮你修改时，想要它别动你已经改过的代码，就会变得非常麻烦。因为你让Gemini帮你改文件中的代码，它基本上就是从头到尾重新写一遍，所以基本上每次都是会全部覆盖掉之前的。也就是文章开头提到的那位朋友遇到的问题。
这样的修改方式就让你想要精确控制修改变得很麻烦，尤其是对于没有代码经验的同学来说。
所以，我今天重点想要写的内容，是给完全没有代码基础的同学，也能通过AI定制出一套属于自己的网站。
咱们开始吧。
1. 代码结构改造
我们先理清一个思路，既然AI会重头开始写代码，那假如把属于我们自己要添加的文字图片信息和我们经常要让AI修改的代码分离开，当让AI修改的时候，只要让它不动我们自己那份文件不就行了？
这其实也就是数据库后台跟前端的区别，但我们这里不讨论程序相关的事情，我们只讨论怎么在不懂程序的情况下还能把开发的活给干好了，最终能解决问题就行。
有了思路，接下来就好办了。
用下面的提示词，让Gemini帮你把它写的网站中的图片文本和代码逻辑做分离。
Role: 你是一个资深的前端架构师。
Task: 请帮我重构代码结构，实现“内容与结构分离”。
Requirements: 请把页面中所有的 文字内容 （标题、段落）和 资源路径 （图片 src、链接 href）提取出来，放在一个单独的 siteData 文件中，该文件在 HTML 的 或 最上方引入。 在 HTML 标签中，通过 ID 或 JavaScript 动态渲染的方式来引用这些数据，或者保留 HTML 结构但注明数据来源。
目的： 这样我以后让你修改样式或布局时，你只需要修改 CSS 和 HTML 结构，而永远不需要触碰 siteData 里的内容。
如果这个代码发给它后，第一次没成功改出来，没关系，多试几次就可以了。
如果试了很多次还是不行，也可以用类似我写的这句提示词：需要放在代码的目录中，不要在对话框中写代码，要生成文件并引用。
多点耐心，最后总是能调出来的，相信我。
改完后的代码结构，你如果有些代码基础的话，应该一眼就能看明白。如果没有基础也没关系，就对照我的截图看也是能看懂的，没有任何难度，放心。
你可以改这个文件中的内容，要是不放心还可以把它先存到本地备份一下，然后回头再贴进去就行。这样就能在确保AI修改代码的时候，还能保证是你的内容了。
好，如何确保AI修改代码的时候不覆盖你改过的内容，这个问题已经解决了。
1. 改文字
先从修改文字开始。
点开Code，然后在siteData.js文件中修改对应的内容，注意不要把一些代码符号也给改动了，比如, {}之类的，不然会不生效。参考图片，我都标注很清楚了。
2. 改图片
改图片可能会稍微麻烦点，你可以看到Gemini自动生成的图片，基本上也是从网上的公开图片中抓下来的，比如unsplash这个网站上的图片。
如果你复制这个链接，就会发现，它会直接打开一张图片。
链接打开后
那么我们就可以模仿这个方式，只要能把自己的图片生成最终这样的链接即可。这个方法就有很多了，比如我上传到Dribbble网站上的图片，右键复制图片地址，把链接替换到代码里的链接即可。
如果你觉得还要各种网站上发作品才能得到链接太麻烦，我也给你找到了一个非常简单又邪修的办法，咱们可以利用discord来生成在线图片链接。
可能有人会问discord是啥？AI绘画工具Midjourney你听说过吧？它就是通过discord来使用的呀。
我们打开discord：https://discord.com/channels/@me
在你自己创建的服务器里，随便找个聊天窗口，选择上传文件。把你想要传到网站上的作品，在这里上传
上传后，点击上传的图片，在放大的图片页面右键复制图片地址。这样就得到了我们需要的图片链接了，没想到吧？哈哈。
把这个地址贴到Gemini生成的siteData文件的对应图片链接位置。
保存代码后，就可以看到你的大作了！
有人可能会问，如果作品比较多，给到的代码模版里不够用了怎么办？
简单，直接复制代码段即可。
把数据中的代码段连带一个大括号一起复制了，然后修改好ID和你自己的内容。注意别漏了任何代码符号，仔细检查。
保存后，页面效果就会被刷新，能看到下面这2张变多的图片了，这就是我复制代码后新增出来的。
我们来验证下，上面提到的方法到底能不能行？
比如你接下来，你突然想到还需要修改页面的功能，调整页面样式效果，但又别动我上面已经改过的内容。
我举个例子，比如我想让图片封面，能够完整的显示图片内容，而不是被裁切。
分享一个技巧：如果你发现用自己说的大白话提示词，Gemini给的结果总是跟你想要的结果不一致，那可能就是提示词的问题。可以把这个问题抛给Gemini，让它给你优化后的提示词。
比如我说：我想让图片的预览，在未点击之前的封面图，能够完整的显示图片内容，能直接修改代码文件，而不是在对话框中给出修改代码的建议或结果，提示词怎么写会更精准？
然后，我把Gemini写的提示词，直接复制贴回给它。
结果就是一步到位，它果然只改了该改的文件，并没有动过我自己修改过的另一个文件。发现它直接就解决了我的问题，它自己就闭环了，哈哈。
一切改完，在Gemini预览都没问题后，我们就按上一篇讲的步骤，直接同步构建，你的网站就真正改好上线了。
从第一篇把网站搞上线，到第二篇能改成真正属于自己的网站，算是完成了网站从0-1上线的全过程。
后续你也能自己改，让AI帮你改，改完还能上线。这样基本上不管你懂不懂代码，都能做出属于自己的网站。
而且，还有AI这个强大的开发专家，免费帮你做任何你想加的特效，功能，想想就觉得自己一下子可以做很多事情了，有没有很开心？
欢迎在评论区提出你的诉求，说不定下一期就能解决你的问题哦。后续我会更新更多实用教程，比如上线一款带AI功能的游戏，做小程序放到微信里赚钱等等，让每一个案例都实用，保持关注吧。
说到做到，我说了会写一系列AI实用教程和案例，今天这篇就算是第3篇了。
如果文章内容对你有帮助，帮忙点赞转发三连，我会更加有动力去研究，分享更多更实用的AI实用方法。
我觉得以前说“人人都是产品经理”，多少有点虚，因为想法容易，落地太难。
但AI让一切都不一样了。
现在想法即产品，输入即输出。不再需要等排期，不再受限于技术。
现在，我们每个人都可以是自己商业闭环的起点和终点，人人都能做老板、人人都是超级个体的时代。
这么一想，真的值得让我们期待了！
复制本文链接 文章为作者独立观点不代表优设网立场，未经允许不得转载。
彩云Sky
852.0w人气 228文章
发评论！每天赢奖品
点击 登录 后，在评论区留言，系统会随机派送奖品
2012年成立至今，是国内备受欢迎的设计师平台，提供奖品赞助 联系我们
DeepSeek实用操作手册
已累计诞生 770 位幸运星
发表评论 为下方 4 条评论点赞，解锁好运彩蛋
↓ 下方为您推荐了一些精彩有趣的文章热评 ↓