借助Github Page把你的React项目部署到线上环境

引言

一般我们部署前端项目都会自己搭或者租用一个服务器然后把项目打包成静态文件后部署到服务器上，再购买一个域名通过ip指向具体的服务器地址之后，然后就可以把项目对应的域名提供给别人访问了，如果是公司项目或者比较大的商用项目这很合乎情理，但是如果是个人项目的话，服务器跟域名也也算是一笔不菲的开销了，今天我就给个人开发者带来一种免费部署前端项目的解决方案。

我今天来讲解下利用github page是来部署你的前端项目。

1.保证你的React项目是可以正常运行的

在本地尝试将项目编译运行在本地检查是否正常

npm run build

2.在github上新建仓库

注意这里是新建普通仓库，不需要创建github.io类型的仓库，关于github.io类型仓库如果读者还不了解可自行百度了解，这里提供笔者利用github.io+hexo搭建的Flutter进阶之旅专栏给大家参考Flutter进阶之旅。

例如我新建的名字为jwc的github仓库如下：

在这里插入图片描述

3.将本地代码同步到github仓库上

这一步就不具体细说了，读者可git add. git commit push等相关操作把自己的本地代码上传到仓库即可。

4.修改本地React项目的 package.json文件

{
  "name": "zsjw",
  "version": "0.1.0",
  "homepage": "https://ydjw.github.io/jwc",
  "private": true,
  "dependencies": {
    "antd-mobile": "^2.2.8",
    "react": "^16.7.0",
    "react-dom": "^16.7.0",
    "react-scripts": "2.1.3"
  },
  "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"
  ],
  "devDependencies": {
    "gh-pages": "^2.0.1"
  }
}

1.配置homepage：
这里需要把你的github仓库地址稍微修改一下，例如我的https://github.com/ydjw/jwc
"homepage": "https://ydjw.github.io/jwc",
这里需要把你的github仓库地址稍微修改一下，例如我的https://github.com/ydjw/jwc修改为https://ydjw.github.io/jwc

2.配置发布选项

 "predeploy": "npm run build", 
 "deploy": "gh-pages -d build"

predeploy:是将你的项目预编译成静态文件放在build文件夹
deploy:是使用gh-pages 部署你的build文件夹下的内容。

5.安装 gh-pages

npm install gh-pages --save-dev

6.部署项目到github page上

npm run deploy

配置完之后，打开github上的仓库，你会发现原先的项目多了一个gh-pages分支，里面存放的是我们打包编译完成之后的静态文件。

在这里插入图片描述

切换到setting下，我们可以看到现在项目已经被成功部署到https://ydjw.github.io/jwc/上了。

在这里插入图片描述

好了，现在你就可以访问你部署在github上的react项目了。为了让你的项目有个个性好记的访问地址，你可以买个域名，然后通过 cname的方式指过来，然后就可以通过域名访问项目了。以后每次改动完你的本地react项目之后，记得重新打包静态文件部署一下，保证线上线下环境一致。

重新打包部署到线上

npm run deploy