企业官网建设流程全解析

• 文档
• 教程
• Vibe Coding
• 示例工程

导读

本文对应 vibe-vibe 基础篇第 4 章的开篇小节 4.1 为什么先学"存档"，以及 Git 的最小闭环，讲解的是 Vibe Coding 项目中一个极易被忽略却至关重要的动作：在改动真正变大之前，先给项目装一个最小版本的"时光机"。读完本文，你将掌握 Git 最小闭环的三个动作——存一次、看历史、退回来——并学会把整个闭环放心地委托给 AI 执行，同时能说清这背后到底发生了什么。

为什么要在改动变大之前，先学会存档

第 1 章和第 2 章时，项目还很小，改动也相对克制，改坏了的代价很低。到了第 4 章，情况开始变了：你要加内容模块、调整页面结构、改变数字分身入口的使用方式，很多修改都不再是一句文案那么轻。

文档用三个非常具体的场景说明了这种"牵一发而动全身"：

• 加一个作品区，顺手改到布局；
• 补联系方式，不小心把首屏间距弄乱；
• 调整聊天入口，结果别的地方一起变形。

如果没有"后悔药"，你很容易在改动时变得畏手畏脚，或者因为一次改崩就把前面的努力一起拖下去。

这里的顺序很重要：不是项目彻底崩了才去学怎么回退，而是在改动真正复杂起来之前，先给自己留后路。这正是第 4 章把"基础存档"放在所有内容模块之前的原因——参考第 4 章导航，4.1 的定位就是"先建立安全感，再继续大胆改动"。

基础版里 Git 只负责三件事

如果你一听 Git 就紧张，可以先把它想得更现实一点：基础版的 Git 不是让你突然学会分支、PR、合并冲突，而只是给项目装一个最基础的时光机。它只负责三件事：

基础版附录 Git 最小操作卡 用一句话概括了同样的心智模型，并给出了最重要的提醒：不要等项目已经改崩了，才第一次想起 Git。更稳的顺序是：先存一次，再大胆改。

到这个程度就已经很够用。你不需要现在就知道很多命令参数，也不需要理解完整协作工作流。

你甚至可以把操作委托给 AI

这一步完全可以沿用本书前面的思路：不是所有操作都要自己硬背，而是把目标说清楚，让 AI 陪你走。4.1 给出了两个可以直接复制的说法。

在动手改主页内容之前：

我现在准备开始给主页补内容。 在动手前，请先帮我做一个最小存档，让我之后改坏了还能退回来。 请一步一步带我完成，不要展开 Git 理论。

想确认目前还能退回哪里时：

请帮我查看这个项目目前有没有存档记录。 如果之后我改坏了，告诉我最小回退路径是什么。 只讲这次需要知道的部分。

附录 Git 最小操作卡 还把三个动作对应的委托话术都补齐了，覆盖"较大修改前存档""改了几轮后查看可回退版本""改崩后回到上一个稳定版本"三种场景：

我现在准备开始做一轮较大的修改。 请先帮我给当前项目做一个最小存档，作为可回退版本。 只告诉我这次需要知道的步骤，不要展开 Git 理论。

请帮我查看这个项目目前有哪些存档记录。 我想知道最近几个可回退版本分别是什么。

这一轮修改效果不好。 请帮我回到上一个稳定版本，并告诉我这次回退到了哪个存档点。

这种说法很适合基础版：你不是在上 Git 课，而是在用 Git 解决一个马上会遇到的实际问题。

用一句人话理解背后发生了什么

4.1 刻意不展开 Git 理论，但如果你想在"会用"之外再多懂一点，进阶版 第十一章：Git 版本控制与协作开发 提供了完整的人话解释，可以帮你建立三层最小认知。

先理解它解决了什么：不再用文件名标记版本

进阶版 11.1 为什么需要 Git 从"最终版"困境讲起：写论文时桌面上会出现毕业论文-修改版.docx、毕业论文-打死不改版.docx这样的文件，但哪个最新、改了什么、怎么回到三天前的版本，文件名根本说不清楚。代码项目更严重——一个 Web 项目可能有几百个文件，改一个功能往往涉及十几个文件的联动修改，而且文件之间存在依赖关系（A 文件调用 B 文件的函数），必须把所有相关文件一起回到同一个时间点，否则程序就跑不起来。

Git 记录的不是"某个文件的某个版本"，而是"整个项目在某个时间点的完整快照"，一起保存、一起回滚。

你可能已经在用 Git 了

按 11.1 的描述，如果你一直跟着本书用 Claude Code 开发项目，你的项目目录里很可能已经有一个.git文件夹——Claude Code 创建新项目时通常会自动初始化 Git 仓库，并在开发过程中帮你提交代码。验证方法很简单，在项目目录里运行：

git log --oneline -5

如果看到一串提交记录，说明 AI 一直在帮你"存档"，你只是在无意识地使用它。用git status也能确认仓库是否存在（Windows 上.git是隐藏文件夹，文件管理器看不到很正常）。

