零代码10分钟用AI搭建个人网站：Google AI Studio + Netlify完整教程

求职季来临，简历同质化严重已经是不争的事实。一位做招聘的HR朋友坦言：现在收到的简历真的大差不差，但如果附了个人网站的链接，他还是会忍不住点进去看看。

今天这篇教程，教你用 Google AI Studio + Netlify 的免费组合，不写一行代码，10分钟内搭建一个可以直接放进简历的个人网站。无论你是在校生、正在找实习还是求职中，这套零代码建站流程都完全通用。

工具选择：为什么是Google AI Studio + Netlify？

整个流程只需要两个在线工具，不用下载任何软件，有浏览器就能操作：

Google AI Studio（aistudio.google.com）：Google官方的AI工具，免费使用，登录Google账号即可。我们用它来生成和修改网页代码，全程不需要手动写代码。
Netlify（netlify.com）：免费的静态网站托管平台，负责把网页文件变成一个真实可访问的链接。对个人网站来说完全够用，不花一分钱。

Google AI Studio 是 Google 于 2023 年底推出的面向开发者和普通用户的 AI 实验平台，本质上是 Gemini 系列大语言模型的官方 Web 端调用入口。Gemini 是 Google DeepMind 开发的多模态大模型，具备理解文本、图像、代码等多种输入的能力。其中 Flash 版本侧重速度和性价比，适合快速迭代；Pro 版本则在推理深度和代码生成质量上更胜一筹。与 ChatGPT 等竞品不同，AI Studio 的免费额度相当慷慨，且生成的代码可以直接在平台内预览，省去了在本地搭建开发环境的步骤。

Netlify 则是目前最主流的静态网站托管平台之一，与 Vercel、GitHub Pages 并列为前端开发者的三大免费部署选择。所谓"静态网站"，是指网页内容在服务器端不需要动态计算——没有数据库、没有后端逻辑，浏览器拿到的就是写好的 HTML、CSS 和 JavaScript 文件。这与 WordPress 等需要 PHP + MySQL 运行的"动态网站"形成对比。对于个人简历网站来说，静态托管完全够用，而且加载速度极快、安全性高、几乎不存在被黑的风险。Netlify 的免费套餐提供每月 100GB 带宽和自动 HTTPS 加密，足以支撑一个个人网站的日常访问量。

Google AI Studio 界面，右上角可以选择模型

在AI Studio中，默认使用的是 Gemini 2.5 Flash Preview 模型。如果生成效果不理想，可以切换到 Gemini Pro 再试一次，选一个更符合你心意的版本。

第一步：提取风格关键词，锁定设计方向

这是很多人忽略但极其关键的一步。不少人直接让AI"做一个苹果风格的网站"，结果每次生成的东西都不一样，风格随机且充满模板感。

核心思路是把流程拆成两步：先锁风格，再生内容。

具体做法：先用一段Prompt让AI分析你喜欢的网站风格（比如苹果官网的简约设计感），提取出一套具体的设计关键词。这些关键词会涵盖配色、排版、字体、间距等维度，成为后续生成网站的"设计规范"。

这一步背后的原理涉及 Prompt Engineering（提示词工程）中的一个核心概念：将模糊的自然语言指令转化为结构化的约束条件。大语言模型在处理"苹果风格"这类抽象描述时，会基于训练数据中的多种理解随机采样，导致输出不稳定。但如果将其拆解为具体的设计参数——例如"无衬线字体、大量留白、黑白灰主色调、圆角卡片布局、行间距 1.6 倍"——模型的输出空间就被大幅收窄，结果的一致性和可控性会显著提升。这种"先抽象再具象"的两步法，本质上是在模拟专业设计师的工作流程：先建立 Design Token（设计令牌），再基于令牌进行页面设计。

为什么要多这一步？因为"苹果风格"是一个模糊的描述，AI每次理解都不同。但如果你把它转化为一组具体的关键词，再作为规则写进生成Prompt里，AI就有了明确的参考标准，输出会稳定得多。

风格来源也不局限于网站——可以是你喜欢的艺术家风格、杂志排版、甚至某个App的设计语言，都可以让AI帮你提炼成可复用的设计关键词。

第二步：用结构化Prompt生成完整网站

风格关键词拿到后，进入第二轮Prompt，正式生成网站代码。

第二轮 prompt 生成网站代码

这个提示词里需要包含三类规则，缺一不可：

设计规则

将第一步提取的风格关键词直接填入Prompt，确保生成的网站风格与预期一致。这是保持视觉统一性的关键。

技术规则

要求AI只输出一个HTML文件，所有CSS样式和JavaScript脚本全部内联。这样你不需要建文件夹、不需要管文件引用关系，一个 index.html 就是一整个网站。

