如何通过Cloudflare将子域名代理到GitHub.io仓库并保留域名

我有个托管在Cloudflare的域名example.com，还有个GitHub仓库foo，对应的GitHub Pages地址是https://hobbes3.github.io/foo/index.html。但网站代码只有当index.html在根路径（比如https://example.com/index.html）时才能正常运行——因为GitHub.io地址里多了个foo/路径，导致JS和图片的根路径引用失效，网站没法正常工作。

我想知道能不能把仓库和子域名绑定，让https://foo.example.com/指向https://hobbes3.github.io/foo/，同时URL不会跳转到GitHub.io的地址？之后还要给bar仓库配置类似的https://bar.example.com/。

我知道Cloudflare有URL转发规则，不过不确定是不是能用这个实现。另外，我是不是必须重写所有代码，硬编码仓库名foo和bar？或者必须自己搭Apache、Nginx这类服务器才能实现？

方案1：用Cloudflare反向代理（推荐） #

不用改代码，也不用自己搭服务器，靠Cloudflare的规则就能实现反向代理，全程保留自定义子域名：

1. 添加子域名解析：在Cloudflare域名管理面板，新增两条CNAME记录：
   • 记录名填foo，目标值填hobbes3.github.io，开启Cloudflare代理（点击橙色云朵图标）
   • 记录名填bar，目标值同样填hobbes3.github.io，开启代理
2. 配置URL重写规则：
   • 进入Cloudflare「规则」→「URL重写」，为foo.example.com/*创建规则：
     • 规则类型选「转发URL」，转发模式选「隐藏式转发（反向代理）」，目标URL填https://hobbes3.github.io/foo/$1
   • 同理为bar.example.com/*创建规则，目标URL填https://hobbes3.github.io/bar/$1
3. 绑定GitHub Pages自定义域名：
   • 打开foo仓库的设置→「Pages」，在「自定义域名」栏输入foo.example.com，点击保存。GitHub会自动验证域名有效性（确保Cloudflare解析正确）
   • 对bar仓库重复此操作，输入bar.example.com

这样访问foo.example.com时，地址栏不会跳转到GitHub.io，Cloudflare会偷偷把请求转发到对应仓库路径，浏览器显示的是子域名根路径，网站的根路径引用就能正常工作。

方案2：修改网站代码路径引用 #

如果不想依赖Cloudflare规则，可以直接改代码适配GitHub Pages路径：

• 把所有以/开头的资源路径（比如/script.js、/images/logo.png）改成相对路径，比如./script.js、./images/logo.png
• 或者在HTML的<head>标签里添加<base href="/foo/">（foo换成对应仓库名），这样所有根路径引用都会自动加上仓库路径前缀，适配GitHub Pages的结构

方案3：自行搭建反向代理服务器 #

如果有自己的服务器，也可以用Nginx或Apache配置反向代理：

• Nginx示例配置：

server {
    listen 443 ssl;
    server_name foo.example.com;
    ssl_certificate /path/to/your/cert.pem;
    ssl_certificate_key /path/to/your/key.pem;

    location / {
        proxy_pass https://hobbes3.github.io/foo/;
        proxy_set_header Host hobbes3.github.io;
        proxy_set_header X-Real-IP $remote_addr;
    }
}

• 为bar.example.com复制上述配置，把foo替换成bar即可。不过这个方案需要自己维护服务器，不如Cloudflare方案省心。

内容的提问来源于stack exchange，提问作者hobbes3