直接在含index.html的文件夹执行git init;.gitignore需排除临时文件;css/js必须用相对路径;提交信息须用动词明确描述修改内容。

HTML项目根目录下直接初始化 Git 仓库就行
不需要额外包装、不用套构建工具壳子,只要你的 index.html 和相关资源(css/、js/、images/)在一个文件夹里,这个文件夹就是 Git 管理的起点。
常见错误是把 Git 初始化在父级空目录,或者误放在某个子文件夹(比如只 init 在 js/ 里),结果 git status 看不到 HTML 文件——本质是工作区没对准。
- 打开终端,
cd进到包含index.html的那个文件夹 - 运行
git init,看到Initialized empty Git repository就成功了 - 立刻执行
git add .,再git commit -m "init: basic HTML structure" - 别跳过这步:检查
git status输出是否列出所有 HTML/CSS/JS 文件,不是“nothing to commit”就说明路径或忽略规则有问题
.gitignore 里必须排除浏览器生成的临时文件
本地双击打开 index.html 或用 Live Server 插件时,浏览器可能在项目目录里写缓存、日志甚至下载的资源;VS Code 的插件(如 Live Server)也会生成 .vscode/ 或 .history/。这些不该进仓库,但容易被忽略。
不加 .gitignore 的后果不是报错,而是下次 git add . 会偷偷塞进一堆无关文件,协作时污染提交历史,还可能泄露本地配置。
立即学习“前端免费学习笔记(深入)”;
- 在项目根目录新建
.gitignore,至少写入:*.log .DS_Store Thumbs.db .vscode/ .history/ *.swp *.swo
- 如果用了 VS Code 的 “Auto Save” + “Delay”,它会在保存瞬间生成临时文件,
.gitignore必须生效才能避免误提交 - 已经误提交了?用
git rm -r --cached .vscode/清除暂存区,再git commit,后续就不会再跟踪
静态 HTML 部署前记得检查相对路径是否断裂
Git 本身不管路径对不对,但 git clone 后直接打开 index.html,如果 CSS/JS 的 src 或 href 是绝对路径(比如 /css/style.css),浏览器会按当前域名根目录去找——而本地文件协议(file://)下,/ 指向磁盘根,不是项目根,必然 404。
这是纯 HTML 项目最常导致“本地能跑、Git 克隆后白屏”的原因,和 Git 配置无关,但发生在 Git 流程中。
- 统一用相对路径:
css/style.css、../images/logo.png,别带开头的/ - 检查所有
<link href="...">、<script src="..."></script>、<img src="..." alt="HTML开发环境如何配置Git仓库_HTML开发环境配置Git仓库方法【详解】" > - 用浏览器开发者工具的 Network 标签页看有没有 404 请求,重点盯
css、js、fonts类型 - 如果必须用绝对路径(比如部署到子路径如
/my-app/),改用<base href="/my-app/">,但注意它会影响所有相对 URL
Git 提交信息别写“update html”这种模糊描述
HTML 项目虽小,但每次修改都有明确意图:修复拼写、调整按钮颜色、补上缺失的 alt 属性。用模糊提交信息,三个月后你自己都看不懂哪次改了语义结构,哪次只是调了 margin。
尤其当多人协作或要回滚某次样式变更时,清晰的提交历史比任何注释都管用。
- 动词开头,说明动作:
fix: typo in contact section、style: increase header font-size to 1.5rem - 避免
update、change、modify这类无信息量的词 - 一行就够了,别写长段落;真需要解释,用
git commit -m "msg" -m "detail"加第二段 - 如果改的是可访问性(比如加
aria-label),提交信息里带上accessibility:前缀,方便后期审计
Git 仓库配得再规范,路径和提交信息这两块一松懈,HTML 项目就容易变成“谁都不敢动”的黑盒。尤其相对路径和提交习惯,不靠工具强制,全靠人盯住。











