Github页面

GitHub Pages可以显示静态网页。因此，您需要代码的生产版本，您可以构建并上传到存储库的dist文件夹。

解决方案：自动构建生产和部署

需要为这个仓库配置你的Github Action。

第一步

为/.github/workflows生成一个新文件作为deploy.yml。

• 使用actions/checkout可以运行操作
• 使用actions/setup-node可以使用node.js和npm
• 使用peaceiris/actions-gh-pages可以更新Github页面

添加配置：

name: Deploy to GitHub Pages

on:
  push:
    branches:
      - main

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout repository
        uses: actions/checkout@v3

      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: 18

      - name: Install dependencies
        run: npm ci

      - name: Build
        run: npm run build

      - name: Deploy to GitHub Pages
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./dist

第二步

提交并推送新的deploy.yml。

第三步

在浏览器中访问您的GitHub存储库，然后单击“操作”选项卡。在这里，您应该看到标记为“Deploy to GitHub Pages”的工作流，该工作流在推送后启动。等待工作流成功完成。
它生成您的生产版本并将其部署到Github页面。

第四步

打开Github Pages静态应用程序：
https://<github-username>.github.io/<repository-name>/

摘要

现在，如果您对源代码（dev）进行更改并推送它们，GitHub Actions将编译您的生产代码并在短时间内更新您的GitHub Pages站点。