手把手教你把AI写的代码变成网站(含一个新手绝对会踩的坑)

一、前言：为什么需要 GitHub？

Vibe Coding在2025年开始火起来，让很多人的想法都可以通过自然语言得以实现，很可能你也已经用 AI 辅助编程（如 Cursor、豆包、DeepSeek 等）开发过一些小网页了。你可能会问：项目写好了，代码存在哪里？怎么让别人看到我的作品？怎么把项目部署到网上让别人访问？这些问题的答案都指向同一个工具——GitHub。

GitHub 是全球最大的代码托管平台，目前拥有超过 1 亿开发者用户。它不仅仅是一个存放代码的地方，更是一个完整的开发生态系统。对于 AI 编程时代的开发者来说，GitHub 是连接「本地开发」和「云端部署」的桥梁。无论你开发的是个人博客、工具网站还是移动应用，GitHub 都能帮你安全地存储代码、管理版本、协作开发，并最终将项目部署上线。

本教程将从零开始，手把手教你完成 GitHub 的注册、配置、项目上传和部署的全流程。每个步骤都配有详细说明，并在需要截图的地方标注了配图位置，方便你对照操作。

💡 写给 AI 编程新手如果你是用 AI 工具生成的代码，但不确定代码保存在哪里，别担心！我们会在第五章专门讲解「如何找到你的代码文件」。

二、注册 GitHub 账号

注册 GitHub 账号是使用该平台的第一步，整个过程完全免费，只需要几分钟即可完成。GitHub 对个人用户提供了非常慷慨的免费额度，包括无限的公开仓库、每月 2000 分钟的 Actions 运行时间等，对于个人开发者来说完全够用。

2.1 访问官网

打开浏览器，在地址栏输入 github.com，进入 GitHub 官方网站。页面会自动检测你的语言偏好，如果显示英文，可以在页面底部切换为中文界面。

2.2 填写注册信息

点击页面右上角的「Sign up」按钮，进入注册流程。你需要依次填写以下信息：

1. 1. 邮箱地址：建议使用常用邮箱，后续用于接收验证邮件和找回密码。
2. 2. 密码：设置一个强密码，至少 8 位，包含字母、数字和特殊字符。
3. 3. 用户名：这是你在 GitHub 上的唯一标识，会出现在你的个人主页地址中。例如用户名是「myname」，你的主页就是 github.com/myname。建议使用简洁、易记的用户名。
4. 4. 国家：根据实际情况填写

2.3 验证邮箱

填写完信息后，GitHub 会向你的邮箱发送一封验证邮件。打开邮箱，找到来自 GitHub 的邮件，点击其中的验证链接即可完成邮箱验证。如果没收到邮件，请检查垃圾邮件文件夹，或点击「重新发送验证邮件」。

2.4 完成个性化设置（可选）

验证邮箱后，GitHub 会引导你完成一些个性化设置，包括选择感兴趣的技术领域、设置个人头像等。这些步骤可以跳过，后续在个人设置中随时可以修改。

三、核心概念速览（小白必读）

在正式开始使用 GitHub 之前，我们需要了解几个核心概念。这些概念是理解 GitHub 工作方式的基础，掌握它们能让你后续的操作更加顺畅。

💡 别被概念吓到本章有些概念可能看起来有点抽象，但你只需要理解「仓库」和「提交」这两个就足够开始使用了。其他概念可以等到需要时再回来学习。

3.1 Repository（仓库）—— 最核心的概念

仓库是 GitHub 中最基本的概念，可以理解为一个「项目文件夹」。每个仓库包含一个项目的所有文件，包括代码、文档、图片等。一个 GitHub 账号可以创建无数个仓库，每个仓库都有独立的网址。仓库分为两种类型：公开仓库（Public）对所有人可见，适合开源项目；私有仓库（Private）只有你和你授权的人可以访问，适合个人项目或商业项目。

打个比方：GitHub 就像一个云盘，仓库就是你在云盘里创建的文件夹。你可以在文件夹里放任何东西，也可以随时修改、删除。

3.2 Commit（提交）—— 保存修改记录

Commit 是 Git 版本控制的核心概念，可以理解为「保存一次修改记录」。每次你对项目文件进行修改后，都可以创建一个 commit 来保存这次修改。每个 commit 都有一个唯一的 ID，包含修改内容、修改时间、修改者信息等。这样，你就可以随时回溯到任何一个历史版本，就像游戏的「存档」功能一样。

