最低成本部署静态网站

所谓静态网站，是指它所有内容都是静态的，即预先编写好并存储在服务器上，访问者获取到的是事先准备好的静态文件。

所以完全不需要购买服务器，除了域名之外，几乎不会有其他花销。

Github 建仓库

以我的个人 github 账号 zxdoc 为例，仓库名称就是 zxdoc.github.io。

当然，无论是个人账号还是组织账号，都可以创建这种仓库。

这个名字非常重要一定要起和域名一样的名字仓库一定要开源

Github pages配置

创建成功以后就可以只要我们把构建完毕的vite-press代码传入到这个分支下就可以使用这个域名自动预览了

这种方式比较麻烦的就是这个仓库只能上传构建后的代码不能上传源码每次在本地构建完代码还得把构建完之后的代码再传上去比较麻烦

如何能实现全部自动化呢?

理解 GitHub Actions

你提交到仓库后，GitHub 会监控到，然后分配一台虚拟机先将你的项目 checkout 过去，然后按照你指定的 step 顺序执行定义好的 action，这些 action 就包括 npm run build 生成静态文件，push 到你指定的仓库或者push到你指定的分支等动作

为了实现上面的小目标，我们要让 GitHub 替我们做的事情如下：

编译项目，生成静态文件。也就是对仓库执行 npm run build 生成vite-press的静态资源。
把打包静态资源推送到另一个分支上，这一步完成后 GitHub Pages 就部署完成了(还记得我们上一张图片吗?我们可以设置gitpage到底用哪个分支的代码)。

构建工作流

首先在仓库的根目录下，创建 .github/workflows/main.yml 文件，这就是 GitHub Actions 功能的配置文件，用于告诉 GitHub 要做哪些事情，写入以下内容

name: GitHub Actions Build and Deploy

on:
  # 手动运行工作流程（workflow_dispatch 事件触发器配置后可以在actions下手动运行工作流）
  workflow_dispatch:
  push:
    branches:
      - main

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest #指定服务器的运行环境：最新版本ubuntu
    steps:
      # 使用actions/checkout@v4 库拉取代码到 ubuntu 上
      - name: Checkout
        uses: actions/checkout@v4
        with:
          # 根据网上资料查询此处可以设置为 false。https://github.com/actions/checkout
          persist-credentials: false

      # 安装 pnpm
      - name: Install pnpm
        uses: pnpm/action-setup@v2
        with:
          version: 8

      # 设置node的版本
      - name: Use Node.js
        # 使用 actions/setup-node@v3 库安装 nodejs，with 提供了一个参数 node-version 表示要安装的 nodejs 版本
        uses: actions/setup-node@v3
        with:
          node-version: "18.x"
          cache: "pnpm"

      # 打包成静态文件
      - name: Build
        run: pnpm install && pnpm build

      # 部署到GitHub Pages - 也就是将打包内容发布到GitHub Pages
      - name: Deploy
        # 使用别人写好的 actions去部署（将打包文件部署到指定分支上）
        uses: JamesIves/github-pages-deploy-action@v4.3.3
        # 自定义环境变量
        with:
          # 指定仓库：你要发布的仓库路径名
          repository-name: zxdoc/zxdoc.github.io
          # 部署到 deploy-pages 分支，也就是部署后提交到那个分支
          branch: deploy-pages
          # 填写打包好的目录名称路径，本项目配置在根目录
          folder: dist