1. 使用 vue/react 创建一个项目
2. 创建一个远程的仓库
3. 把代码 push 上去
4. 点击菜单中的“Actions”, 然后点击 “set up a workflow yourself”
5. 将以下内容输入文本框 (我是vue写的, 需要把打包后的文件夹由build改成dist)
deploy-to-github-pages 地址: github.com/marketplace…
name: Build and Deploy
on: [push]
jobs:
build-and-deploy:
runs-on: ubuntu-latest
steps:
- name: Checkout 🛎️
uses: actions/checkout@v2.3.1
- name: Install and Build 🔧 # This example project is built using npm and outputs the result to the 'build' folder. Replace with the commands required to build your project, or remove this step entirely if your site is pre-built.
run: |
npm install
npm run build
- name: Deploy 🚀
uses: JamesIves/github-pages-deploy-action@4.1.5
with:
branch: gh-pages # The branch the action should deploy to.
folder: dist # The folder the action should deploy.
6. 提交
7. 等待action跑完后, 按照下图中的顺序依次点击
8. 这时候等待一会儿按照下图打开链接就可以看到自己的主页了
9. 如果页面空白但显示的不是404, 这时候需要更改vue.config.js
的publicPath
, 推送生效
10. 如果使用history路由, 可能刷新会404, 这边推荐使用hash路由模式
附上本人该demo的github地址: 方便同学查看源码 https://github.com/xiaolizi9/my-blog