基于GitHub搭建网站

首先，准备一个前端的项目 vue3-quick-start

这里主要用到了 GitHub的 GitHub Actions 和 GitHub Pages

体验地址

一、GitHub Actions

GitHub Actions 是一种持续集成和持续交付 (CI/CD) 平台，可用于自动执行生成、测试和部署管道。 您可以创建工作流程来构建和测试存储库的每个拉取请求，或将合并的拉取请求部署到生产环境。

quickstart

关于CI

Continuous Integration（持续集成）

关于CD

Continuous Deploy（持续构建）

工作流程 WorkFlows

工作流程是您添加到仓库的自动化过程。
工作流程由一项或多项作业组成，可以计划或由事件触发。
工作流程可用于在 GitHub 上构建、测试、打包、发布或部署项目。

GitHub Actions 使用 YAML 语法来定义事件、作业和步骤。
这些 YAML 文件存储在代码仓库中名为 .github/workflows 的目录中。

Web 项目的工作流程模板

name: Deploy
# 触发构建动作
#    push:
#        # 触发构建分支[默认分支]
#        branches: [ $default-branch ]
#    pull_request:
on:
    push:
        # 以下 分支有 push 时触发
        branches:
            - master
            - main
            - feature/major-dev

env: # 设置环境变量
    TZ: Asia/Shanghai # 时区

# 作业是在同一运行服务器上执行的一组步骤
jobs:
    # 作业名称
    deploy:
        # 运行器（这里是Ubuntu系统）
        runs-on: ubuntu-latest
        # 步骤是可以在作业中运行命令的单个任务
        # 步骤可以是操作或 shell 命令
        steps:
            # 检出推送的代码
            - name: Checkout - 检出代码
              uses: actions/checkout@v3

            # 使用pnpm
            - name: Setup pnpm
              uses: pnpm/action-setup@v2

            # Node版本
            - name: Setup Node.js v16
              uses: actions/setup-node@v3
              with:
                  node-version: 16
                  cache: 'pnpm'

            # 安装依赖
            - name: Install NodeModules/vue3-quick-start - 安装依赖
              run: pnpm install

            # 打包
            - name: Build - 打包
              run: pnpm run build # 打包

            # 打包结果
            - name: Dir - 打包结果
              run: cd dist && ls -ll # 打包结果

            - name: Deploy - 部署
              uses: peaceiris/actions-gh-pages@v3 # 使用部署到 GitHub pages 的 action
              with:
                  github_token: ${{ secrets.CL_TOKEN }} # github_token，仓库secrets配置
                  publish_dir: dist  # 部署打包后的 dist 目录

二、GitHub Pages

GitHub Pages 是通过 GitHub 托管和发布的公共网页。 启动和运行的最快方法是使用 Jekyll 主题选择器加载预置主题。 然后，您可以修改 GitHub Pages 的内容和样式。

quickstart

三、GitHub Actions + GitHub Pages自动化部署

1、添加 workflows

在项目中新建 .github/workflows/deploy.yml 文件，并拷入以下代码：

deploy.yml

name: Deploy
# 触发构建动作
#    push:
#        # 触发构建分支[默认分支]
#        branches: [ $default-branch ]
#    pull_request:
on:
    push:
        # 以下 分支有 push 时触发
        branches:
            - master
            - main
            - feature/major-dev

env: # 设置环境变量
    TZ: Asia/Shanghai # 时区

# 作业是在同一运行服务器上执行的一组步骤
jobs:
    # 作业名称
    deploy:
        # 运行器（这里是Ubuntu系统）
        runs-on: ubuntu-latest
        # 步骤是可以在作业中运行命令的单个任务
        # 步骤可以是操作或 shell 命令
        steps:
            # 检出推送的代码
            - name: Checkout - 检出代码
              uses: actions/checkout@v3

            # 使用pnpm
            - name: Setup pnpm
              uses: pnpm/action-setup@v2

            # Node版本
            - name: Setup Node.js v16
              uses: actions/setup-node@v3
              with:
                  node-version: 16
                  cache: 'pnpm'

            # 安装依赖
            - name: Install NodeModules/vue3-quick-start - 安装依赖
              run: pnpm install

            # 打包
            - name: Build - 打包
              run: pnpm run build # 打包

            # 打包结果
            - name: Dir - 打包结果
              run: cd dist && ls -ll # 打包结果

            - name: Deploy - 部署
              uses: peaceiris/actions-gh-pages@v3 # 使用部署到 GitHub pages 的 action
              with:
                  github_token: ${{ secrets.CL_TOKEN }} # github_token，仓库secrets配置
                  publish_dir: dist  # 部署打包后的 dist 目录

2、配置 github_token

点击 https://github.com/settings/tokens/new 新建 Personal access tokens (classic)

注意

• Note：为 CL_TOKEN

• Expiration：选择 No expiration

• Select scopes：将不涉及用户且非删除的权限勾选即可

• 生成后保存，只能看到一次，再次进入需要重新生成

3、配置 secrets

进入项目Settings，找到在Security下找到secrets and variables选项

点击 New repository secret，将刚刚生成的github_token粘贴进去

注意

• Name：为 CL_TOKEN，因为在 deploy.yml 中使用了 secrets.CL_TOKEN ，所以这里的 Note 必须为 CL_TOKEN

---

好了，此时可以去push你的代码了，push完之后，进入 Actions，可以看到自动构建的任务

可以修改 yaml 中 branches 的值，来控制触发构建的分支

4、配置 GitHub Pages

进入项目Settings，找到Pages选项

• source选择：deploy from branch

• branch：选择 gh-pages，这里的 gh-pages 统一由 ci 生成，用于存放打包后的代码

添加之后，过几分钟刷新下，出现 Your site is live at https://wforguo.github.io/vue3-quick-start/ 即配置成功

当然，你也可以去尝试着添加自定义域名...

---

end