打个比方：Commit 就像你在写论文时每次保存一个新版本（论文_v1.doc、论文_v2.doc...），但比这更聪明——它会记录每次改了什么，方便你随时对比和回退。

3.3 Branch（分支）—— 进阶概念

🔮 进阶概念：前期你只需要关注主分支（main），这个概念在团队协作时才需要深入了解。

分支允许你在不影响主线的情况下进行独立的开发工作。默认分支通常叫「main」或「master」。对于个人项目，你可能只需要使用默认分支就够了。当你以后需要同时开发多个功能，或者参与团队协作时，再深入学习分支的使用方法。

3.4 Pull Request（合并请求）—— 进阶概念

🔮 进阶概念：这是团队协作时的功能，个人项目基本用不到，可以先跳过。

Pull Request（简称 PR）是请求将一个分支的修改合并到另一个分支的机制。在团队协作中，开发者通常在自己的分支上工作，完成后提交 PR，由其他成员审核后再合并。对于个人项目，你可能不需要频繁使用 PR，但了解这个概念有助于参与开源项目。

3.5 Clone、Fork 与 Star —— 三个容易混淆的操作

这三个概念经常出现在 GitHub 页面上，新手很容易分不清：

Star（星标）：类似于「收藏」或「点赞」，用于标记你感兴趣的项目。就像给别人的作品点个赞，表示你觉得这个项目不错。

Fork（复刻）：将别人的仓库复制一份到自己账号下，成为你的独立仓库。

生活化比喻：Fork 就像是「复印了一份别人的笔记到自己本子上」，你可以随意在复印件上涂改，不会影响别人的原版。

Clone（克隆）：将远程仓库完整复制到本地电脑的操作。

生活化比喻：Clone 就像是「把笔记本带回家里」，把云端的东西下载到你自己的电脑上。

四、安装和配置 Git

Git 是一个分布式版本控制系统，是 GitHub 的底层技术。虽然 GitHub 网页版提供了基本的文件上传功能，但要在本地电脑上高效地管理代码并与 GitHub 同步，你需要安装 Git 命令行工具。

💡 更简单的选择如果你觉得命令行太复杂，可以直接跳到 4.4 节安装 GitHub Desktop。它是一个图形界面工具，会自动帮你处理大部分配置，对新手更友好！

4.1 下载安装 Git

根据你的操作系统选择对应的安装方式：

Windows 系统：访问 git-scm.com/download/win 下载 Windows 安装包，运行后按默认选项安装即可。安装完成后，在开始菜单中找到「Git Bash」并打开——这是一个让你输入命令的黑色窗口，就像电影里的 hacker 界面一样，别怕，我们只需要输入几行固定的代码。

macOS 系统：打开终端（Terminal），输入 xcode-select --install 并回车，会自动安装 Git。或者使用 Homebrew：brew install git。

Linux 系统：使用包管理器安装，例如 Ubuntu/Debian：sudo apt install git；CentOS/RHEL：sudo yum install git。

4.2 配置用户信息

安装完成后，需要配置你的用户名和邮箱，这样每次提交代码时都会记录是谁提交的。打开终端（Windows 用户打开 Git Bash），依次输入以下命令：

💡 重要：引号必须是英文半角引号不要使用中文引号「」或""，必须使用英文引号 " "。输入法切换到英文状态再输入引号。

git config --global user.name "ZhangSan"（把 ZhangSan 换成你的名字或昵称）git config --global user.email "zhangsan@example.com"（把邮箱换成你注册 GitHub 时用的邮箱）

注意：用户名和邮箱最好与 GitHub 账号保持一致，这样 GitHub 才能正确识别你的提交记录。

4.3 配置 SSH 密钥 —— 进阶可选

🔮 进阶概念：如果你使用 GitHub Desktop，可以跳过这一节！GitHub Desktop 会自动处理认证问题。

SSH 密钥是一种安全的身份验证方式，配置后可以免密码推送代码到 GitHub。如果你打算长期使用 Git 命令行，建议配置。但如果只是偶尔使用，或者觉得命令行操作太复杂，完全可以使用 GitHub Desktop 代替。

生成 SSH 密钥的步骤如下（如果遇到任何报错，建议直接使用 GitHub Desktop）：

