React项目部署，永不落伍

2023-09-02 08:16:14

准备工作

在开始使用GitHub Actions来自动部署React项目之前，我们需要确保已经完成以下准备工作：

创建一个GitHub存储库来托管您的React项目。
在项目中安装JamesIves/github-pages-deploy-action。
获取GitHub个人访问令牌，以便在GitHub Actions中使用。

设置GitHub Actions工作流

创建GitHub Actions工作流文件

在项目根目录下创建一个名为.github/workflows/deploy.yml的文件。
在文件中添加以下内容：

name: Deploy to Github Pages

on:
  push:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout code
        uses: actions/checkout@v2

      - name: Install dependencies
        run: npm install

      - name: Build project
        run: npm run build

      - name: Deploy to GitHub Pages
        uses: JamesIves/github-pages-deploy-action@4.2.2
        with:
          branch: gh-pages
          folder: build
          token: ${{ secrets.GITHUB_TOKEN }}

将GitHub个人访问令牌添加到项目Secret中
- 前往GitHub项目的“Settings”页面。
- 在侧边栏中选择“Secrets”。
- 点击“New secret”按钮。
- 在“Name”字段中输入GITHUB_TOKEN。
- 在“Value”字段中输入您的GitHub个人访问令牌。
- 点击“Add secret”按钮。

部署React项目

现在，您可以通过推送代码到main分支来触发GitHub Actions工作流。工作流将自动构建您的React项目并将构建好的项目部署到Github Pages上。您可以在项目的“Actions”标签页中查看工作流的状态和日志。

常见问题解答

为什么我的项目没有成功部署到Github Pages上？
- 检查您的GitHub Actions工作流文件是否正确配置，特别是branch和folder参数是否正确。
- 确保您拥有正确的GitHub个人访问令牌，并且已将其添加到项目的Secret中。
- 确保您的React项目已正确构建，并且构建后的项目存在于build文件夹中。
如何自定义Github Pages的URL？
- 在项目的package.json文件中，添加一个"homepage"字段，并将其值设置为您的自定义URL。
- 在GitHub Actions工作流文件中，将branch参数的值更改为"gh-pages"。
如何使用自己的自定义域名？
- 在GitHub项目中创建一个名为CNAME的文件，并将其内容设置为您的自定义域名。
- 在GitHub Actions工作流文件中，将cname参数的值设置为您的自定义域名。