GitHub Pages能否实现URL隐式转发？自定义域名子目录跳转需求

GitHub Pages 本身是静态托管服务，没有原生支持服务器端的反向代理/URL转发（就是你在ASP.NET里用的那种后台拉取第三方内容返回、前端URL不变的机制），因为它只能托管静态HTML/CSS/JS资源，没有服务器端运行环境。不过可以用下面几种前端/自动化方式实现类似效果：

1. iframe 嵌入（最直接） #

在你的主站仓库里创建对应子目录的页面，比如docs/getstarted/index.html，然后在这个页面里用iframe嵌入目标站点的内容：

<!DOCTYPE html>
<html>
<head>
    <title>Get Started</title>
    <style>
        body, html { margin: 0; padding: 0; height: 100%; overflow: hidden; }
        iframe { width: 100%; height: 100%; border: none; }
    </style>
</head>
<body>
    <iframe src="https://docsproject.com/docs/getstarted"></iframe>
</body>
</html>

这种方式能让浏览器URL保持主站地址，但要注意：目标站点必须允许被iframe嵌入（即没有设置X-Frame-Options: DENY或SAMEORIGIN），否则浏览器会拦截。

2. 静态内容自动同步（最稳定） #

如果目标docs项目也是静态站点，可以用GitHub Actions把它的内容定期同步到主站仓库的docs目录，然后由GitHub Pages一起部署。这样用户访问的就是主站自身的静态内容，完全没有跨域或iframe限制。

比如在主站仓库的.github/workflows/sync-docs.yml里写一个自动化流程：

name: Sync Docs Content
on:
  schedule:
    - cron: '0 0 * * *' # 每天同步一次
  workflow_dispatch: # 支持手动触发

jobs:
  sync:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
        with:
          persist-credentials: false
          
      - name: Sync docs from docsproject
        run: |
          rm -rf docs/
          git clone https://github.com/your-username/docsproject.git temp-docs
          mv temp-docs/docs/* docs/
          rm -rf temp-docs
          
      - name: Commit and push changes
        run: |
          git config --local user.email "action@github.com"
          git config --local user.name "GitHub Action"
          git add docs/
          git commit -m "Sync latest docs content" || echo "No changes to commit"
          git push https://${{ secrets.GITHUB_TOKEN }}@github.com/your-username/main-repo.git main

这样每次docs项目更新后，主站的docs目录会自动同步最新内容，用户访问主站URL时看到的就是同步后的静态内容。

3. JavaScript 动态加载（受限较多） #

如果目标站点允许跨域请求（设置了CORS头），可以用JS动态拉取目标页面内容并插入到当前页面。比如主站docs/getstarted/index.html的代码：

<!DOCTYPE html>
<html>
<head>
    <title>Get Started</title>
    <script>
        window.addEventListener('load', async () => {
            try {
                const response = await fetch('https://docsproject.com/docs/getstarted');
                const html = await response.text();
                document.body.innerHTML = html;
            } catch (error) {
                document.body.innerHTML = '<p>Failed to load content.</p>';
            }
        });
    </script>
</head>
<body></body>
</html>

但这种方法有明显局限性：

• 目标站点必须开启CORS，否则浏览器会阻止请求；
• 目标页面的相对路径资源（如CSS、JS、图片）会因为主站域名的原因加载失败，需要目标站点用绝对路径；
• 页面的交互逻辑可能因为DOM替换出现问题。

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