1. 1. 在终端输入：ssh-keygen -t ed25519 -C "你的邮箱"
2. 2. 按三次回车使用默认设置（不需要设置密码）
3. 3. 查看公钥：cat ~/.ssh/id_ed25519.pub
4. 4. 复制输出的公钥内容（以 ssh-ed25519 开头的那一长串字符）
5. 5. 打开 GitHub → 右上角头像 → Settings → SSH and GPG keys → New SSH key，粘贴公钥并保存

4.4 GitHub Desktop —— 新手推荐

如果你觉得命令行太复杂，GitHub Desktop 是一个很好的选择。它是 GitHub 官方推出的图形界面工具，操作简单直观，而且会自动处理 SSH/HTTPS 认证，完全避开了 Token 和 SSH 配置的痛点。

下载地址：desktop.github.com。安装完成后，打开软件，点击「Sign in to GitHub.com」，会弹出浏览器让你登录 GitHub 账号授权，完成后就能使用了。

五、找到你的代码文件

在开始上传项目之前，你需要先知道你的代码文件保存在哪里。如果你是用 AI 工具（如 Cursor、Trae、CodeX 等）生成的代码，可能不太清楚文件的具体位置。这一章专门帮你解决这个问题。

5.1 如果你使用 Cursor 或 Trae

Cursor 和 Trae 是目前最流行的 AI 编程工具。查看项目位置的方法：

1. 1. 打开 Cursor/Trae，打开你的项目文件夹
2. 2. 在左侧文件列表区域，右键点击项目根目录（最顶层的文件夹）
3. 3. 选择「复制路径」或「在文件资源管理器中显示」
4. 4. 这样你就能看到项目文件夹的完整路径了

5.2 如果你使用 DeepSeek 或 豆包 网页版

如果你是在 deepseek 或 豆包 网页版中生成的代码，代码可能还没有保存到本地。你需要：

1. 1. 在电脑上创建一个新文件夹，命名为你的项目名称（如 my-project）
2. 2. 让 AI 生成代码后，点击代码块右上角的「复制」按钮
3. 3. 在项目文件夹中创建对应的文件（如 index.html），粘贴代码并保存
4. 4. 重复以上步骤，直到所有文件都创建完成

💡 小技巧你可以让 AI 帮你整理好所有文件，然后一次性生成。例如：「请把完整的项目代码整理好，告诉我需要创建哪些文件，每个文件的内容是什么。」

5.3 如何在命令行中进入项目文件夹

如果你选择使用 Git 命令行，需要先进入项目文件夹。这里有几个实用技巧：

方法一：拖拽法（推荐）在终端中输入 cd（注意 cd 后面有个空格），然后把项目文件夹从文件管理器拖到终端窗口，松开鼠标，终端会自动填入完整路径。按回车即可进入。

方法二：复制路径法Windows 用户：在文件资源管理器中，按住 Shift 键，右键点击项目文件夹，选择「复制为路径」，然后在终端中输入 cd 加空格，粘贴路径。Mac 用户：在 Finder 中，右键点击项目文件夹，按住 Option 键，选择「将...复制为路径名称」。

常见路径示例：Windows 桌面项目：cd C:\Users\你的用户名\Desktop\my-projectMac 桌面项目：cd ~/Desktop/my-project

六、创建你的第一个仓库

仓库是存放项目代码的地方，创建仓库是使用 GitHub 的第一步。下面我们一步步创建你的第一个仓库。

6.1 新建仓库

登录 GitHub 后，点击右上角的「+」号，选择「New repository」进入创建页面。或者直接访问 github.com/new。

6.2 填写仓库信息

在创建页面需要填写以下信息：

1. 1. Repository name（仓库名称）：使用英文，建议与项目名称一致，如「my-first-project」。
2. 2. Description（描述）：可选，简单描述项目用途。
3. 3. Public/Private（公开/私有）：选择 Public 则所有人可见，Private 则只有你可见。个人学习项目建议选 Public。
4. 4. Add a README file：勾选此项会自动创建一个 README.md 文件，用于介绍项目。建议勾选。
5. 5. Add .gitignore：选择项目类型会自动生成忽略文件列表。如果你不确定，可以先不选。
6. 6. Add license：选择开源协议。个人项目可以选 MIT，最宽松。

6.3 完成创建