三个概念：commit 存档、log 存档列表、status 一眼看状态

• commit（提交）= 存档：每次 commit 记录当前所有文件的状态，附带一条描述和时间戳，就像游戏里的手动存档。Git 的存档是增量式的，只记录变化的部分，所以你可以放心频繁提交，不用怕占用空间。提交时机的判断标准很简单：每当你完成了一件"可以用一句话描述"的事情，就值得提交一次（比如"调整了首页布局""修复了搜索为空的 bug"），不要攒一整天的修改一次性提交。
• git log = 存档列表：查看之前存过哪些版本。配合git diff、git show可以看清每次改动改了哪几行——养成"改完看 diff"的习惯，能帮你确认 AI 到底改了什么。
• git status = 一眼看电量：像出门前看一眼手机电量，它告诉你哪些文件改了但没暂存、哪些已暂存但没提交、当前在哪个分支。

三区模型：修改在哪里

Git 管理代码有三个区域，11.1 用三个比喻讲得很清楚：

日常开发中，Claude Code 会帮你处理这些步骤，但当"我刚才的修改去哪了""为什么提交里没有这个文件"这类困惑出现时，三区模型能帮你快速定位：文件改了但git status显示未暂存，说明还在工作区；add了但没commit，说明在暂存区还没存档；commit了但没push，说明存档只在本地。

回滚：无限层数的 Ctrl+Z

Ctrl+Z 有个隐含限制：关掉文件再打开就失效了，更别说回到三天前。Git 只要提交过，就能回到那个时间点的状态——它是不用过期的、无限层数的 Ctrl+Z。三个常见场景对应三种处理方式：

对基础版来说，你不需要背下这些命令——把场景说给 AI 听（"回到上一个能跑的版本""撤销这几处修改"），AI 会选择合适的命令并把结果解释给你。核心认知是：意识到你可以回去，你就敢大胆尝试了。

仓库里的真实证据：什么该进存档、什么不该

这个开源仓库本身就是用 Git 管理的——git log能看到仓库的提交历史。而仓库里的真实项目 demo-01-todo（一个基于 Next.js 16 + TypeScript + Drizzle ORM + PostgreSQL 的待办应用，脚本定义见 package.json）则展示了一个真实项目的存档边界，见它的 .gitignore：

node_modules .next .env drizzle .next-docs/

这份配置告诉 Git 哪些东西不该进入存档：

• node_modules：第三方依赖，随时可以由包管理器重新安装；
• .next：Next.js 的构建产物，属于"可以重新生成"的中间文件；
• .env：真实的密钥和连接串，绝不能进版本库——项目只提交了 .env.example，里面是DATABASE_URL=postgresql://user:password@your-neon-host.neon.tech/neondb?sslmode=require这样的占位符；
• drizzle：数据库迁移的本地生成目录。

也就是说，"存档"记录的是该记录的东西：你的源代码、配置模板、文档。依赖、构建产物、密钥这类不该入库的内容，要用.gitignore提前挡在存档之外。

更进一步，代码只存在本地硬盘意味着"单点故障"——硬盘坏了、电脑被偷、系统重装，代码就全没了。进阶版 11.2 推上云端，开始协作 讲的就是把存档推到 GitHub/Gitee 等云端托管平台，同时解决备份与多人协作问题。但那是进阶话题，基础版只需要把本地闭环先跑通。

有了存档，心态会明显不一样

一旦有了最小闭环，后面的改动心态会完全不一样：你会更敢补内容、更敢试不同写法、也更敢让 AI 帮你做稍大一点的调整。不是因为风险消失了，而是因为你知道，即使某次改坏了也不是世界末日——你有办法回到上一个稳定版本。

第 4 章的后续小节把这个心态落到了操作节奏上。4.3 只添加 2-3 个最有价值的内容模块 明确建议：每加一类模块前先做一次存档，改完再看一次效果。这样你既不会因为改动变大而慌，也能比较清楚地判断到底是哪一轮调整真正让页面变完整了。到 4.4 本章小结，验收清单的第一项正是："我已经知道怎么给项目做最小存档，并在必要时退回来。"

最小操作速查卡

四个动作全部可以委托给 AI，你只需要知道"自己现在为什么需要它，以及希望它替你完成什么"。

这一节在教程里的位置与下一步

本节是基础篇第 4 章"让主页更完整——内容、引导与基础存档"的开篇，作用是先建立安全感，再进入 4.2 从访客视角决定你要补什么内容 和 4.3 补内容模块 的大改动阶段。第 4 章之后，教程会进入 第 5 章：让数字分身更像你。

如果你想系统理解分支、PR、协作工作流，可以继续读进阶版 第十一章：Git 版本控制与协作开发——从 为什么需要 Git、推上云端开始协作 到分支、PR 与团队工作流。但在那之前，请记住这一层最重要的事：这一层安全感，往往比"我已经学会了多少 Git"更重要。

• 文档
• 教程
• Vibe Coding
• 示例工程