从 Github 到 Vercel

本文详细介绍了同时在 Github Pages 和 Vercel 上部署静态页面的流程方法。

本文将不会涉及且基于读者已熟知并建立以下环境：

开发环境（Node.js/Git/VSCode...）

Github 账号

科学上网

在 Github 上开发和部署静态页面

创建项目并连接到远程仓库

比如，我们希望“从零开始”创建自己的博客系统，那么不妨从简单的前端项目开始：

$ pnpm create vite <project name> --template vue
# <project name> 为自定义的项目名称，下同

这里，我们创建了一个 Vite 项目，前端技术栈选用 Vue 。

进入到刚才创建的 <project name> 目录下，并初始化本地仓库：

$ cd <project name>
$ git init

# 主分支更名（可选）
$ git branch -M main
# 暂存所做的修改
$ git add .
# 提交代码
$ git commit -m 'chore: project initialized'

一个本地的前端项目就创建好了，我们可以通过 git 在本地管理代码。

接下来，我们登录 Github 在我们的账号下创建一个 Repo :

暂且将该 Repo 保持与本地一致的命名。

当创建完成时，我们可以获得该远程仓库的地址：git@github.com:<user or team name>/<project name>.git 。其中，<user or team name> 为创建该 Repo 的用户名或团队名称， <project name> 为该项目名称。

然后，我们就可以将本地仓库与远程仓库连接起来，在本地项目路径下执行:

$ git remote add origin git@github.com:<user or team name>/<project name>.git
$ git push -u origin <main branch name>
# <main branch name> 是本地仓库中主分支名称，一般更改后为 main ，更改之前默认为 master

至此，我们就将本地和远程的仓库进行了连接，可以方便地通过 git pull 和 git push 拉取和推送代码了。

使用 Github Actions 和 Github Pages 构建和部署静态页面

在项目的远程仓库中，创建一个新的分支 gh-pages （也可以是其他名字）：

这个分支的作用是承载编译后的静态页面文件，因此，该分支不需要同步到本地仓库。

接着，来到远程仓库的 Settings 页面，点击 Pages 选项卡：

如上图所示，配置无误后可进行后续操作。

到 Github 中的个人 Settings 页面，进入 Personal access tokens ：

生成一个合适的 access token ，并将它设置到项目仓库的 secrets 中，以方便我们在 actions 中调用，并保证敏感信息不暴露给其他用户：

远程仓库的配置基本完成，让我们回到本地项目。

在项目文件夹中创建文件 .github/workfolws/pages.yml ，文件内容如下：

name: pages

# 在 main 分支被推送代码时触发 actions
on:
  push:
    branches: [main]

jobs:
  deploy:
    runs-on: ubuntu-latest

    steps:
      # 检出仓库代码
      - name: Checkout
        uses: actions/checkout@v3

      # 安装 node.js 环境
      - name: Install Node.js
        uses: actions/setup-node@v3
        with:
          node-version: latest
      # 安装 pnpm
      - name: Setup pnpm
        uses: pnpm/action-setup@v2
        with:
          version: latest
          run_install: false
      
      # 检查和设置 pnpm 缓存
      - name: Get pnpm store directory
        id: pnpm-cache
        shell: bash
        run: |
          echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT

      - name: Setup pnpm cache
        uses: actions/cache@v3
        with:
          path: ${{ steps.pnpm-cache.outputs.STORE_PATH }}
          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
          restore-keys: |
            ${{ runner.os }}-pnpm-store-
      
      # 安装项目依赖
      - name: Install dependencies
        run: pnpm install

      # 构建项目
      - name: Build
        run: pnpm build

      # 将构建后的文件部署到 gh-pages 分支
      - name: Deploy
        uses: crazy-max/ghaction-github-pages@v3
        with:
          target_branch: gh-pages
          build_dir: dist
        env:
          GITHUB_TOKEN: ${{ secrets.ACCESS_TOKEN }}