使用 GitHub Actions 构建、部署 Next.js 并将其托管到 GitHub Pages

引言

Next.js 是一个备受推崇的 React 框架，用于构建高性能的静态和服务器端渲染的 Web 应用程序。GitHub Actions 是一个持续集成和持续交付 (CI/CD) 平台，可自动化软件开发流程。GitHub Pages 是一种托管服务，用于托管和展示静态网站。

先决条件

• 已安装 Node.js 和 npm
• 创建一个 GitHub 帐户
• 创建一个 Next.js 项目

步骤 1：创建 GitHub Actions 工作流文件

在项目根目录中创建名为 .github/workflows/deploy.yml 的工作流文件。该文件将定义 GitHub Actions 工作流，用于构建和部署 Next.js 应用程序。

name: Deploy to GitHub Pages

on:
  push:
    branches:
      - main

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: '16'
          cache: 'npm'
      - run: npm install
      - run: npm run build
      - uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./out
          force_orphan: true

步骤 2：构建 Next.js 应用程序

在工作流文件中，run: npm run build 命令使用 Next.js 的内置构建命令构建应用程序。此命令将生成优化后的静态文件，位于 out 目录中。

步骤 3：部署到 GitHub Pages

使用 peaceiris/actions-gh-pages 操作将构建的静态文件部署到 GitHub Pages。此操作使用 github_token 秘钥进行身份验证，并将 publish_dir 目录中的内容推送到 GitHub Pages 的 gh-pages 分支。

步骤 4：设置 GitHub Pages

在 GitHub 存储库设置中，导航到“Pages”选项卡。选择“主分支”作为源分支，并选择“gh-pages”作为部署分支。这将配置 GitHub Pages 使用 gh-pages 分支中的文件来托管您的网站。

步骤 5：触发工作流

将代码推送到 main 分支将触发 GitHub Actions 工作流。工作流将构建 Next.js 应用程序，并将构建的静态文件部署到 GitHub Pages。

步骤 6：验证部署

完成部署后，您可以在 GitHub Pages 上访问您的网站。 URL 将遵循以下格式：https://.github.io/。

结论

使用 GitHub Actions 自动化 Next.js 应用程序的构建和部署可以提高效率并确保持续交付。本教程概述了如何设置和使用 GitHub Actions 和 GitHub Pages，以便轻松地将您的 Next.js 网站托管和展示给世界。