【实战教程】使用AI Coding工具,5分钟生成个人主页并发布到GitHub.

本文共计 3500 字，阅读约 8 分钟

为什么要做个人主页？

先回答一个问题：为什么要做一个个人主页？

一个好的个人主页，就是你在互联网上的”24小时营业门店”。

而且，现在是史上最简单的时机——AI可以帮你全流程完成，你只需要复制粘贴提示词。

工具选择

推荐以下AI Coding工具：

本教程以Cursor为例，其他工具操作逻辑完全一样。

核心心法：两段式AI工作流

很多人直接让AI帮我做个网站，结果出来的代码要么不能用，要么不符合预期。

正确姿势是先让AI生成需求文档，确认后再让它根据需求写代码。

为什么要先做需求文档？

• 避免AI自由发挥，导致最后要推倒重来
• 需求确认后，代码基本一次到位
• 你只需要确认这是不是想要的，不用逐行改代码

完整流程：10步实现个人主页

步骤1：安装Cursor

1. 访问 cursor.sh 下载安装，支持Mac、Windows、Linux
2. 用GitHub账号登录，免费版每天500次Premium额度，够用
3. 打开软件，按Ctrl+N，选择New Folder，创建项目文件夹，比如 my-portfolio

步骤2：打开AI对话界面

按Ctrl+L Mac是Cmd+L，打开AI对话窗口。

步骤3：生成需求文档

在AI对话窗口中，复制粘贴以下提示词：

提示词模板1：生成需求文档

你是一个资深产品经理。请为我创建一个个人主页网站的需求文档，要求如下：基本信息：- 姓名：请填写你的名字- 职位：请填写你的职位，比如全栈工程师- 一句话介绍：请填写你的slogan，比如热爱技术，专注AI与前端开发页面结构：1. 顶部导航栏（首页、关于、作品、联系）2. Hero区域（首屏大图+个人介绍）3. 关于我（个人简介、技能树）4. 作品集（3-4个代表作品）5. 联系方式（邮箱、GitHub、LinkedIn）6. 页脚设计要求：- 现代简约风格，深色主题- 响应式设计，手机+电脑自适应- 渐变背景（紫色→蓝色）- 卡片式布局，悬停动画效果- 使用Google Fonts（Noto Sans SC）- 使用Lucide图标库（CDN）技术要求：- 单HTML文件，内联CSS- 语义化HTML5标签- CSS变量管理主题颜色- 图片使用占位符请输出完整的需求文档，包含：页面结构说明、各区域详细描述、视觉设计规范、交互行为说明。

发送后，AI会返回一份完整的需求文档，包含页面结构、布局、样式、交互效果等详细说明。

步骤4：确认修改需求文档

收到需求文档后，仔细阅读一遍，检查结构是否合理。直接告诉AI需要修改的地方：

• 我不喜欢深色主题，请改成浅色系
• 作品集想要展示5个，不是3个
• 增加一个博客列表区域
• 把渐变色从紫蓝改成绿蓝
• 技能展示用进度条形式，不要标签

确认无误后，告诉AI：需求文档确认无误，请根据这份需求生成代码。

步骤5：生成代码

确认需求文档后，继续在同一个对话窗口，发送以下提示词：

提示词模板2：生成代码

请根据以下需求文档，生成完整的HTML代码：需求文档：（将上一步AI返回的需求文档完整粘贴在这里）输出要求：1. 完整的 index.html 文件，包含所有HTML、CSS、JavaScript2. 使用语义化HTML5标签（header, nav, main, section, footer等）3. CSS使用CSS变量定义主题色4. 图片使用 picsum.photos 或 placehold.co 作为占位符5. 确保响应式布局，在375px-1920px宽度范围内显示正常6. 代码要有适当的注释，标注每个区域7. 确保页面在浏览器直接打开能正常显示8. 添加简单的交互效果请直接输出完整的HTML代码。

发送后，AI会生成完整的HTML代码。

步骤6：保存并预览

1. 按Ctrl+S或Cmd+S，保存为 index.html
2. 直接在浏览器打开这个HTML文件，或者在Cursor按Ctrl+Shift+V预览

