在GitHub Pages 上构建您的 Github Page 可以使用 GitHub Actions，这是一个自动化构建工具，可以在持续集成和持续部署（CI/CD）流程中自动化构建。以下是在云端构建 GitHub Page 的步骤：

1. 安装 GitHub Actions: 首先，确保您在您的机器上安装了 GitHub Actions。在您的 GitHub 主目录下，打开终端并运行以下命令：

bash npm install -g github-actions

1. 创建一个新的 GitHub Actions workflow: 在 GitHub Actions 中，创建一个新的 workflow 文件，例如 pages-ci.yml。在该文件中，定义一个名为 pages-ci 的 workflow，并指定以下内容：

```yaml name: Pages CI

on: push: branches: - main

jobs: build: runs-on: ubuntu-latest

steps:
- name: Checkout Code
  uses: actions/checkout@v2

- name: Setup React.js Development Environment
  uses: actions/setup-react@v2
  with:
    repository: ${{ github.repository }}
    workflow_dir: ./.github/workflows

- name: Build the Pages
  run: |
    yarn build

- name: Publish the Pages
  run: |
    yarn publish

- name: Deploy to GitHub Pages
  run: |
    yarn deploy

```

这个 workflow 会在每次您提交更改到 main 分支时运行，包括构建、预览和部署 GitHub Pages。以下是对每个步骤的详细解释：

• name: Pages CI: 这是 workflow 的名称，确保它能够清楚地描述您的工作流程。
• on: push: 当您在本地或远程分支上提交更改时，触发这个 workflow。 push 是 GitHub Actions 中用于触发 workflow 的事件类型，允许 GitHub 提供更多的上下文信息，如分支、环境变量、用户等等。
• jobs: build: 这是 workflow 的主要部分，定义了工作流中的几个任务。 build 是这个 workflow 的名称，它使用了 run 和 steps 属性来定义任务的运行顺序和运行的命令。
• runs-on: ubuntu-latest: 配置 workflow 在 Ubuntu 主版操作系统上的运行环境。这里指定的是最新版本的 Ubuntu，因为 GitHub Actions 默认使用较旧的 actions/checkout、actions/setup-react 和 actions/yarn 命令行工具。
• name: Checkout Code: 使用 actions/checkout@v2 进行本地代码的checkout，确保您已正确下载和安装了所有必要的依赖项，例如 yarn 和 react.
• name: Setup React.js Development Environment: 使用 actions/setup-react@v2 创建一个基于 React.js 的开发环境。这个 workflow 会检查您的 package.json 文件，并安装必要的依赖项，如 react-dom、react-scripts 和 yarn。确保在 package.json 文件中设置了 scripts 部分的 build 和 deploy 属性，以便在构建和部署页面时执行相应的操作。
• name: Build the Pages: 使用 yarn build 编译项目，并将构建后的代码保存在 .github/workflows 目录下。这将在构建期间执行 yarn 命令来构建页面。
• name: Publish the Pages: 使用 yarn publish 启动 yarn 命令来发布构建后的页面到 GitHub Pages。这将执行 yarn publish 命令，该命令将您的项目上传到 GitHub Pages，并将其复制到指定的 URL，如 https://github.com/username/pages。
• name: Deploy to GitHub Pages: 使用 yarn deploy 启动 yarn deploy 命令来将构建后的页面部署到 GitHub Pages。这将执行 yarn deploy 命令，该命令将您的项目上传到 GitHub Pages，并将其复制到指定的 URL，如 https://github.com/username/pages。

通过这种方式，您可以在云端构建和部署您的 GitHub Pages，实现了自动化流程，减少手动工作并提高开发效率。