
在 github pages 上部署静态网站时,所有被 html、css 或 javascript 引用的资源(如 canva 导出的图片、pdf 文档等)必须一同发布到仓库中,否则访问者将看到 404 错误;github pages 不支持服务端动态读取本地未提交文件,也无后端执行能力。
当你在本地开发网站并使用
或 下载报告 这类相对路径引用文件时,这些路径指向的是你电脑上的文件——但用户访问你的 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 中的路径与仓库内实际路径一致:
@@##@@ 查看项目计划
❌ 常见错误:
一套面向小企业用户的企业网站程序!功能简单,操作简单。实现了小企业网站的很多实用的功能,如文章新闻模块、图片展示、产品列表以及小型的下载功能,还同时增加了邮件订阅等相应模块。公告,友情链接等这些通用功能本程序也同样都集成了!同时本程序引入了模块功能,只要在系统默认模板上创建模块,可以在任何一个语言环境(或任意风格)的适当位置进行使用!
- 使用绝对路径如 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 —— 用户就能正常看到了。









