使用 GitHub Actions 将项目部署到 Github Pages

创建我们的工作流程

自定义域名

指定分支（可选）

在本文中，我将解释如何设置一个使用现有 GitHub 操作的基本工作流程。每次主分支发生更改时，此工作流程都会将一个静态网站部署到 GitHub Pages。

为此，我们将使用部署到 GitHub Pages 操作。

创建我们的工作流程

存储库的工作流程存储在.github/workflows/文件夹中。

在此文件夹中创建一个 .yml 文件（例如，deploy-to-gh-pages.yml您可以根据需要命名）并粘贴以下内容：

name: Build and Deploy
on: [push] # defaults to master
permissions:
  contents: write
jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout 🛎️
        uses: actions/checkout@v3

      - name: Install and Build 🔧
        run: |
          npm install
          npm run-script build

      - name: Deploy 🚀
        uses: JamesIves/github-pages-deploy-action@v4
        with:
          folder: build # The folder the action should deploy.

构建步骤

    - name: Install and Build 🔧
      run: |
        npm install
        npm run-script build

本节包含了部署前编译代码所需的脚本。如果不需要，请删除此部分。

选项

      with:
        branch: gh-pages
        folder: dist

所有这些选项都是环境变量，部署到 GitHub Pages 操作将使用这些变量才能工作。

该BRANCH选项是您希望将构建文件部署到的分支。gh-pages默认情况下，GitHub 会自动设置您的 GitHub Pages 网站。

gh-pages您需要先创建分支。如果分支不存在，操作将失败。

该folder选项是您要部署的仓库中的文件夹。它通常dist用于 Vue.js 应用或buildReact.js 应用。

该permissions文件是必需的，以便脚本具有足够的运行权限。

或者，如果您想使用特定的访问令牌，您可以添加token如下选项：

token: ${{ secrets.ACCESS_TOKEN }}

此选项是用于授权操作存储库的访问令牌。

您可以在“配置文件设置”/“开发人员设置”中生成此令牌，并将其添加到您的存储库secrets中Settings/Secrets

自定义域名

如果您使用自定义域名，则需要预先CNAME在分支的根目录下添加一个gh_pages包含您的域名的文件。

例如dev.to

如果您没有使用自定义域名，那么请不要忘记指定您的项目不托管在服务器根目录。

• 对于 Vue.js 应用程序，请添加此项vue.config.js。更多信息。

module.exports = {
    publicPath: process.env.NODE_ENV === 'production'
        ? '/repository-name/'
        : '/'
}

• 对于 React.js 应用程序，请添加此内容package.json。更多信息。

"homepage":"https://yourusername.github.io/repository-name"

指定分支（可选）

默认情况下，这将master在进行更改时使用分支。

要更改该on: [push]属性，请用您希望运行该属性的分支的名称替换该属性。

on:
  push:
    branches:
      - main

Actions注意：如果您的工作流未推送到分支，则不会显示在选项卡中master。但是，您仍然可以在提交详情中查看工作流的运行情况。

就这样！推送你的更改，现在你就可以在“操作”选项卡中看到神奇的效果了。

我们可以看到该应用程序已部署到 GitHub Pages。您可以通过单击“代码”选项卡中的按钮来检查您的部署environment：

首次运行该操作时，您可能需要在“设置”选项卡中禁用/启用 GitHub 页面选项。您可以通过将“源”设置更改为 ，master然后再更改回 来实现gh-pages。

您的实时应用链接是https://yourusername.github.io/repository-name