github page 自动化部署

• 本文使用vue项目做演示
• 默认读者会git、vue开发等相关知识

1、准备工作

• 创建一个vue应用
• 创建一个本地仓库
• 创建一个github仓库
• 推送到github远程仓库

2、打开github仓库中的设置

1. Settings → Pages → Build and deployment → Source， 选择GitHub Actions

   

2. 点击Configure

   

3. 编辑配置

   这里要注意下，默认是创建在master 分支下，建议换个分支或者新建一个，配置参考我后面提供的配置]，更多配置可查看github官方配置。配置完成后点击Commit changes，等待提交完成

配置

# .github/workflows/auto-deploy.yml

name: auto deploy 🚀

on:
# 监听push操作
push:
 branches:
   - master # 推送分支才会触发以下任务
pull_request:

# 这个选项可以使你手动在 Action tab 页面触发工作流
# workflow_dispatch:

permissions:
# 允许对仓库的内容进行写操作。包括创建、修改和删除文件、目录以及提交更改等
# 这里只配置了push，所以只有推送main分支才会触发以下任务 
contents: write
# 允许管理 GitHub Pages 服务并对其进行写操作
pages: write

jobs:
# 任务ID
build-and-deploy:
 # 运行环境
 # runs-on: macos-latest
 # runs-on: windows-latest
 runs-on: ubuntu-latest
 concurrency:
   group: ${{ github.workflow }}-${{ github.ref }}
 
 # 步骤
 steps:
   # 官方action，将代码拉取到虚拟机
   - name: Checkout
     uses: actions/checkout@v3

   # 建一个名为setup-node的步骤（安装指定版本的Node.js）
   - name: setup-node 
     # 使用setup-node@v3这个action
     uses: actions/setup-node@v3
     # 指定某个action 可能需要输入的参数
     with:
       node-version: '16.19.0'

   # 安装 pnpm
   - name: Install pnpm
     run: npm install pnpm -g

   # 安装依赖  
   - name: Install dependencies
     run: pnpm i
   # 打包
   - name: Build application 🔧
     run: pnpm run build

   # 部署 https://github.com/JamesIves/github-pages-deploy-action
   - name: Deploy 🚀
     uses: JamesIves/github-pages-deploy-action@v4
     with:
       branch: gh-develop  # default: gh-pages
       folder: dist
       clean: true # Automatically remove deleted files from the deploy branch
       # commit-message: ${{ github.event.head_commit.message }} # default: `Deploying to gh-pages from @ 3238feb 🚀`
       # commit-message: "deploy: ${{ github.sha }} (${{ github.event.head_commit.message }}) 🚀 "

4. 提交

   一切顺利的话，打开Action，你会看到正在部署中的任务，如果没有先检查配置是否正确，还没有就在本地的主分支上随意提交一些新改动，看是否触发了自动部署任务。都完成了再次打开Settings → Pages就可以看到你的访问链接了

补充：

可以使用域名来进行代理，如我使用的是阿里云的域名，

1. 打开阿里云域名控制台找到需要配置的域名点击解析

2. 配置解析地址

   先ping一下github的地址，xxxx是你的仓库名称

   ping xxxx.github.io
   

   再配置域名解析

   

3. 打开github访问你的仓库，Settings → Pages → Custom domain 将你刚刚配置的域名地址填写到这里。这里github会自动给你创建一个CNAME 的文件，如果没有就在仓库根目录里添加一个文件，命名为CNAME，文件名大写且没有后缀;文件里填写要绑定的域名且不要包含Http:/l和www，如 github.test.com

4. 等待几分钟就可以使用域名访问了