保姆级教程！教你用Gemini 3 Pro快速做一个炫酷的个人作品网站

上一篇文章发布后，不少群友反馈说，能用Gemini 写不少游戏跟网页应用了，但只能本地自己看，问能不能把它发布出来给别人看到啊？

这才是一个更实用的问题啊！把AI做的游戏或者网站弄上线，才能发挥它该有的价值啊，不然只能自己玩，并不能解决实际问题。

所以，我这个周末又花了一些时间研究了下这个问题。

今天就给大家带来一篇我研究后的教程。我是对比了各种工具和难易程度，找到了一个最简单，不花钱，能自己定制域名，并且上线后国内能正常打开的工具流。

搞定后，你能发布自己做的内容，并且让其他人通过一个链接就能看见，游戏的话还能直接玩。

现在，你只需要跟着我的教程一步步做，相信我，你肯定也能学会。

像我们设计师找工作肯定会用到作品集，那做一个在线的作品集网站肯定是效果更好的，到时候发作品过去不是一个死的pdf，而是一个带动态的有设计感的在线链接，那多半是对作品展示效果加分的。

所以，我今天会以一个个人作品网站为例子，带大家完成一个产品从0-1上线的完整过程。

先看下最终效果，下面这个链接打开就能看到我发布的个人网站了。

网址：https://caiyunsky.netlify.app

可以先看下网站录屏，Gemini的审美还是不错的，我没有给它任何参考的情况下，一把做成这样还是让我惊讶的。

如果你用电脑打开上面链接，会长这个样子：

而且，它居然还做了手机端的自适应布局。如果你用手机打开，又会长这样：

好，具体怎么做出来的呢？下面分享我做的步骤：

第一步，先把网站用Gemini 3 Pro生成出来。

1. 通过提示词生成网站的框架。我写的提示词也特别的大白话：“我是一个设计师，请帮我设计一个炫酷的个人作品展示网站，并且能够上传我的作品，请帮我完善这个完整的核心功能，框架等等”。

你也改成你想做的网站类型，就像跟一个人讲话就行，甚至讲的比较模糊它都能给你搞。

2. 复制它写的网站框架中跟你要设计的网页有关系的部分，不管三七二十一，直接复制就完事。然后在Gemini 的Bulid中贴进去，就可以开始生成了。

对于Build不是很了解的，可以看我的上一篇教程：

我做的第一版效果基本上就能正常打开了，过程中我发现它居然自己是可以自动修bug的，难怪现在跑出来的结果基本都没啥大问题，比之前的AI工具稳多了。

然后我大概通过几个优化，稍微改下细节问题，就把这个网站优化的差不多没问题了。

因为今天的重点是讲如何发布，所以这里如何优化我就不详细写了。如果你对我如何优化感兴趣，可以通过这个链接查看我完整的优化过程。https://ai.studio/apps/drive/1vnQPbnH-29Iw05xShgP9FtZCJKLnXxDU

好，下面讲讲今天文章的重头戏：

如何发布？

关键原理就是把Gemini 生成的代码保存到GitHub，然后通过一个云端托管服务器绑定一个域名就能发布出来了。

1. Github，准备代码仓库阶段。

① 点击顶部的GitHub图标，把代码保存到GitHub仓库。

② 如果你没登录GitHub的话，就按提示登录下。登录后，给自己要保存的仓库取一个名字，然后点右下角的“Create Git repo”按钮

③ 点右下角的按钮，继续提交代码。

④ 上传完成后，就相当于把你的代码都已经提交到了你GitHub上的代码仓库里了。然后，点右上角的链接，进到GitHub的项目中去查看。

⑤ 在GitHub上找到index.html这个文件，点开它。

⑥ 点开右上角的铅笔图标，这样可以编辑代码。

⑦ 找到最底部的代码段，添加一行很关键的代码：

<script type="module" src="/index.tsx"></script>

这样就能把react的入口文件引用进来。有时候Gemini会自动帮你生成好，所以如果已经有的话，就可以不用动了。

⑧ 然后在右上角点击commit changes。

到这里我们的代码仓库就准备好了，接下来正式开始绑定域名发布。

2. 绑定云链接阶段

这里我经过研究，发现netlify比较好用，优点主要是免费，发布后国内能打开，能直接关联github，同步比较快，配置简单，而且因为有CDN加速，所以打开也快。也有一些其他云链接，但都不大全面，给大家避坑了。

① 打开

网址：https://www.netlify.com

然后用你的github账号登录，这样就能直接关联上你刚才准备好的代码仓库。

② 把你的个人信息设置好后，就能跟着指引直接到选择你项目的界面

选择你刚才用Gemini 提交的代码仓库

③ 点开更多设置

④ 然后各种默认设置都不用改，只需要改下环境变量

Key填上GEMINI_API_KEY  ，右边的Value 随便填几个数字，然后就可以点Deploy确认下一步了。

⑤ 完事之后，就等它构建完成发布。发布完成后，点这个链接，就能看到你做的网站、应用、游戏了。

这个域名在国内也可以打开，不需要魔法上网，手机上也能打开，以后再发自己的作品集是不是非常方便了？你可以把这个链接发给其他人，他们就可以看到你做的东西了，赶紧跟着去试试。几分钟即可拥有自己的独立网站和产品了。

后续，如果你想修改你做的网站内容，比如把图片改成你自己的作品，把文案改成你的简历，就可以回到你的Gemini，或直接在Github修改对应的内容，就能迭代你的网站了。

说到做到，我说了会写一系列AI实用教程和案例，今天这篇就算是第二篇了。

欢迎在评论区提出你的诉求，说不定下一期就能解决你的问题哦。后续我会更新更多实用教程，比如上线一款带AI功能的游戏，做小程序放到微信里赚钱等等，让每一个案例都实用，保持关注吧。

如果文章内容对你有帮助，帮忙点赞转发三连，我会更加有动力去研究，分享更多更实用的AI实用方法。

最后，说一点我最近的感想。

自从谷歌这次更新了Gemini 3 Pro后，AI不管是在写代码的成功率，还是对需求的理解能力上，我真切的感受到了巨大的提升，这让人人成为独立创业者的门槛大大降低。现在只要你有想法，可以找一堆AI员工帮你搞定各种执行的事。

虽然我觉得，AI目前能实际嵌入工作流大概能有30%左右，比如是做运营广告，做一个圣诞海报，元宵节海报之类的，用AI出图几乎可以占到80%+，而在一些需要跨部门协作的大项目中，依然还是没法脱离人来做决策和沟通。

除了设计，对于一些开发模块，现在也能用AI辅助，但对于复杂的真实项目架构来说，目前AI还没法替代人来做。

但大趋势是肯定的，未来AI介入我们的工作流是必然，这一点大家应该有共识。只是，我没想到会这么快，且可能接下来的进化速度会越来越快。

我的领导觉得未来5年左右，对于UI和开发至少要淘汰10%，我觉得他说的可能还是太保守了。

按现在这个发展速度，我认为再过两年，可能整个行业就会完全不一样。如何解决项目中多模块复杂问题，如何协作多部门一起工作，这些我觉得短期很难脱离人，但如果只是画图（执行）的话，可能真的会比较危险。

大家琢磨琢磨，是不是这么回事？