点击「Create repository」按钮，你的第一个仓库就创建成功了！页面会跳转到仓库主页，显示你刚创建的 README.md 文件内容。此时仓库地址为：github.com/你的用户名/仓库名。

💡 记住这个页面下一节上传项目时，你需要用到这个页面右侧绿色的「Code」按钮里的地址。

七、上传本地项目到 GitHub

创建好仓库后，下一步就是把本地项目上传到 GitHub。有两种主要方法：使用 GitHub Desktop 图形界面工具（强烈推荐新手）或使用 Git 命令行。

7.1 方法一：使用 GitHub Desktop（强烈推荐新手）

GitHub Desktop 是 GitHub 官方推出的图形界面工具，操作简单直观，非常适合新手使用。最重要的是，它会自动处理认证问题，完全避开了 SSH 密钥和 Token 配置的痛点。

第一步：克隆仓库打开 GitHub Desktop，点击「File」→「Clone Repository」，选择你刚创建的仓库，选择本地存储位置后点击「Clone」。

第二步：添加项目文件将你的项目文件复制到克隆下来的仓库文件夹中。GitHub Desktop 会自动检测到新文件，并在左侧显示变更列表。

第三步：提交更改在左下角输入提交说明（如「初始提交：添加项目文件」），点击「Commit to main」按钮提交更改。

第四步：推送到 GitHub点击顶部的「Push origin」按钮，将本地提交推送到 GitHub 远程仓库。完成后刷新 GitHub 网页，就能看到你的项目文件了。

7.2 方法二：使用 Git 命令行

如果你习惯使用命令行，或者想更深入理解 Git 的工作原理，可以使用 Git 命令行操作。以下是完整的操作流程：

第一步：进入项目目录打开终端，使用 cd 命令进入你的项目文件夹。如果不确定路径，参考第五章的方法。cd 你的项目路径例如，Windows 用户的项目在桌面：cd C:\Users\你的用户名\Desktop\my-project

第二步：初始化 Git 仓库git init

第三步：添加所有文件到暂存区git add .

第四步：创建第一次提交git commit -m "初始提交：添加项目文件"

第五步：关联远程仓库这里需要用到你的仓库地址。回到 GitHub 网页，点击仓库右侧绿色的「Code」按钮，选择 SSH 或 HTTPS，点击复制按钮。

💡 不要手动输入地址仓库地址格式非常严格，冒号、斜杠错一个都会失败。请务必从 GitHub 页面复制，不要手动输入！

git remote add origin 你复制的仓库地址

例如：git remote add origin git@github.com:zhangsan/my-project.git

第六步：推送到 GitHubgit push -u origin main

注意：如果你的默认分支叫 master 而不是 main，将命令中的 main 替换为 master。

八、部署你的项目

将项目上传到 GitHub 后，下一步就是部署上线，让其他人能够访问你的项目。根据项目类型不同，有多种部署方案可选。

8.1 GitHub Pages（静态网站）—— 新手首选

GitHub Pages 是 GitHub 提供的免费静态网站托管服务，适合部署纯前端项目（HTML、CSS、JavaScript）。如果你的项目只是一个简单的网页，这是最简单的部署方式。部署步骤非常简单：

1. 1. 创建一个新项目
2. 2. 仓库名必须是：<你的用户名>.github.io，例如你的用户名是 tom，仓库名就是 tom.github.io
3. 
4. 3. 点击Add file → Upload files把你的代码保存为index.html文件，上传到刚刚创建的项目中
5. 4. 点击Commit changes，等待几秒钟即可访问

部署成功后，你的网站地址为：https://用户名.github.io/。如果仓库名是「用户名.github.io」，则网站地址为 https://用户名.github.io。

8.2 Vercel（Next.js / React 项目）

Vercel 是 Next.js 的官方托管平台，也支持 React、Vue、Angular 等前端框架。它的部署体验非常流畅，几乎是「一键部署」。

1. 1. 访问 vercel.com，使用 GitHub 账号登录
2. 2. 点击「Add New...」→「Project」
3. 3. 选择你要部署的 GitHub 仓库
4. 4. Vercel 会自动检测项目类型并配置构建设置
5. 5. 点击「Deploy」，等待构建完成

Vercel 会自动为你的项目分配一个域名（如 your-project.vercel.app），你也可以绑定自定义域名。最棒的是，每次你向 GitHub 推送新代码，Vercel 会自动重新部署。

