如何使用Github Page 发布React

引言

初学react 使用官方脚手架 创建了一个静态的项目 想打包发布一下 如果自己买服务器不太划算 ,github 提供了: GitHub Pages 可以直接从GitHub仓库为你生成个人、企业或项目页面

Step.1 首先创建github 的库

(不会的参考:如何创建自己的Git仓库 )

$ git init
$ git add .
$ git commit -m 'message'
$ git remote add origin 
$ git push -u origin master

Step.2 修改package.json 文件

原来可能是这样

{
  "name": "test-hook",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "gh-pages": "^2.2.0",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-scripts": "2.1.8"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ]
}

添加
“homepage”: “https://xskdjs1995.github.io/myapp”, // 这个是之后访问的地址哦
“scripts”: {
+ “predeploy”: “npm run build”, // 就按这个名起就完了 就是执行下面的之前会自动执行的钩子
+ “deploy”: “gh-pages -d build” // 发布
},

如果使用的是yarn 那就 或者 “predeploy”: “npm run build”, => “predeploy”: “yarn run dist”

{
  "name": "test-hook-two",
  "version": "0.1.0",
  "homepage": "https://账号名.github.io/项目名 ",
  "private": true,
  "dependencies": {
    "gh-pages": "^2.2.0",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-scripts": "2.1.8"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ]
}

Step.3 安装 gh-pages

之前的配置的 “deploy”: “gh-pages -d build” 就是为了使用这个

npm install --save gh-pages

或者你用的yarn

yarn add gh-pages

你也可以使用别的分支 部署但是需要修改配置

"scripts": {
    "predeploy": "npm run build",
-   "deploy": "gh-pages -d build",
+   "deploy": "gh-pages -b master -d build",

Step.4 发布

如果你没有一个科学的 上网方式你的发布过程会出现很多问题

npm run deploy 

或者你用yarn

yarn run deploy

经过漫长的等待后 你没有迎来

$ yarn run deploy
yarn run v1.13.0
$ npm run build

> [email protected] build D:/sss
> react-scripts build

Creating an optimized production build...
Browserslist: caniuse-lite is outdated. Please run next command `yarn upgrade caniuse-lite browserslist`
Compiled successfully.

File sizes after gzip:

  39.58 KB  build\static\js\2.f52f6b5f.chunk.js
  12.74 KB  build\static\js\main.34e393a0.chunk.js
  985 B     build\static\css\main.f5740b21.chunk.css
  770 B     build\static\js\runtime~main.ba8e8b22.js

The project was built assuming it is hosted at /hook/.
You can control this with the homepage field in your package.json.

The build folder is ready to be deployed.
To publish it at https://xxx.github.io/hook  , run:

  yarn run deploy

Find out more about deployment here:

  https://bit.ly/CRA-deploy

$ gh-pages -d build
Published
Done in 365.24s.

遇到的问题及解决方法

1 already exists

fatal: A branch named 'gh-pages' already exists.

官方文档上的解释是：

当处理gh-pages模块生成文件.cache，如果由于某些原因如密码错误等卡住则不会自动清理
可能是你网不行!!!

解决办法：
运行 ~node_modules/gh-pages/bin/gh-pages-clean 或者直接删除项目下的 ~node_modules/gh-pages/.cache文件即可

2 Cannot read property ‘email’ of null

Cannot read property 'email' of null

解决办法：

git config --global user.name ''
git config --global user.email ''

Try npm run deploy again

3 The remote end hung up unexpectedly

要么是缓存不够，要么是网络不行，要么墙的原因几种解决方法

The remote end hung up unexpectedly

建议使用解决办法：

git config --global http.lowSpeedLimit 0
git config --global http.lowSpeedTime 999999

Try npm run deploy again

4 could not read Username for’https://github.com’: No error

不知道为啥 用的http方式 总要求输入账号密码 弹出来的登陆窗口那种 输完了还总报错:参考这个
项目 -> 隐藏文件 .git -> config

[remote "origin"]
	url = https://github.com/xxxx/react.git
	fetch = +refs/heads/*:refs/remotes/origin/*

改成下面

[remote "origin"]
	url = https://用户名:密码@github.com/xxxx/react.git
	fetch = +refs/heads/*:refs/remotes/origin/*

建议使用解决办法：
Try npm run deploy again

Step.5 验证

浏览器里访问一下 就是之前配置的 homepage路径

参考:1.官网介绍 2.如何部署

以及以上内容中的链接