在专业的前端开发中，一个网站通常由多个文件组成：HTML 负责页面结构、CSS 负责视觉样式、JavaScript 负责交互逻辑，三者分离存放是行业最佳实践。但对于零代码用户来说，管理多个文件之间的引用路径（如 <link> 标签引用 CSS、<script> 标签引用 JS）是一个容易出错的环节。所谓"内联"（inline），就是把 CSS 写在 HTML 的 <style> 标签内、把 JavaScript 写在 <script> 标签内，所有内容合并到一个 index.html 文件中。这种做法牺牲了代码的可维护性，但换来了极致的简单——一个文件就是整个网站，拖拽部署零障碍。对于个人简历网站这种页面数量少、更新频率低的场景，这是最务实的选择。

内容规则

把网站的每个板块（自我介绍、教育背景、实习经历、项目经验、技能列表等）要写什么都明确罗列出来，AI就不会自由发挥跑偏。

生成完成后，需要确认两件事：

代码第一行是 <!DOCTYPE html>，最后一行是 </html>——两行都有说明代码完整
如果输出到一半停了，不要重新发，直接在对话框输入 continue，AI会接着往下写

第三步：预览效果并快速调整

代码生成后，可以直接在AI Studio中预览。告诉AI"I want to preview this site"，它会生成一个可预览的文档，点击preview即可查看效果。

生成的个人网站预览效果

也可以点击download下载HTML文件，直接在浏览器中打开查看。这是一个典型的单页网站（one-page website），包含导航、个人介绍、经历、项目等板块。

单页网站是指所有内容都在同一个 HTML 页面内，通过锚点链接（anchor link）实现页面内的跳转，而不是跳转到不同的 URL。用户点击导航栏的"关于""项目"等按钮时，页面会平滑滚动到对应的区块。这种设计模式在个人作品集、产品落地页中非常流行，优点是浏览体验流畅、信息层级清晰、加载速度快（只需请求一次）。需要注意的是，这里的单页网站与前端框架中常说的 SPA（Single Page Application）是不同概念——后者通常指 React、Vue 等框架构建的、通过 JavaScript 动态渲染内容的复杂应用，而我们这里就是最朴素的一个 HTML 文件。

预览时重点检查这几项：

点击导航栏的各个链接（关于、经历、项目等），是否能正确跳转到对应位置
整体滚动一遍，排版有无错乱或重叠
是否有内容显示为空的区域

如果需要修改，直接在AI Studio的对话框中用自然语言描述即可。比如"把实习经历部分加上具体的数据成果"、"把主色调换成更深的蓝色"、"导航栏改成固定在顶部"等等。AI会在原有代码基础上修改，不会推翻重来。

第四步：用Netlify免费部署上线

到这一步，你的网站还只是一个本地文件，别人无法通过链接访问。我们需要把它部署到互联网上，让任何人都能打开。

操作非常简单：

打开 Netlify官网，免费注册一个账号
登录后，直接把下载好的HTML文件拖拽到Netlify的部署区域
等待几秒钟跑完，就会自动生成一个类似 xxx.netlify.app 的链接

在无痕模式下验证网站可访问性

部署完成后，务必做一个验证：打开浏览器的无痕模式，粘贴链接访问。确认在未登录任何账号的情况下网站也能正常打开——这意味着任何人拿到链接都可以访问你的个人网站。

浏览器的无痕模式（Chrome 中叫 Incognito，Safari 中叫 Private Browsing）会创建一个不携带任何 Cookie、缓存和登录状态的干净浏览环境。之所以要用无痕模式验证，是因为在正常浏览模式下，你的浏览器可能缓存了之前的页面版本，或者因为已登录 Netlify 账号而获得了额外的访问权限，导致你看到的效果与其他人看到的不一致。用无痕模式访问，模拟的是一个完全陌生的访客——如果在这种条件下网站能正常加载、样式完整、链接可点击，就说明任何拿到链接的 HR 都能顺利打开你的个人网站。

这个链接可以直接放在PDF简历的开头、邮件签名里、LinkedIn主页上，或者任何你需要展示自己的地方。

常见问题与避坑指南

AI生成的代码跑不起来怎么办？

不要慌，把出问题的源代码直接复制给AI，明确告诉它："不要修改其他地方，你只修bug，不要重写。"基本一两轮对话就能解决。关键是不要让AI重新生成整个页面，否则风格和内容都可能变。

觉得内容太模板化怎么办？

回到AI Studio做第二轮优化，告诉它"保持原有布局，但让内容更加具体"。你可以补充更多数字和细节，或者反过来问AI："你看看哪些经历我可以补充？给我一些提示和问题。"让AI反向引导你完善内容，效果往往比自己硬想要好。

想加图片或更多内容怎么办？

最简单的方式是直接告诉AI你要添加什么，让它帮你修改HTML代码。比如"在项目经历部分加一张截图，图片链接是xxx"。修改完重新下载HTML文件，再拖到Netlify重新部署即可。

总结

整个零代码建站流程回顾：Google AI Studio生成代码 → 预览调整 → Netlify免费部署上线。不用写一行代码，不用下载任何软件，10到15分钟就能拥有一个真实可访问的个人网站。

一个个人网站不能保证你拿下offer，但它能让HR在看你简历时多停留几秒。在简历高度同质化的今天，那几秒可能就是你脱颖而出的关键。