You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

如何在自定义域名子目录下托管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

火山引擎 最新活动