💡 部署失败怎么办？如果部署失败，通常是因为项目缺少配置文件。建议先尝试部署简单的静态网页（纯 HTML/CSS/JS），熟悉流程后再部署复杂项目。

8.3 Netlify（通用前端项目）

Netlify 与 Vercel 类似，也是一个优秀的前端托管平台，支持各种静态站点生成器和前端框架。部署流程与 Vercel 几乎相同：登录 → 选择仓库 → 自动构建 → 部署完成。Netlify 还提供了表单处理、函数计算等额外功能。

8.4 Railway / Render（后端项目）—— 高级用户

🔮 进阶概念：此步骤仅适用于有后端代码的高级用户，新手可以先跳过。

如果你的项目包含后端（如 Node.js、Python、Go 等），需要使用支持后端运行的平台。Railway 和 Render 是两个不错的选择，它们都提供免费额度，支持从 GitHub 自动部署。部署时需要配置环境变量、数据库连接等，这些概念对于刚学会上传 HTML 的新手来说可能比较陌生，建议先熟悉前端部署后再尝试。

九、常见问题解答

9.1 什么是 .gitignore 文件？

.gitignore 是一个配置文件，用于告诉 Git 哪些文件不需要被追踪和上传。例如，node_modules 文件夹（依赖包）、.env 文件（环境变量）、编译产物等通常不需要上传到 GitHub。你可以在创建仓库时选择项目类型自动生成，也可以手动创建。常见的 .gitignore 配置包括：

node_modules/.envdist/.DS_Store

9.2 如何解决推送时的冲突？

当你和他人同时修改同一文件，或者你在不同电脑上修改同一项目时，可能会遇到推送冲突。解决冲突的基本步骤是：先拉取远程最新代码（git pull），Git 会提示哪些文件有冲突，手动编辑冲突文件解决冲突标记，然后重新提交并推送。对于个人项目，通常不会遇到冲突问题。

9.3 如何删除仓库？

进入仓库的「Settings」页面，滚动到最底部的「Danger Zone」区域，点击「Delete this repository」，按照提示输入仓库名称确认删除。注意：删除操作不可恢复，请谨慎操作。

9.4 如何更新已上传的项目？

更新项目的流程与首次上传类似：修改本地文件 → git add . → git commit -m "更新说明" → git push。使用 GitHub Desktop 则更简单：修改文件后，软件会自动检测变更，输入提交说明后点击 Commit，再点击 Push 即可。

9.5 推送时提示「Permission denied」怎么办？

这通常是因为认证配置有问题。如果你使用 Git 命令行遇到这个问题，最简单的解决方案是：改用 GitHub Desktop！它会自动弹出浏览器让你登录授权，完全避开 Token 和 SSH 的配置痛点。

如果你坚持使用命令行，需要检查：是否已添加 SSH 密钥到 GitHub；远程地址是否使用 SSH 格式（git@github.com:...）；或者使用 HTTPS 方式推送时，需要创建 Personal Access Token 作为密码（注意：Token 只显示一次，务必保存好）。

💡 强烈建议遇到认证问题，直接使用 GitHub Desktop，它能帮你省去 90% 的配置烦恼！

十、总结

恭喜你完成了 GitHub 入门学习！让我们回顾一下本教程涵盖的主要内容：

1. 1. 注册 GitHub 账号并完成邮箱验证
2. 2. 理解仓库、提交等核心概念
3. 3. 找到你的代码文件位置
4. 4. 安装 Git 或 GitHub Desktop
5. 5. 创建 GitHub 仓库
6. 6. 上传项目到 GitHub
7. 7. 使用 GitHub Pages、Vercel 等平台部署项目

GitHub 是一个功能强大的平台，本本只涵盖了最基础的使用方法。随着你的深入学习，还可以探索更多高级功能，如 GitHub Actions（自动化 CI/CD）、GitHub Copilot（AI 编程助手）、参与开源项目等。

对于 AI 编程时代的开发者来说，掌握 GitHub 是必备技能。它不仅能帮你安全地存储和管理代码，更是连接开发与部署的关键桥梁。希望本文能帮助你顺利开启 GitHub 之旅，让你的项目被更多人看到和使用。

如果你在使用过程中遇到问题，可以查阅 GitHub 官方文档（docs.github.com），或者在搜索引擎中搜索错误信息，通常都能找到解决方案。