最新GitHub Pages自动化部署教程和报错处理 |
您所在的位置：网站首页 › 黎巴嫩的地理位置地图 › 最新GitHub Pages自动化部署教程和报错处理 |
最新GitHub Pages自动化部署教程和报错处理
|
前言：提交代码到github, 自动部署到github pages, 白嫖github的服务器 目录 1. github pages 设置思路：我们的代码在主分支是main, 然后可以新建一个分支,例如vue2_h5, 用来存放npm run build 打包后的代码  先到settings下, 点击左侧pages, 设置pages关联的分支, 如vue2_h5, 打包成功后, 点击GitHub Pages生成的链接kangleyunju.github.io/vue2_h5/ 就能看到页面了
2. 配置自动化部署文件
方法一, 去github仓库/actions下新建一个自动部署文件
点进去, 修改里面的内容
代码如下, 直接复制, 注意要修改成自己的分支名称和路径, 需要设置监听的分组, 这里是主分支main, 以及存放打包文件的分支vue2_h5 name: Build and Deploy on: # 监听 main 分支上的 push 事件 push: branches: - main jobs: build-and-deploy: runs-on: ubuntu-latest # 构建环境使用 ubuntu steps: - name: Checkout uses: actions/[email protected] with: persist-credentials: false - name: Install and Build # 下载依赖 打包项目 run: | npm install npm run build - name: Deploy # 将打包内容发布到 github page uses: JamesIves/[email protected] with: # 自定义环境变量 BRANCH: vue2_h5//这个是存放打包后的分支 FOLDER: dist//默认vue项目打包输出目录是dist, 自行修改 REPOSITORY_NAME: kangleyunju/vue2_h5 # 这是我的 github page 仓库 TARGET_FOLDER: / # 打包的文件将放到静态服务器 / 目录下 ACCESS_TOKEN: ${{ secrets.VUE2_H5 }} # secrets.VUE2_PC 是我的 secret 名称，需要替换成你的,这一行不要也可以然后提交保存, 只要你推送main分支, 就会自动打包main分支到打包后的分支vu2_h5 方法二, 手动新建.github目录
ci.yml代码如下, 和方法一一样 name: Build and Deploy on: # 监听 main 分支上的 push 事件 push: branches: - main jobs: build-and-deploy: runs-on: ubuntu-latest # 构建环境使用 ubuntu steps: - name: Checkout uses: actions/[email protected] with: persist-credentials: false - name: Install and Build # 下载依赖 打包项目 run: | npm install npm run build - name: Deploy # 将打包内容发布到 github page uses: JamesIves/[email protected] with: # 自定义环境变量 BRANCH: vue2_h5//这个是存放打包后的分支 FOLDER: dist//默认vue项目打包输出目录是dist, 自行修改 REPOSITORY_NAME: kangleyunju/vue2_h5 # 这是我的 github page 仓库 TARGET_FOLDER: / # 打包的文件将放到静态服务器 / 目录下 ACCESS_TOKEN: ${{ secrets.VUE2_H5 }} # secrets.VUE2_PC 是我的 secret 名称，需要替换成你的,这一行不要也可以推荐使用uses: JamesIves/[email protected]这个版本 v3版本我一直打包失败 然后提交代码到github即可 3.常见错误处理进入actions可以看到打包进程, 和错误原因
以下错误经常发生 Error: The deploy step encountered an error: The process '/usr/bin/git' failed with exit code 128
需要到settings下设置actions的读写权限, 如下图
4. 我的github示例项目, 不清楚的可以看看我的仓库
github仓库地址 github.com/kangleyunju… 项目演示地址 kangleyunju.github.io/vue2_h5/
|
【本文地址】
今日新闻 |
推荐新闻 |