Git Hub仓库自动部署流程

最新推荐文章于 2025-12-05 14:41:23 发布

原创最新推荐文章于 2025-12-05 14:41:23 发布 · 255 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#github

本文详细描述了如何在Vue项目中新建、提交并发布仓库，以及配置GitHubActions部署到GitHubPages的过程，包括设置Node.js、安装依赖、构建和部署，以及生成和管理GitHubtokens。

注：（此创建流程须在网络代理状态下操作）

1.新建vue项目文件

在需要创建项目的文件夹内创建一个vue2或vue3的项目文件，并将项目文件git初始化，创建完成之后从VScode打开项目

（创建vue项目流程请自行在本人主页搜索）

2.提交并发布仓库

在VScode中暂存并提交所有文件，并发布：尽量在输入框中填写上提交动作，会加速提交

点击发布之后选择仓库状态，这里选择public（公开）状态

完成之后在Git Hub打开

3.仓库部署流程

在打开仓库之后，打开Actions标签

这里点击新建工作流

在工作流中添加以下代码

name: Vue Deploy

on:
  push:
    branches:
      - master

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

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

      - name: Set up Node.js
        uses: actions/setup-node@v2
        with:
          node-version: '14'

      - name: Install dependencies
        run: npm install

      - name: Build
        run: npm run build

      - name: Deploy to GitHub Pages
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.PAT }}  # 此处修改为你的Secret名称
          publish_dir: ./dist

添加完成之后，点击Commit Changes按钮进行提交