网站自动部署交给 Github Actions！手把手教你 10 分钟完成

前端

2023-01-28 02:03:13

用 GitHub Actions 轻松部署个人网站

导言

在数字时代的今天，拥有自己的网站是必不可少的。然而，对于没有技术背景的人来说，网站的部署和维护可能是一项艰巨的任务。传统的方法需要手动上传代码、配置环境变量和进行繁琐的测试，耗时且容易出错。

GitHub Actions：网站部署的救星

GitHub Actions 是一款强大的自动化工具，可以帮助你简化网站部署过程。它允许你自动执行以下任务：

将代码从 GitHub 仓库部署到服务器
安装和配置所需的软件环境
运行单元测试和集成测试
部署到生产环境
发送部署成功的通知

配置 GitHub Actions

创建工作流

首先，你需要在 GitHub 仓库中创建新的 Actions 工作流：

登录 GitHub 并打开你的仓库。
点击仓库页面右上角的 “Actions” 按钮。
选择 “New workflow” 创建新的工作流文件。

配置工作流

工作流文件中需要填写一些基本信息，包括名称、触发条件和模板：

触发条件： 选择触发工作流的事件，例如代码提交或合并请求。
模板： 从 GitHub 提供的众多模板中选择与你的项目相关的模板，然后根据需要编辑代码。

步骤详解

步骤 1：创建 GitHub Actions 工作流

name: Deploy Personal Website

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 install
      - run: npm run build
      - uses: actions/deploy-pages@v1
        with:
          source: ./build
          destination: ./deploy
          github_token: ${{ secrets.GITHUB_TOKEN }}