如何在自定义域名子目录下托管GitHub Pages项目站点?
实现自定义域名下的项目子路径托管(mysite.com/projects/)
我完全懂你的痛点——GitHub Pages官方确实只支持绑定apex域名(如mysite.com)或子域名(如project1.mysite.com),没有直接提供子路径映射的文档,用250个子域名逐个配置DNS确实是很笨拙的权宜之计。这里有两个更优雅的解决方案,帮你实现目标访问路径:
方案1:单仓库统一承载所有项目(适合静态站点/轻量项目)
这个方案把所有项目都放在同一个GitHub Pages仓库的子目录里,直接通过路径访问:
- 整理仓库目录结构,每个项目对应
projects下的一个子文件夹:your-main-repo/ ├── index.html # 可选:项目列表首页 ├── projects/ │ ├── project-a/ │ │ ├── index.html │ │ └── css/ │ └── project-b/ │ ├── index.html │ └── js/ - 将你的apex域名
mysite.com绑定到这个主仓库的GitHub Pages - 对于静态项目:确保所有资源引用用相对路径(比如
./css/style.css),或者在项目的HTML里统一设置基础路径(<base href="/projects/project-a/">) - 对于单页应用(如React/Vue):在项目构建时配置
publicPath为/projects/<project>/,同时在主仓库根目录添加404.html做路由 fallback(避免刷新子路径时出现404)
方案2:反向代理映射独立项目仓库(适合大型/独立维护的项目)
如果每个项目都是独立的GitHub Pages仓库,不想合并到一个仓库,可以用反向代理实现路径转发:
- 给每个独立项目仓库绑定一个“隐藏”的子域名(比如
project-a-pages.mysite.com),这些子域名不需要对外暴露 - 配置反向代理规则:当用户访问
mysite.com/projects/project-a时,自动将请求转发到project-a-pages.mysite.com - 这种方式的优势是每个项目可以独立维护、独立部署,前端代码不需要修改路径,所有路径映射逻辑都在代理层完成
关键注意事项
- DNS配置:确保
mysite.com的A记录指向GitHub Pages的官方IP地址,同时如果用方案2的子域名代理,要配置对应的CNAME记录指向项目的GitHub Pages默认域名(如username.github.io/project-a) - 路由 fallback:单页应用必须处理子路径的刷新问题,常见做法是在主仓库根目录添加
404.html,里面用JS把路径重写到正确的入口文件 - 缓存策略:如果用反向代理,要配置合理的缓存规则,避免用户访问到旧的项目内容
内容的提问来源于stack exchange,提问作者user13549258




