用Gemini 3 pro做了一个炫酷网站，并且成功上线GitHub
今天就给大家带来一篇我研究后的教程。我是对比了各种工具和难易程度，找到了一个最简单，不花钱，能自己定制域名，并且上线后国内能正常打开的工具流。搞定后，你能发布自己做的内容，并且让其他人通过一个链接就能看见，游戏的话还能直接玩。现在，你只需要跟着我的教程一步步做，相信我，你肯定也能学会。像我们设计师找工作肯定会用到作品集，那做一个在线的作品集网站肯定是效果更好的，到时候发作品过去不是一个死的pdf，而是一个带动态的有设计感的在线链接，那多半是对作品展示效果加分的。所以，我今天会以一个个人作品网站为例子，带大家完成一个产品从0-1上线的完整过程。先看下最终效果，可以先看下网站录屏，Gemini的审美还是不错的，我没有给它任何参考的情况下，一把做成这样还是让我惊讶的。如果你用电脑打开上面链接，会长这个样子：而且，它居然还做了手机端的自适应布局。如果你用手机打开，又会长这样：好，具体怎么做出来的呢？下面分享我做的步骤：第一步，先把网站用Gemini 3 pro生成出来。1、通过提示词生成网站的框架。我写的提示词也特别的大白话：“我是一个设计师，请帮我设计一个炫酷的个人作品展示网站，并且能够上传我的作品，请帮我完善这个完整的核心功能，框架等等”。你也改成你想做的网站类型，就像跟一个人讲话就行，甚至讲的比较模糊它都能给你搞。2、复制它写的网站框架中跟你要设计的网页有关系的部分，不管三七二十一，直接复制就完事。然后在Gemini 的Bulid中贴进去，就可以开始生成了。对于Build不是很了解的，可以看我的上一篇教程《我用Gemini 3 pro ，10分钟写了一个算命APP，还迭代了N版》我做的第一版效果基本上就能正常打开了，过程中我发现它居然自己是可以自动修bug的，难怪现在跑出来的结果基本都没啥大问题，比之前的AI工具稳多了。然后我大概通过几个优化，稍微改下细节问题，就把这个网站优化的差不多没问题了。因为今天的重点是讲如何发布，所以这里如何优化我就不详细写了。如果你对我如何优化感兴趣，可以通过这个链接查看我完整的优化过程。好，下面讲讲今天文章的重头戏：200
如何发布？
关键原理就是把Gemini 生成的代码保存到GitHub，然后通过一个云端托管服务器绑定一个域名就能发布出来了。Github，准备代码仓库阶段。1、点击顶部的GitHub图标，把代码保存到GitHub仓库。2、如果你没登录GitHub的话，就按提示登录下。登录后，给自己要保存的仓库取一个名字，然后点右下角的“Create Git repo”按钮3、点右下角的按钮，继续提交代码。4、上传完成后，就相当于把你的代码都已经提交到了你GitHub上的代码仓库里了。然后，点右上角的链接，进到GitHub的项目中去查看。5、在GitHub上找到index.html这个文件，点开它。6、点开右上角的铅笔图标，这样可以编辑代码。7、找到最底部的代码段，添加一行很关键的代码：script type="module" src="/index.tsx">script>这样就能把react的入口文件引用进来。有时候Gemini会自动帮你生成好，所以如果已经有的话，就可以不用动了。8、然后在右上角点击commit changes。到这里我们的代码仓库就准备好了，接下来正式开始绑定域名发布。绑定云链接阶段这里我经过研究，发现netlify比较好用，优点主要是免费，发布后国内能打开，能直接关联github，同步比较快，配置简单，而且因为有CDN加速，所以打开也快。也有一些其他云链接，但都不大全面，给大家避坑了。1、打开然后用你的github账号登录，这样就能直接关联上你刚才准备好的代码仓库。2、把你的个人信息设置好后，就能跟着指引直接到选择你项目的界面选择你刚才用Gemini 提交的代码仓库3、点开更多设置4、然后各种默认设置都不用改，只需要改下环境变量Key填上GEMINI_API_KEY，右边的Value 随便填几个数字，然后就可以点Deploy确认下一步了。5、完事之后，就等它构建完成发布。发布完成后，点这个链接，就能看到你做的网站、应用、游戏了。这个域名在国内也可以打开，不需要科学上网，手机上也能打开，以后再发自己的作品集是不是非常方便了？你可以把这个链接发给其他人，他们就可以看到你做的东西了，赶紧跟着去试试。几分钟即可拥有自己的独立网站和产品了。后续，如果你想修改你做的网站内容，比如把图片改成你自己的作品，把文案改成你的简历，就可以回到你的Gemini，或直接在Github修改对应的内容，就能迭代你的网站了。说到做到，我说了会写一系列AI实用教程和案例，今天这篇就算是第二篇了。最后，说一点我最近的感想。自从谷歌这次更新了Gemini 3 pro后，AI不管是在写代码的成功率，还是对需求的理解能力上，我真切的感受到了巨大的提升，这让人人成为独立创业者的门槛大大降低。现在只要你有想法，可以找一堆AI员工帮你搞定各种执行的事。虽然我觉得，AI目前能实际嵌入工作流大概能有30%左右，比如是做运营广告，做一个圣诞海报，元宵节海报之类的，用AI出图几乎可以占到80%+，而在一些需要跨部门协作的大项目中，依然还是没法脱离人来做决策和沟通。除了设计，对于一些开发模块，现在也能用AI辅助，但对于复杂的真实项目架构来说，目前AI还没法替代人来做。但大趋势是肯定的，未来AI介入我们的工作流是必然，这一点大家应该有共识。只是，我没想到会这么快，且可能接下来的进化速度会越来越快。我的领导觉得未来5年左右，对于UI和开发至少要淘汰10%，我觉得他说的可能还是太保守了。按现在这个发展速度，我认为再过两年，可能整个行业就会完全不一样。如何解决项目中多模块复杂问题，如何协作多部门一起工作，这些我觉得短期很难脱离人，但如果只是画图（执行）的话，可能真的会比较危险。
页:
[1]