创建Github Repo
首先创建一个Github仓库,比如:https://github.com/luosicoding/ghpages-demo.git
然后克隆到本地:
git clone https://github.com/luosicoding/ghpages-demo.git
创建React APP
cd ghpages-demo
npx create-react-app .
添加依赖库
npm install gh-pages --save-dev
进行Github Pages相关配置
在package.json中添加如下信息:
"homepage": "https://luosicoding.github.io/ghpages-demo",
注意这部不能省略,否则可能出现空白页面的错误。
Github Actions配置
添加文件.github/workflows/ghpages-workflow.yml
name: Github Pages Deployment
on:
push:
branches:
- "main"
jobs:
deploy:
name: deploy GH pages
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v3
- name: Setup node
uses: actions/setup-node@v3
with:
node-version: 16.x
- name: Install and build
run: npm install && npm run build
- name: Deploy
uses: JamesIves/github-pages-deploy-[email protected]
with:
branch: gh-pages
folder: build
注意事项
需要想gh-pages分支提交一个更改后才能使其发布。可以在对应的设置中查看其发布状态:https://github.com/luosicoding/ghpages-demo/settings/pages