从零开始用 HBuilderX 做网页：把 Git 版本控制真正用起来
你有没有过这样的经历？改完一个页面，突然发现“之前那个版本更好”，但文件已经保存覆盖了；或者和同事一起开发时，两个人同时修改了同一个 HTML 文件，最后谁的代码都没保住。这些问题，其实都不是代码写得不好，而是缺少一套靠谱的代码管理机制。
今天我们就来聊点实在的——怎么用HBuilderX这个轻量又高效的前端开发工具，配合Git实现真正的工程化网页开发。重点不是“装个 Git 就完事”，而是让你真正理解、真正会用、真正能在项目里跑通整套流程。
为什么选 HBuilderX？不只是为了“快”
市面上做网页的编辑器很多，VS Code、WebStorm、Sublime……那为什么还有人坚持用 HBuilderX？
因为它够“懂”中国开发者。
- 启动飞快，2 秒内打开项目，不像某些 IDE 要等半分钟；
- 中文界面原生支持，菜单一看就懂，新手上手没压力；
- 对 HTML/CSS 的智能补全特别准，Emmet 写
ul>li*5回车直接生成列表； - 内置浏览器预览一键刷新，不用来回切窗口；
- 最关键的是：它对 Git 的集成，是“开箱即用”的图形化操作，不用背命令也能提交代码。
但这不意味着它“弱”。相反，当你开始做团队项目、维护多个版本、发布小程序或 H5 应用时，你会发现它的底层能力非常扎实。
而我们要做的，就是把这套能力彻底激活——尤其是Git 集成。
Git 到底解决了什么问题？别再只当“备份工具”用了
很多人觉得 Git 就是个“存历史”的东西，错了可以回退。这没错，但太浅了。
Git 真正厉害的地方在于：
- 多人协作不打架：A 改导航栏，B 改登录框，互不影响；
- 功能开发可隔离：新功能在独立分支做，不影响主流程；
- 出问题能秒级回滚：线上炸了？30 秒回到昨天稳定的版本；
- 每一步都有据可查：谁改了哪行代码、什么时候改的，清清楚楚。
说得直白点：没有 Git 的项目，就像没有刹车的车——跑得越快越危险。
而在 HBuilderX 里用 Git，最大的好处是：你可以一边写代码，一边点几下鼠标完成提交、推送、拉取，完全不用切换终端。
手把手教你：在 HBuilderX 里把 Git 跑通
第一步：先装好 Git（这是前提）
HBuilderX 自己不带 Git，得你电脑上有。
去官网下载安装即可：
👉 https://git-scm.com/
安装时记得勾选“Add Git to PATH”，否则 HBuilderX 找不到它。
装完验证一下：
git --version如果返回类似git version 2.40.1，说明 OK。
然后设置你的身份（告诉 Git “你是谁”）：
git config --global user.name "张三" git config --global user.email "zhangsan@email.com"⚠️ 这个配置只需要做一次，全局生效。
第二步：初始化仓库，让项目“进入 Git 管理”
打开 HBuilderX，创建一个新项目，比如叫my-website。
右键项目根目录 → 【初始化 git 仓库】
你会看到项目里多了一个.git文件夹（默认隐藏），这就表示这个项目已经被 Git 跟踪了。
此时你可以打开底部的【Git】面板，会看到当前所有未提交的文件都列在那里。
第三步：第一次提交代码
假设我们新建了一个index.html，内容如下：
<!DOCTYPE html> <html> <head> <title>我的网站</title> </head> <body> <h1>欢迎来到首页</h1> </body> </html>保存后，回到 Git 面板：
- 在“未暂存”区域找到
index.html； - 右键 → 【添加到暂存区】（相当于
git add）； - 在提交框输入描述，比如：“init: 创建首页结构”；
- 点击【提交】按钮。
搞定！这次修改已经永久记录在本地仓库中。
第四步：连接远程仓库（GitHub / Gitee 都行）
现在只是本地有记录，别人还看不到。我们需要推送到远程。
以 Gitee 为例：
- 登录 Gitee，新建一个空仓库，拿到 HTTPS 地址，如：
https://gitee.com/yourname/my-website.git - 回到 HBuilderX → 顶部菜单【Git】→【设置远程仓库地址】
- 输入上面的 URL，点击确定
- 再点击【推送】→ 选择分支
main→ 输入账号密码
稍等片刻，刷新 Gitee 页面，你的代码就已经上传成功！
✅ 提示：建议首次推送时勾选“设置上游分支”，以后直接点推送就行，不用再选。
日常开发中怎么用？这才是关键
每天开工前第一件事：拉取最新代码
多人协作时，别人可能已经提交了新内容。你在改之前，一定要先同步：
【Git】→【拉取】
这样能确保你是在最新的基础上工作，避免冲突。
开发新功能？别直接改 main 分支！
举个例子：你要做一个“关于我们”页面。
正确做法是：
- 【Git】→【分支】→【新建分支】
- 名字写清楚，比如
feature/about-page - 切换过去开始编码
这样做有什么好处？
- 主分支
main一直保持稳定； - 你随便折腾都不会影响别人；
- 功能做完测试通过后，再合并回去。
等about.html写好了，提交一次：
feat: add about us page with basic layout然后切回main分支，右键feature/about-page→ 【合并到当前分支】
合并完可以删除这个临时分支，保持整洁。
遇到冲突怎么办？别慌，HBuilderX 能帮你
最怕什么？两个人同时改了同一个文件，结果一拉取提示“冲突”。
比如你改了header.css的背景色，同事也改了同一行。
HBuilderX 会自动弹出【合并编辑器】，左右对比两个版本：
<<<<<<< HEAD background-color: #007bff; ======= background-color: #28a745; >>>>>>> feature/login-style你只需要手动删掉不需要的部分，保留正确的那一行，保存后重新提交即可。
🔑 关键技巧：解决冲突后，一定要在页面上实际测试一下效果，别光看代码。
让 Git 更专业：几个必须掌握的最佳实践
1. 提交信息要写清楚，别写“update file”
错误示范：
修改了一些东西 更新代码 save正确写法：
feat(header): add mobile-friendly nav toggle fix(login): validate email format before submit docs: update README with deployment steps推荐使用 Conventional Commits 规范，格式为：
类型(范围): 描述常见类型：
-feat: 新功能
-fix: 修复 bug
-docs: 文档更新
-style: 样式调整（不影响逻辑）
-refactor: 重构
-perf: 性能优化
-test: 测试相关
-chore: 构建或工具变更
这样不仅能让人快速看懂每次改了啥，还能自动生成 changelog。
2. 一定要加.gitignore，别把垃圾传上去
Node 项目的node_modules/、Windows 的Thumbs.db、Mac 的.DS_Store……这些都不该进 Git。
在项目根目录新建一个文件，名字叫.gitignore，内容如下：
# OS generated files .DS_Store Thumbs.db # Dependency directories node_modules/ bower_components/ # Logs *.log # Environment variables .env .config.json # IDE settings .idea/ .vscode/settings.json .project保存后，这些文件就不会出现在 Git 提交列表里了。
3. 给主分支加保护，防止误操作
如果你用的是 GitHub 或 Gitee，建议给main或master分支设置保护规则：
- 禁止直接 push；
- 必须通过 Pull Request（PR）合并；
- 要求至少一人审核；
- 要求 CI 构建通过。
虽然 HBuilderX 目前还不支持直接处理 PR，但你可以用浏览器操作，再在本地同步。
实战场景回顾：一次完整的团队协作流程
假设你们团队要做一个企业官网：
- 项目经理在 Gitee 创建仓库，初始化 README；
- 前端小李用 HBuilderX 克隆项目（【文件】→【克隆仓库】）；
- 小李创建分支
feature/homepage-layout，开始写首页结构； - 写完提交并推送，发起 PR 请求合并；
- 技术负责人审核代码，确认无误后合并入 main；
- 小李本地拉取最新代码，继续下一个任务。
整个过程无需敲任何命令，全部通过图形界面完成。
写在最后：工具只是起点，流程才是核心
HBuilderX + Git 的组合，看似简单，但它背后代表的是一种思维方式的转变：
从“我一个人闷头写代码”，走向“可协作、可追溯、可持续迭代”的现代开发模式。
哪怕你现在只是个人开发者，也应该从第一个项目就开始用 Git。因为：
- 今天的“小项目”，可能是明天的“大系统”；
- 今天的“自己玩”，可能是明天的“团队作战”；
- 今天的“随手改”，终将变成“无法复盘的历史”。
所以，别再把 HBuilderX 当成一个单纯的代码编辑器了。把它当作你迈向专业化开发的第一站，让每一次保存，都成为一次可控的演进。
如果你正在学前端、做静态页、搞 uni-app 项目，不妨从今天开始，给每一个项目都加上 Git 管理。你会发现，不只是代码更安全了，你的开发节奏也会变得更有条理。
💬 互动时间：你在用 HBuilderX 做项目时遇到过哪些 Git 问题？欢迎在评论区分享，我们一起解决。
)