引言

一般我們部署前端項目都會自己搭或者租用一個服務器然后把項目打包成靜態(tài)文件后部署到服務器上，再購買一個域名通過ip指向具體的服務器地址之后，然后就可以把項目對應的域名提供給別人訪問了，如果是公司項目或者比較大的商用項目這很合乎情理，但是如果是個人項目的話，服務器跟域名也也算是一筆不菲的開銷了，今天我就給個人開發(fā)者帶來一種免費部署前端項目的解決方案。

我今天來講解下利用github page是來部署你的前端項目。

1.保證你的React項目是可以正常運行的

在本地嘗試將項目編譯運行在本地檢查是否正常

npm run build

2.在github上新建倉庫

注意這里是新建普通倉庫，不需要創(chuàng)建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.配置發(fā)布選項

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

predeploy:是將你的項目預編譯成靜態(tài)文件放在build文件夾
deploy:是使用gh-pages 部署你的build文件夾下的內(nèi)容。

5.安裝 gh-pages

npm install gh-pages --save-dev

6.部署項目到github page上

npm run deploy

配置完之后，打開github上的倉庫，你會發(fā)現(xiàn)原先的項目多了一個gh-pages分支，里面存放的是我們打包編譯完成之后的靜態(tài)文件。

在這里插入圖片描述

切換到setting下，我們可以看到現(xiàn)在項目已經(jīng)被成功部署到https://ydjw.github.io/jwc/上了。

在這里插入圖片描述

重新打包部署到線上

npm run deploy