在 github pages 上部署静态网站时，所有被 html、css 或 javascript 引用的资源（如 canva 导出的图片、pdf 文档等）必须一同发布到仓库中，否则访问者将看到 404 错误；github pages 不支持服务端动态读取本地未提交文件，也无后端执行能力。
当你在本地开发网站并使用 zuojiankuohaophpcnimg src="my-banner.png"> 或 <a href="report.pdf">下载报告</a> 这类相对路径引用文件时，这些路径指向的是你电脑上的文件——但用户访问你的 GitHub Pages 网站（例如 https://username.github.io/my-site/）时，浏览器只会向 GitHub 的服务器发起请求，而GitHub 只能提供你已推送到仓库中的文件。
✅ 正确做法：将所有资源文件纳入 Git 仓库并随 HTML 一起发布
假设你的项目结构如下（本地）：
my-website/
├── index.html
├── style.css
├── script.js
├── assets/
│ └── banner-canva.png ← 从 Canva 下载保存的图片
└── docs/
└── project-plan.pdf你需要确保：
- assets/banner-canva.png 和 docs/project-plan.pdf 已通过 git add 提交；
- HTML 中的路径与仓库内实际路径一致：
<!-- ✅ 正确：路径与仓库结构匹配 --> <img src="assets/banner-canva.png" alt="首页横幅"> <a href="docs/project-plan.pdf" target="_blank">查看项目计划</a>
❌ 常见错误：
- 使用绝对路径如 C:/Users/Me/Desktop/banner.png（仅本地有效，线上完全失效）；
- 引用未提交的文件（Git status 显示为 untracked），即使你在本地能看到，线上必报 404；
- 混淆大小写（如 Banner.png vs banner.png）——GitHub Pages 运行在 Linux 环境，路径区分大小写。
⚠️ 重要提醒：GitHub Pages 是纯静态托管服务
它不运行 Node.js、PHP、Python 或任何后端代码，也不支持 .htaccess 重写或服务器端文件读取。这意味着：
- 你无法通过 JS 的 fetch('/path/to/local/file.docx') 动态加载你本地硬盘上未上传的文件；
- 所有“链接到其他文件”的超链接，目标文件必须存在于你的 GitHub 仓库中，并通过 git push 发布；
- 若需保护敏感文件（如内部文档），请勿将其放入公开仓库——GitHub Pages 仅适合公开内容；私有资源应通过权限控制的平台（如 Notion、SharePoint）或带登录验证的托管服务（Vercel + Serverless Functions、Cloudflare Pages + D1）分发。
? 验证技巧：
部署前，在本地用浏览器打开 file:// 路径的 index.html 可能一切正常，但这不代表线上可用。更可靠的测试方式是：
- 使用 VS Code 插件 Live Server 启动本地 HTTP 服务（模拟真实路径解析）；
- 或直接在 GitHub 仓库中启用 Pages，然后立即访问生成的 URL，检查浏览器开发者工具（F12 → Network 标签页）中是否有红色 404 请求。
总结：“能被网页引用” = “必须被 git 提交 + 推送到 GitHub 仓库”。把 Canva 图片保存为 PNG/SVG、把 PDF 存入 docs/ 目录、更新 HTML 路径、git add . && git commit -m "add assets" && git push —— 用户就能正常看到了。
