Github Actions一键部署，手把手教你玩转Pages！

2023-11-13 06:51:46

利用 Github Actions 简化网站部署

在当今瞬息万变的数字世界中，网站的快速且高效部署至关重要。Github Actions 提供了一个强有力的平台，使开发人员能够自动化和简化工作流程，包括网站部署。这篇文章将深入探究如何使用 Github Actions 部署网页，涵盖从静态网站到动态网站、缓存优化和多分支部署等广泛主题。

静态网站部署

部署静态网站是使用 Github Actions 最直接的方式。只需创建名为 "deploy-pages" 的工作流文件，其中包含以下内容：

name: Deploy Pages
on:
  push:
    branches:
      - main
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: '16'
      - run: npm ci
      - run: npm run build
      - uses: JamesIves/github-pages-deploy-action@4.1.6
        with:
          ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }}
          BRANCH: gh-pages
          FOLDER: out

动态网站部署

对于动态网站，部署流程略有不同。工作流文件应包含以下步骤：

name: Deploy Pages
on:
  push:
    branches:
      - main
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: '16'
      - run: npm ci
      - run: npm run build
      - uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./out

缓存优化

缓存优化可以显著提升网站的加载速度。为此，您需要在工作流文件中添加以下步骤：

- uses: actions/cache@v3
  with:
    path: node_modules
    key: ${{ runner.os }}-node_modules-${{ hashFiles('**/package-lock.json') }}

多分支部署

若要针对不同的分支部署不同的版本，请使用以下工作流文件：

name: Deploy Pages
on:
  push:
    branches:
      - main
      - development
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: '16'
      - run: npm ci
      - run: npm run build
      - uses: JamesIves/github-pages-deploy-action@4.1.6
        with:
          ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }}
          BRANCH: ${{ github.ref }}
          FOLDER: out