有问题就改，直接告诉AI：

• 把背景色从紫色改成绿色
• 头像改成圆形
• 增加一个回到顶部按钮
• 作品卡片增加点击跳转链接

步骤7：创建GitHub仓库

1. 打开 github.com，登录你的账号
2. 点击右上角 + ，选择 New repository
3. 填写信息：
• Repository name：my-portfolio，可以用你的名字
• Description：个人主页
• 选择 Public，Private无法使用Pages
4. 点击 Create repository

记下你的仓库地址，类似 https://github.com/你的用户名/my-portfolio.git

步骤8：Git初始化并推送

在Cursor中按Ctrl+` 打开终端，依次执行以下命令：

1. 初始化Git仓库：git init
2. 配置GitHub账号：git config user.name “你的名字” 和 git config user.email “你的邮箱”
3. 添加所有文件：git add .
4. 提交代码：git commit -m “Initial commit: 个人主页”
5. 关联远程仓库：git remote add origin 你的仓库地址
6. 推送到GitHub：git push -u origin main

如果提示 command not found，Mac用户打开终端输入 brew install git 安装，Windows用户去 git-scm.com 下载安装。

步骤9：启用GitHub Pages

1. 在GitHub仓库页面，点击 Settings
2. 左侧找到 Pages
3. 在 Build and deployment 部分：
• Source 选择 Deploy from a branch
• Branch 选择 main（或master）
• Folder 选择 /(root)
4. 点击 Save

等待1-2分钟，刷新页面，会看到绿色提示 Your site is live at https://你的用户名.github.io/仓库名/

复制这个链接，在浏览器打开，看看你的个人主页。

步骤10：绑定自定义域名（可选）

如果你有个人域名，比如 zhangsan.com：

1. 登录域名服务商（阿里云或腾讯云）
2. 添加DNS解析记录：
• 类型：CNAME
• 主机记录：www或@
• 记录值：你的用户名.github.io
3. 回到GitHub Pages设置页面，Custom domain输入你的域名
4. 勾选 Enforce HTTPS

进阶：更多提示词模板

模板A：作品集型网站

生成需求文档：

创建作品集网站的需求文档，要求：- 全屏Hero区域，带动态粒子背景或渐变动画- 作品展示使用网格布局（3列桌面端，1列移动端）- 每个作品卡片包含：封面图、标题、描述、技术标签、GitHub预览链接- 悬停时卡片上浮+显示查看详情按钮- 暗黑主题，金色或青色强调色- 使用Inter或Noto Sans SC字体+Lucide图标- 页面加载有淡入动画

模板B：技术博客型

生成需求文档：

创建个人技术博客的需求文档：- 顶部固定导航，透明背景，滚动超过100px后变实色- 首屏展示最新文章列表，大卡片+小卡片组合布局- 文章卡片包含：日期、分类标签、标题、摘要、阅读量、评论数- 侧边栏：个人简介（含头像）、标签云、热门文章、关注公众号- 支持暗色亮色模式切换，默认跟随系统，切换按钮在导航栏- 使用Noto Sans SC字体，代码块使用Prism.js高亮

模板C：极简简历型

生成需求文档：

创建单页简历网站：- 左右分栏布局（移动端上下布局，breakpoint 768px）- 左侧固定宽度300px：头像（圆形）、姓名（大字）、职位、联系方式（图标+文字）、社交链接（GitHubLinkedIn邮箱）- 右侧：关于我（2-3行）、工作经历（时间线形式，年份+公司+职位+贡献）、教育背景（年份+学校+学位）、技能标签（带颜色分类）、荣誉奖项- 时间线使用垂直线条+圆点样式- 打印友好样式（@media print）- 极简黑白配色，主色用深灰，辅助色用浅灰- 使用Noto Sans SC字体

常见问题FAQ

总结

10步生成个人主页：

核心心法：先确认需求，再生成代码。

看完就动手，10分钟后你就有自己的个人主页了 🦞

有问题评论区见～