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

Github Pages介绍

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

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

本教程前提如下:

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

前置知识🧐

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

接下来,我们就开始吧💪

步骤

step1 安装gh-pages开发依赖

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

bash 复制代码
pnpm install gh-pages --save-dev

step2 修改package.json

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

如下:

json 复制代码
"homepage": "https://coder66y.github.io/simpleCV", //项目对应的url
  1. 增加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 <2160360887@qq.com>",
  "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": "pnpm@9.9.0+sha1.3edbe440f4e570aa8f049adbd06b9483d55cc2d2"
}

step3 推送部署

  1. 将以上更改推送远程仓库(github)

本地终端执行如下命令

bash 复制代码
git add .
git commit -m "style: 设置部署命令"
git push
  1. 推送打包产物到gh-pages分支

本地终端执行如下命令

bash 复制代码
npm run deploy 

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

step4 修改github配置

  1. 首先仓库需要公开
  1. 打开setting中的pages,将分支设置为gh-pages

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

遇到的问题🥹

  1. npm run deploy执行报错

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

  1. 部署到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

支持如下功能

  1. 更改简历颜色
  2. 设置简历字体,边距,大小
  3. 中英文切换
  4. 导出为图片
  5. 打印
  6. 导出为pdf
  7. 自定义不同模块内容
相关推荐
人工智能训练师1 小时前
Ubuntu22.04如何安装新版本的Node.js和npm
linux·运维·前端·人工智能·ubuntu·npm·node.js
Seveny071 小时前
pnpm相对于npm,yarn的优势
前端·npm·node.js
yddddddy2 小时前
css的基本知识
前端·css
昔人'2 小时前
css `lh`单位
前端·css
前端君3 小时前
实现最大异步并发执行队列
javascript
Nan_Shu_6144 小时前
Web前端面试题(2)
前端
知识分享小能手4 小时前
React学习教程,从入门到精通,React 组件核心语法知识点详解(类组件体系)(19)
前端·javascript·vue.js·学习·react.js·react·anti-design-vue
数字化顾问5 小时前
GitHub热榜项目 - 日榜之应用场景与未来发展趋势
github
蚂蚁RichLab前端团队5 小时前
🚀🚀🚀 RichLab - 花呗前端团队招贤纳士 - 【转岗/内推/社招】
前端·javascript·人工智能
孩子 你要相信光6 小时前
css之一个元素可以同时应用多个动画效果
前端·css