年后刚开工还没有活的时候无聊翻了一下自己Github，发现之前的项目预览挂了，便乘机修正。之前都是直接运用Github Pages的默许域名进行项目展现，感觉有点不爽，尽管我的个人博客现在木了，可是域名还在呀，为什么不能用自己的个人域名来展现项目呢？

所以一番折腾，终究完结了在只依靠Github Pages时，运用同一个自界说域名来展现多个Github项目。

效果如下：

helianthuswhite.cn/san-color 一个自定义域名展示多个Github项目

helianthuswhite.cn/vue-weather 一个自定义域名展示多个Github项目

在完结过程中，主要包括了以下两个关键过程：

  1. 经过iframe进行项目路由
  2. 经过github actions完结项目主动布置

经过iframe进行项目路由

主库房装备自界说域名

Github 供给了运用自界说域名展现 Github Pages 的方法，如下图所示，具体的装备方法官方现已给了详细的文档，能够查看Github Pages装备自界说域名。

一个自定义域名展示多个Github项目

可是官方供给的方法并不支撑将一个自界说域名一起绑定到多个项目，这儿咱们考虑经过 iframe 转发的方法将自界说域名的途径转换为 helianthuswhite.github.io/xxxx。

由于在主库房中咱们并没有处理路由逻辑，当访问 helianthuswhite.cn/xxxx 时 Github Pages 找不到对应的页面，便会回来404。默许 Github 会先去找当时库房下是否存在404.html文件，若存在则回来改文件页面，不然运用 Github 默许的404页面。

基于上述情况，咱们能够在主库房中创立404.html文件并经过下面的代码完结页面恳求的转发：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Helianthuswhite</title>
    <link rel="stylesheet" href="/index.css" />
</head>
<body>
    <script>
        var baseUrl = 'https://helianthuswhite.github.io';
        var project = window.location.pathname;
        var iframe = document.createElement("iframe");
        iframe.width = '100%';
        iframe.height = '100%';
        iframe.frameborder = 0;
        iframe.src = baseUrl + project;
        document.body.appendChild(iframe);
    </script>
</body>
</html>

这儿也不必担心会影响原有的404逻辑，当恳求转发到 helianthuswhite.github.io 域名下时，原有的404依然会回来。

完整的主库房代码能够参考：github.com/helianthusw… ，填加了款式文件以消除浏览器默许款式对iframe的影响。

项目库房装备Pages

若项目库房未装备过 Github Pages，则能够经过官方文档中的方法进行装备——装备Github Pages。装备完结后能够经过 helianthuswhite.github.io/xxxx 的方法访问项目页面，如下图所示：

一个自定义域名展示多个Github项目

完结上述装备后，那咱们现已能够经过「自界说域名/项目名称」的方法访问到该项目啦~

对多个不同的项目都装备Pages，便能够完结同一个域名访问不同的项目。

经过Github Actions完结项目主动布置

该部分为本文的衍生产物，与本文的核心无关，不感兴趣的看官能够直接越过。

该章节以 github.com/helianthusw… 项目为例。

进入项目库房，选择顶部Actions栏目，点击set up a workflow yourself进入到自界说工作流的装备页面。

一个自定义域名展示多个Github项目

进入装备页面后，Github 会主动在项目根目录创立 .github/workflows/xxxxx 的工作流装备文件，文件名称可自在指定。一起 Github 也供给了在线的装备文件修改功能，左边为修改和预览区，在右侧的 Marketplace 中能够看到各式各样官方或其他开发者供给的工作流装备。

一个自定义域名展示多个Github项目

后面的工作主要就是书写该项意图工作流装备文件，即 build.yml，具体的语法这儿不多介绍，能够查看官方供给的文档Github Actions语法说明。

关于项目 Pages 布置的工作流，这儿运用开源项目 github.com/JamesIves/g… 来完结，完整的装备文件如下所示：

# This is a basic workflow to help you get started with Actions
name: CI
# Controls when the workflow will run
on:
  # Triggers the workflow on push or pull request events but only for the "master" branch
  push:
    branches: [ "master" ]
  pull_request:
    branches: [ "master" ]
  # Allows you to run this workflow manually from the Actions tab
  workflow_dispatch:
# A workflow run is made up of one or more jobs that can run sequentially or in parallel
jobs:
  # This workflow contains a single job called "build"
  build:
    # The type of runner that the job will run on
    runs-on: ubuntu-latest
    permissions:
      contents: write
    # Steps represent a sequence of tasks that will be executed as part of the job
    steps:
      # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
      - name: Checkout a new branch
        uses: actions/checkout@v3
      # Runs a set of commands using the runners shell
      - name: Run install and build
        run: |
          npm i
          npm run build
          
      - name: Deploy to gh-pages
        uses: JamesIves/github-pages-deploy-action@v4.4.1
        with:
          folder: dist

该工作流指定了当 master 分支发生 push 或许 pull request 事情时触发，一共包括三个过程：

  • checkout 一个新的分支
  • 经过 npm i 和 npm run build 指令履行构建
  • 指定将构建后的 dist 目录文件更新到 gh-pages 分支

装备文件书写完结并提交到库房的 master 分支后，点击 Actions 栏目，能够看到正在履行的工作流情况。

一个自定义域名展示多个Github项目

点击某一条工作流，选择工作流中的某个 Job，点击进入该 Job 的详情页，能够在详情页中看到具体的履行内容以及每条履行指令的日志。当有指令履行失利时，便能够在这儿查看详细的失利原因。

一个自定义域名展示多个Github项目

当上述工作流履行完结之后，咱们能够看到项目库房的 gh-pages 分支现已主动更新，此刻再改写页面 helianthuswhite.cn/vue-weather… 便能够看到页面也现已更新。

后续咱们只需要正常进行项目开发并提交代码，再也不必手动构建更新项目页面~