Memento

Appearance

Github Actions 自动化部署静态页面 ​

前言 ​

下文中提到的项目含义如下：

  1. zhangsan / webapp / dev - 张三的Git账户 / 源代码项目名称 / 分支
  2. lisi / blog.github.io / main - 李四的Git账户 / 静态页面项目名称（即webapp的build产物） / 分支

Github Actions自动化部署配置 ​

  1. 首先使用 blog.github.io 创建人账户创建 Access Token，并记录最后生成的值。
  2. 在你 webapp 仓库下 创建一个secrets，填入刚创建的 Access Token。（注意：创建的 secrets 名称需要记住，在下面的 yml 文件中使用）
  3. 在项目根目录下的 .github/workflows 目录（没有的话，请手动创建一个）下创建一个 .yml 或者 .yaml 文件，如: vitepress-deploy.yml
yaml
# vitepress-deploy.yml

# name 可以自定义
name: Deploy GitHub Pages

# 触发条件：在 push 到 dev 分支后触发
on:
  push:
    branches:
      - dev

# 任务
jobs:
  build-and-deploy:
    # 服务器环境：最新版 Ubuntu
    runs-on: ubuntu-latest
    steps:
      # 拉取代码
      - name: Checkout
        uses: actions/checkout@v2 # github官方提供的分支切换github action
        with:
          persist-credentials: false

      # 生成静态文件
      - name: Build
        run: yarn && yarn build

      # 部署到 GitHub Pages
      - name: Deploy
        uses: JamesIves/github-pages-deploy-action@releases/v3 # 此GitHub Action将自动将您的项目部署到GitHub Pages
        with:
          REPOSITORY_NAME: lisi/blog.github.io 
          BRANCH: main
          FOLDER: docs/.vitepress/dist # vitepress 生成的静态文件存放的地方
          ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }} # 生成的 secret, ACCESS_TOKEN就是在配置secrets时填写的名字

至此，Github Action的静态页面部署就结束啦！在推送 webapp / dev 后，我们就可以在 Action 中看到脚本已经愉地跑起来了。

本地部署 ​

本地部署是一种非自动化的，基于 Shell 脚本的部署方式。

相对于 GitHub Action 来说，它配置简单，只需要配置一个 Shell 文件，同时缺点也是每次部署前需要手动执行这个 Shell 脚本。

sh
#!/usr/bin/env sh

# 确保脚本抛出遇到的错误
set -e

# 生成静态文件
yarn run build

# 进入生成的文件夹
cd docs/.vitepress/dist

# 如果是发布到自定义域名
# echo 'www.example.com' > CNAME

git init
git add -A
git commit -m 'deploy'

# 如果发布到 https://<USERNAME>.github.io
git push -f git@github.com:lisi/blog.github.io.git main

# 如果发布到 https://<USERNAME>.github.io/<REPO>
# git push -f git@github.com:<USERNAME>/<REPO>.git master:gh-pages

cd -

当改完代码后，在git bash中执行 ./deploy.sh即可。

托管静态网页 ​

上面的两种示例代码都是通过推送到 username.github.io 来托管。还有一种方式是：

  • 在任意一个 repository 中创建一个名为 gh-pages 的分支，并在该分支中存储静态页面文件。在这种情况下，您可以通过 username.github.io/repository-name 来访问该静态网页。

因此，有些人的 GitHub 账户中不存在 github.io，但他们仍然可以通过 GitHub Pages 访问静态页面，这可能是因为他们使用了这方法，即使用了某个 repository 的 gh-pages 分支来存储静态页面文件。在这种情况下，该 repository 的名称将被添加到 username.github.io 后面，以创建静态页面的 URL。

参考 ​