github自动部署(保姆级教程)_github自动化部署

步骤一:

新建一个github仓库(注意!!! 新建的仓库只需要填写:

就行，其他的不用勾选)

步骤二:

先打开vscode终端cd进入到自己的项目

git remote -v //查看一下自己的项目有没有连接过远端仓库
 
//如果有
 
git remote remove origin //移除现有的 "origin" 远程仓库配置再进行下一步
 
//没有的话直接操作下面的

进入到刚刚创建的仓库，找到

复制到vscode ，打开终端(或者cmd)，cd进入你的Vue项目，粘贴上去，与远端仓库建立连接，然后使用

git push -u origin master /*推送代码到远程仓库*/

步骤三:

回到刚才创建的新仓库刷新一下，就可看见你上传的项目了，

然后打开:

进入后:

将以下代码复制放入里面:

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

随后点击右上角:

打开弹窗，什么都不用改，直接点击提交修改:

点击右上角个人中心:

打开设置，往下滑，左侧最下面找到

打开，左侧找到:

点击进入：右上角点击

打开后

勾选这个选项，选择刚刚创建的仓库

打开后里面的选项，全部勾选成最后一个(注意只勾选上面 Repository permissions里面的选项，其他不用动)，勾选完成后，拉到最下面，点击生成令牌(Generate token)

随后

然后返回你刚刚创建的仓库打开

下拉找到左侧

打开

进入

点击添加密钥(Add secret)

注意生成完令牌后:

打开vscode，找到你要上传的项目里面的vue.config.js

配置:

publicPath: '/*/创建的(上传的)仓库名称/*/'

然后在vscode终端上写入推送命令

git add .//添加文件
 
git commit -m '提交' //提交文件
 
git pull //拉取代码
 
git push //推送到仓库

推送完成后，再回到github仓库

等待github处理完毕(共两次)

处理完毕后打开

点击 Visit site即可查看到自己的项目了