零代码建站教程：Trae+GitHub Pages搭建个人主页全流程

对于不懂代码的人来说，搭建一个可以公开访问的个人网站曾经是一件遥不可及的事情。但随着AI编程工具的成熟，这件事变得前所未有的简单。本文将详细介绍如何利用国内免费的AI编程工具 Trae，配合 GitHub Pages，从零开始搭建一个可供外部访问的个人主页，全程无需手写一行代码。

前期准备：搭建个人网站的三个必备工具

在正式开始零代码建站之前，我们需要准备三样东西：

1. GitHub 账号：这是我们网站的"托管平台"。GitHub Pages 是 GitHub 提供的免费静态网站托管服务，只要按照规则创建仓库，就能自动生成一个可访问的网站。

技术背景：静态网站与 GitHub Pages GitHub Pages 基于静态网站生成技术，其底层支持 Jekyll 框架，也完全兼容纯 HTML/CSS/JavaScript 文件。静态网站与动态网站的核心区别在于：静态网站的所有页面内容在服务器上预先生成，用户访问时直接返回文件，无需实时计算；而动态网站需要服务器在每次请求时执行程序、查询数据库后再生成页面。这使得静态网站具有加载速度快、安全性高、托管成本极低的天然优势，非常适合个人主页、作品集等展示类场景。GitHub Pages 正是利用了这一特性，让每个人都能以零成本获得一个稳定可靠的网站托管环境。

2. Git 命令行工具：这是本地与 GitHub 之间的"桥梁"，用于将本地生成的网页文件推送到 GitHub 仓库。下载安装后按照默认流程完成配置即可。

技术背景：Git 与版本控制 Git 是由 Linux 之父 Linus Torvalds 于 2005 年创建的分布式版本控制系统，目前已成为全球软件开发的事实标准。它的核心功能是追踪文件的每一次变更，允许开发者在不同版本之间自由切换，并支持多人协作。对于建站场景而言，Git 扮演的是"本地文件快递员"的角色——通过 git push 命令，可以将本地电脑上的网页文件上传到 GitHub 服务器。GitHub 则是基于 Git 协议构建的代码托管平台，拥有超过 1 亿注册开发者，是全球最大的开源代码社区。对于普通用户来说，不需要深入理解 Git 的所有概念，只需借助 AI 工具执行几条关键命令即可完成整个部署流程。

3. Trae（AI编程工具）：这是本次实战的核心工具。Trae 是一款国内的 AI 编程助手，最大的优势是完全免费，内置了大语言模型，可以通过自然语言对话来生成代码和完成各种开发任务。

技术背景：AI 原生 IDE 与 Trae Trae 属于新一代 AI 原生 IDE（集成开发环境）赛道的产品，与 GitHub Copilot、Cursor 等工具同属一类。这类工具的核心技术是将大语言模型（LLM）深度集成进代码编辑器，使其不仅能补全代码，还能理解项目上下文、执行终端命令、读写文件系统，实现真正意义上的"对话式编程"。Trae 由字节跳动旗下团队开发，面向国内用户提供完全免费的服务，内置模型包括 Claude 3.5 Sonnet 和 GPT-4o 等主流大模型，有效解决了国内用户访问海外 AI 工具的门槛问题。相比需要付费订阅的同类产品，Trae 的免费策略大幅降低了普通用户的尝试成本。

GitHub Pages 仓库命名规则

需要特别注意的是，创建的文件夹（也是后续的仓库名）有严格的命名要求：格式为 你的GitHub用户名.github.io。例如你的 GitHub 用户名是 zhangsan，那么文件夹就必须命名为 zhangsan.github.io。这是 GitHub Pages 识别并自动部署网站的关键规则。

第一步：通过Trae登录GitHub账号

打开 Trae 后，首先用它新建或打开我们刚才创建好的文件夹。接下来，我们直接用自然语言告诉 AI："我已经安装了 Git，请帮我登录 GitHub。"

Trae 会自动调用 Git 检查当前的配置状态，然后给出登录指引。整个流程大致如下：

AI 生成登录命令，点击"运行"
在命令行提示中按回车，选择确认（输入 Y）
系统会生成一个验证链接和一个 Code
打开链接，在网页中输入 Code 完成授权

通过Trae与AI对话完成GitHub登录

整个过程非常流畅，AI 会一步步引导你完成操作，完全不需要记忆任何 Git 命令。这里使用的是 GitHub 的 OAuth 设备授权流程（Device Flow），是一种专为命令行工具设计的安全认证方式，无需在本地存储账号密码，安全性有充分保障。

第二步：用AI对话生成个人主页代码

登录成功后，就可以进入核心环节了。直接告诉 Trae："请基于 GitHub Pages 帮我创建一个个人主页。"

AI 不会直接动手，而是会先通过一系列问题来了解你的需求，通常包括：

网站类型：个人博客、作品集、简历页面等
模块规划：自我介绍、项目展示、技能列表、联系方式等
视觉风格：配色方案、整体风格偏好（简约、科技感、文艺等）

这个交互过程非常像和一位设计师沟通需求，你只需要用日常语言描述自己的想法即可。AI 在这一阶段扮演的角色类似于"产品经理"，通过结构化提问将模糊的用户意图转化为可执行的技术规格，这也是现代 LLM 在工程实践中最具价值的能力之一。

AI正在生成网页代码

确认需求后，Trae 就会开始自动生成 HTML、CSS、JavaScript 等网页文件。由于使用的是免费模型，整个生成过程大约需要 5-10 分钟。如果你有自己的 API Key（比如接入 Claude 或 GPT-4 等更强的模型），速度会更快。

生成完成后，AI 还会自动帮你在 GitHub 上创建对应的仓库，并将代码推送上去。由于仓库名符合 用户名.github.io 的格式，GitHub 会自动将其部署为网站。你的个人主页域名就是 https://你的用户名.github.io，可以直接分享给任何人访问。

进阶优化：参考Awwwards获奖网站提升设计

AI 第一次生成的页面通常在功能和内容上已经比较完整，但在视觉设计和交互体验上可能还有提升空间。这里分享一个实用技巧：借助 Awwwards（一个收录全球优秀网页设计的平台）来指导 AI 进行优化。

背景知识：Awwwards 与网页设计趋势 Awwwards（全称 Awards for Design, Creativity and Innovation on the Internet）成立于 2009 年，是国际公认的网页设计权威评奖平台。其评审团由来自全球的设计师、开发者和数字创意专家组成，从设计、可用性、创意和内容四个维度对提交的网站进行评分。获得「Site of the Day」等荣誉的网站代表了当下最前沿的网页设计趋势，包括微交互、视差滚动、3D 元素、动态排版等技术。将 Awwwards 作为 AI 优化的参考基准，本质上是在利用 AI 模型训练数据中对这些优秀设计案例的"记忆"，引导模型输出更符合专业审美的代码实现——这是一种高效的"提示词工程"（Prompt Engineering）技巧。

具体做法是告诉 Trae："请参考 Awwwards 上的获奖网站风格，进一步优化我的个人主页的视觉效果和交互体验。"

最终生成的个人主页效果