17370845950

HTML5源码备份需保留index.html、assets/、manifest.json等运行依赖文件，排除node_modules/等无关目录，通过离线打开测试验证，并采用Git+ZIP/TAR+3-2-1多层存储确保可靠性。

HTML5 源代码备份不是“打包整个网站”，而是明确哪些文件必须保留

HTML5 项目本质是一组静态文件，备份核心是确保 index.html、assets/（含 CSS/JS/images）、manifest.json（如有 PWA）、service-worker.js 等运行依赖不遗漏。常见错误是只备份根目录 HTML，却漏掉 js/utils.js 或 css/theme.css，导致本地打开白屏或样式错乱。

• 必须包含：所有被 、、 引用的路径
• 可忽略：node_modules/、dist/（若你存的是源码，而非构建产物）、.git/（Git 本身已是备份手段）
• 检查方法：在无网络环境下用浏览器直接双击打开 index.html，能完整渲染且无控制台 404 报错才算合格

用 Git 备份比手动复制更可靠，但要注意 .gitignore 的陷阱

Git 是 HTML5 源码最常用也最有效的备份方式，但默认配置常埋雷——比如许多模板会把 build/ 或 public/ 加入 .gitignore，而你实际开发中可能已将资源放进了这些目录。一旦误删，Git 不会记录。

• 执行 git status --ignored 查看哪些本该纳入却被忽略的文件
• 若使用 Vite / Webpack，确认 public/ 下的图标、favicon.ico 是否被 .gitignore 拦截（Vite 默认不忽略 public/，但有些脚手架会加）
• 备份前必做：git add -A && git commit -m "backup before v1.2"，别只靠 git push——本地提交才是第一道防线

离线备份选 ZIP 还是 TAR？关键看操作系统和解压习惯

跨平台协作时，ZIP 是最安全的选择；纯 Linux/macOS 环境下 TAR 更轻量，但 Windows 用户双击解压可能失败。

• Windows 用户：用 zip -r site-backup-20250615.zip index.html assets/ css/ js/（Linux/macOS 命令行）或右键「发送到 → 压缩文件夹」
• macOS/Linux 用户：如需保留权限（比如 chmod +x deploy.sh），用 tar -czf site-backup-20250615.tgz index.html assets/ css/ js/
• 绝对避免：直接压缩整个项目文件夹却不排除 node_modules/——一个 ZIP 可能达 200MB+，失去“快速恢复”意义

存储位置别只盯本地硬盘，三个层级要分清

真正可靠的备份必须满足“3-2-1 原则”：3 份副本、2 种介质、1 份异地。HTML5 源码虽小，但一旦丢失，重写语义结构和响应式断点成本极高。

立即学习“前端免费学习笔记（深入）”；

• 第 1 层（工作副本）：本地 SSD，用于日常编辑（/Users/name/project-html5/）
• 第 2 层（冷备副本）：外接 USB 3.0 硬盘，每月全量 ZIP 覆盖一次（路径建议固定，如 /Volumes/BACKUP/html5-archives/）
• 第 3 层（异地副本）：GitHub/GitLab 私有仓库（非 Gist），或 NAS 的 SMB 共享路径（如 smb://nas.local/backups/html5/）——切勿用百度网盘同步未加密的源码

很多人把 Git 推送到 GitHub 就以为万事大吉，但 GitHub 可能封号、私有库可能误设为公开、甚至某天删库跑路。真正的备份，是当你拔掉网线、关掉电脑、拿走硬盘后，还能从另一台设备上完整还原出可运行的页面。