超详细！来部署一个react umi项目到github pages吧！

Github Pages介绍

GitHub Pages 是 GitHub 提供的一个免费的静态网站托管服务，它允许 GitHub 用户创建和托管自己的静态网站，这些网站可以通过特定的 GitHub 仓库进行管理和托管。

官网有超详细教程，让你从0-1搭建一个静态网站，这里不再赘述；

本教程前提如下：

github上有一个umi react项目
该项目是纯前端项目，不涉及后端接口调用，项目已完成，可打包

前置知识🧐

gh-pages npm包，可以推送文件到github对应项目的gh-pages分支上，(任意分支也行)；
在github上操作，可将gh-pages分支上的内容托管到静态网站（地址：Github用户名.github.io/创建的仓库名 ）上；

接下来，我们就开始吧💪

步骤

step1 安装gh-pages开发依赖

我用的pnpm管理依赖，所以使用pnpm安装,大家使用自己的管理工具语句

bash 复制代码

pnpm install gh-pages --save-dev

step2 修改package.json

增加homepage:https://Github用户名.github.io/创建的仓库名 比如我的仓库是simpleCV,我的用户名是coder66y ,所以我的地址是：https://coder66y.github.io/simpleCV

如下：

json 复制代码

"homepage": "https://coder66y.github.io/simpleCV", //项目对应的url

增加gh-pages对应的命令行语句

d dist ,如果项目内设置了打包产物文件夹为build，需修改为gh-pages -d build`

json 复制代码

"predeploy" : "npm run build", // 预部署，打包项目
"deploy" : "gh-pages -d dist"// 部署项目，将打包产物dist内的内容推送到github的gh-pages分支上

完整的package.json如下

json 复制代码

{
  "homepage": "https://coder66y.github.io/simpleCV", //项目对应的url
  "name": "simplecv", // 项目名称
  "author": "luyi <[email protected]>",
  "scripts": {
    "dev": "umi dev",
    "build": "umi build",
    "postinstall": "umi setup",
    "setup": "umi setup",
    "start": "npm run dev",
    "predeploy" : "npm run build",
    "deploy" : "gh-pages -d dist"
  },
  "resolutions": {
    "moment": "^2.30.1"
  },
  "dependencies": {
    "@ant-design/colors": "^7.1.0",
    "@ant-design/icons": "^5.4.0",
    "@ant-design/pro-components": "^2.7.15",
    "@dnd-kit/core": "^6.1.0",
    "@dnd-kit/modifiers": "^7.0.0",
    "@dnd-kit/sortable": "^8.0.0",
    "@dnd-kit/utilities": "^3.2.2",
    "ahooks": "^3.8.1",
    "antd": "^5.20.4",
    "dayjs": "^1.11.13",
    "dva": "^2.4.1",
    "html2canvas": "^1.4.1",
    "jspdf": "^2.5.2",
    "normalize.css": "^8.0.1",
    "react-cropper": "^2.3.3",
    "react-intl": "^6.7.1",
    "react-quill": "^2.0.0",
    "umi": "^4.3.15"
  },
  "devDependencies": {
    "@types/react": "^18.0.33",
    "@types/react-dom": "^18.0.11",
    "@umijs/plugins": "^4.3.18",
    "gh-pages": "^6.2.0",
    "typescript": "^5.0.3",
    "umi-plugin-react": "^1.15.9"
  },
  "packageManager": "[email protected]+sha1.3edbe440f4e570aa8f049adbd06b9483d55cc2d2"
}

step3 推送部署

将以上更改推送远程仓库（github）

本地终端执行如下命令

bash 复制代码

git add .
git commit -m "style: 设置部署命令"
git push

推送打包产物到gh-pages分支

本地终端执行如下命令

bash 复制代码

npm run deploy

看下如下打印，说明推送成功

step4 修改github配置

首先仓库需要公开

打开setting中的pages,将分支设置为gh-pages

3.现在可以刷新你的静态网页了

遇到的问题🥹

npm run deploy执行报错

由于umi打包构建的产物默认文件夹是dist，而我最初用的命令是gh-pages -d build,报错文件夹不存在，仔细阅读gh-pages的用法才知道错误原因；所以推送产物时一定要清楚产物的文件夹是谁；

部署到github pages上是页面空白

打开浏览器开发者工具，查看打印台，无报错，然后查看网络，发现js和css的请求都在 https://coder66y.github.io下，如下第一张图，找不到umi.js。而我们之前的github配置是把打包产物放到了https://coder66y.github.io/simpleCV下，所以需要修改下项目的打包配置，将publicPath修改为simpleCV ，并且将路由设置为hash模式，如下第二张图：

最后，我的页面成功出来，同理可以部署自己的个人博客，个人网站哦

打个广告🤪

我的项目simpleCV （静态网站）

这个是一个轻量级简历编写页面,适合新手练习react,可给想做自己项目的前端同学一个参考🥰

在线体验： coder66y.github.io/simpleCV

支持如下功能

更改简历颜色
设置简历字体，边距，大小
中英文切换
导出为图片
打印
导出为pdf
自定义不同模块内容