前言
最近在做基于react项目做一个低代码构建平台,使用Create React App
脚手架创建的项目提交GitHub时,想通过GitHub Pages部署站点。然而一知半解的我,趟了两天的坑啊,可是爬上岸了。现在总结下方法,以便日后查阅。
起步
首先,用 Create React App 工具创建一个 React 应用,同时将代码添加到 GitHub 仓库。使用以下命令来生成这个示例 React 应用。
yarn create-react-app <project directory> --template typescript
我已经成功把github的react版本低代码构建平台项目,部署好了,这样部署后的地址,大家可以查阅比较。也欢迎大家支持下我的react版本低代码构建平台项目。
项目配置
设置首页值
打开这个应用的源代码,在 package.json
文件中,添加这个键值对,适当替换下面 URL 中的部分。
"homepage": "https://<username>.github.io/<project>/",
设置路由
为了防止项目构建后,路由不匹配了,导致空白页面。这是需要设置下访问路径。
<BrowserRouter basename={process.env.PUBLIC_URL}>
process.env.PUBLIC_URL
的值将是 /<project>
。basename 属性允许我们指定路由的实际基础 URL,在本例中,它将是子目录。
设置GitHub Actions
现在需要通过 GitHub Actions 来部署我们的项目。在每次代码提交时构建我们的应用程序,GitHub Actions会根据你项目里的配置执行部署项目。
现在,在你的应用程序的 .github/workflows
目录下创建一个名为 ci.yml
的文件(文件名叫啥无所谓)。将以下内容粘贴到这个 YAML 文件中。这是我的 GitHub 仓库在这个阶段的样子。
name: Build and Deploy
# 当有新push或者pr时运行
on:
push:
branches: [master]
pull_request:
branches: [master]
jobs:
# 一项叫做build-and-deploy的任务
build-and-deploy:
# 在最新版的Ubuntu系统下运行
runs-on: ubuntu-latest
steps:
- name: Checkout 🛎️
uses: actions/checkout@v2 # 来自官方脚本:https://github.com/marketplace/actions/checkout
- name: Install and Build
run: |
npm install
CI=false npm run build
- name: Deploy 🚀
uses: JamesIves/github-pages-deploy-action@releases/v3 # 脚本来自: https://github.com/JamesIves/github-pages-deploy-action
with:
ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }}
BRANCH: gh-pages
FOLDER: build
CLEAN: true
注意: 这个CI=false
,它的作用如果您的构建在有警告后,在此更改后的打包部署将中断,您可以通过在构建中取消设置 CI 变量来禁用此行为。就是没设置这个配置,坑了我好久。这里是对该配置的详细说明。
总结一下,这个 YML 文件定义了 GitHub Actions 中的工作流程。这个工作流会在每次推送变更到主分支或创建拉请求合并变更到主分支时被触发,它将构建 React 应用,并将 build
目录的内容部署到 gh-pages
分支。
关于 $
的快速注释——GitHub 自动创建一个 GITHUB_TOKEN
密钥以在您的工作流程中使用。因此,它具有对存储库的写访问权,因此,您可以更新 gh-pages
分支。
接下来,再新建一个gh-pages分支,用于发布部署。
部署GitHub Pages
Actions secrets
在你的github中,找到Settings
:
点击打开后,找到Developer settings
,点击进入如下,新建一个access token
:
创建成功后,拷贝access token
:
进入你的项目仓库中的Settings
中:
创建Actions secrets
:
成功后页面显示:
记住的你的Actions secrets
名称,我的设置的是ACCESS_TOKEN
。这里上面的.github/workflows/ci.yml
里的 ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }}
配置对应上。
GitHub Pages
接下来,配置GitHub Pages。打开项目仓库中的Settings
,找到Pages
选项,点击进入配置:
这样,我们的配置就完成了,然后提交新代码到你的主分支,就会自动构建部署了。部署日志详情见actions
。
现在剩下的就是让我们测试演示网站,并确认它可以正常工作。
谢谢观看,撒花✿✿ヽ(°▽°)ノ✿。