使用 Next.js 自动将应用部署到 GitHub Pages
2023年03月16日 - 约 1578 字

我们把 Next.js 网站搭建好后，就可以把网站内容部署到网络上的静态空间了。在这里我选择的平台是 GitHub Pages 为我的网站进行托管，使用 GitHub Pages 的好处就不需要我多说了。

自动部署的好处

如果我们的 Next.js 项目不进行配置自动部署，那么我们每次写一篇文章，发布一篇文章的时候，就需要重新打包生成静态页。要知道 Next.js 打包生成静态页的时候是比较花时间的，我刚开始搭建 Next.js 项目的时候，网站上没几篇文章，打包的时候也需要花费一段时间。

在一个群里其中有一个群友，他有一个 Vuepress 项目，里面有 3100多部法律法规的文章，包含 1600多万字。根据他的描述，他打包花费了差不多一天的时间，大概是23个小时。

可见我们给 Next.js 项目配置自动部署是多么的方便，它可以给我们省很多时间，一年换算下来是一个非常可观的一个数字。下面我就把用 Next.js 自动将应用部署到 GitHub Pages 的成功案例分享给大家，希望可以对您有所帮助。

准备部署

在部署前要先了解一些基本的信息：

1、默认情况下 Markdown 源文件是在你项目的 blog 目录里的；
2、默认情况下 Next.js 网站打包生成的静态页文件会放在 out 目录里；
3、Next.js 推荐使用 npm 作为包管理器，当然也可以使用 npm 或 yarn ；
4、Next.js 作为项目依赖安装，并在 package.json 是配置了如下脚本：；

{
  "scripts": {
    "build": "next build && next export",
  }
}

在我的 package.json 文件里，我根据自己的情况对默认的配置进行了一点修改，我把默认的 "build": "next build" 改成了 "build": "next build && next export" ，需要打包的时候可以直接用 npm run build 命令就可以打包了。你也可以根据自己的实际情况进行修改，当然了也可以不需要修改，直接使用默认的就好了。

修改信息

- 4.1、可以把 npm run build 你想要的任何命令，这里随便你怎么改。
- 4.2、next build 是 Next.js 提供的一个命令行工具，用于将 Next.js 应用程序构建为静态 HTML 文件和 JavaScript 文件的集合，以便在生产环境中进行部署。它会将应用程序的所有页面预渲染为静态 HTML 文件，以提高性能和搜索引擎优化。构建后的文件将存储在 .next 目录中。
- 4.3、next export 是 Next.js 的一个命令，用于将 Next.js 应用程序导出为静态 HTML 文件。导出的静态文件存放在项目根目录的 out 文件夹里。
5、在 GitHub Pages 上配置好仓库的相关设置，需要新建一个新分支用来存放静态页。

仓库配置

1、在 GitHub 新建一个仓库（已经建有仓库的可以省略这一步骤），建立仓库后会自动生成一个名为 main 的默认主分支。这个分支我们用来存放 Next.js 项目的源码文件，包括我们的 md 文件也在里面。

2、在这个仓库里再新建一个分支，我建立了一个名为 fanma 的分支。分支名你可以随便取，这个没什么要求。

这样我们的 GitHub 仓库里就有了两个分支，其中 main 默认主分支用来存放项目的所有源码文件。另外一个分支 fanma 用下存放静态文件，也就是用来运行网站的文件。

这样我们的仓库配置就基本完成了。

自动部署

在 GitHub Pages 托管平台上，我使用的是 GitHub Actions 来为 Next.js 项目搭建的网站来进行自动部署。

1、在仓库默认主分支 main 根目录创建一个名为 .github 的文件夹，在 .github 文件夹里再创建一个 workflows 工作流文件夹，继续再这个 workflows 新建一个 fanma.yml 的文件。

最终的文件路径为 .github/workflows/fanma.yml 完整的路径。

其中 fanma.yml 的文件名是可以随便取的，只要 .yml 文件后缀不变就可以了。

2、工作流文件 fanma.yml 配置如下：

name: fanma

on: 
  push:
    branches: [main]
  workflow_dispatch:

jobs:
  docs:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v3
        with:
          # “最近更新时间” 等 git 日志相关信息，需要拉取全部提交记录
          fetch-depth: 0
      - name: Setup pnpm
        uses: pnpm/action-setup@v2
        with:
          # 选择要使用的 pnpm 版本
          version: 7
          # 使用 pnpm 安装依赖
          run_install: true

      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          # 选择要使用的 node 版本
          node-version: 18
          # 缓存 pnpm 依赖
          cache: pnpm

      # 运行构建脚本
      - name: Build Next.js site
        run: npm run build

      # 查看 workflow 的文档来获取更多信息
      # @see https://github.com/crazy-max/ghaction-github-pages
      - name: Deploy to GitHub Pages
        uses: crazy-max/ghaction-github-pages@v2
        with:
          # 部署到 gh-pages 分支
          target_branch: fanma
          # 部署目录为 VuePress 的默认输出目录
          build_dir: out
        env:
          # @see https://docs.github.com/cn/actions/reference/authentication-in-a-workflow#about-the-github_token-secret
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

上面就是我的工作流文件 fanma.yml 相关配置信息，现在已经是正常运行的，没有问题的。

下面这三个配置，需要根据你自己的实际情况进行配置：

run: npm run build
target_branch: fanma
build_dir: out

自动部署完成

到这里我们 Next.js 项目的自动部署就完成了，只要我们在本地新建文件或修改文件，进行 Push 就可以触发自动部署。

现在我们就不需要在本地进行打包生成静态页了，只要把 md 文件写好，打包生成静态页就 Push 就交给 GitHub Actions 帮我们自动部署就可以了。

错误解决方案

在配置自动部署中会遇到一些问题，下面的一些错误解决应该可以帮助得到你。

设置 GitHub Pages 工作流权限： Error The process '/usr/bin/git' failed with exit code 128

使用 Next.js 自动将应用部署到 GitHub Pages2023年03月16日 - 约 1578 字