---
tags: 2022 React 新手讀書會
---
# 🏅 Day 20 ｜React Deploy
如果是使用 Create React App 來做作業練習的同學，最後一定都會需要將網站部署上去，讓大家可以看到你的作品。因此最後一天我們就一起來練習一下如何將 React 專案部署到 [Github Page](https://pages.github.com) 上吧！

在開始之前再次提醒一下，如果要部署到 Github Page 要使用 `HashRouter` 哦

#### 步驟一：在 package.json 中設定 Github Page 的網址
在 `package.json` 中加上 `homepage` 欄位，對應到 Github Page 的網址，例如：

// package.json
{
  "name": "realtime-weather-app",
  "homepage": "https://hexschool.github.io/react-daily-task-router",
    ...
}

homepage 設定的這一段，`hexschool` 這邊是你的 GitHub 名稱，而最後 `/react-daily-task-router` 則是你的儲存庫名稱。

設定完成後就可以安裝部署用的工具，這邊我們要用的是 [gh-pages](https://www.npmjs.com/package/gh-pages) 。

#### 步驟二：安裝套件

npm install --save gh-pages

#### 步驟三：設定部署指令

// package.json
"scripts": {
  // 加上 deploy 指令
  "predeploy": "npm run build",
  "deploy": "gh-pages -d build",
  // end
  "start": "react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject"
},

#### 步驟四：執行部署指令

npm run deploy

到這邊就已經可以將你的 React 專案編譯和部署到 GitHub 上的 gh-pages 分支囉
<img src="https://i.imgur.com/rPPCgFn.png" style="width: 400px" />

### 步驟五：到 GitHub 儲存庫上設定
在 GitHub 儲存庫的 Settings 就可以找到 Pages 的設定，因為我們會將

## 題目
成功部署一個 React 專案到 GitHub Pages 上。

## 回報流程
將部署成功的 GitHub Pages 連結貼至底下回報就算完成了喔!

回報區
---

| Discord | GitHub Pages 連結 / 答案 |
|:--------------------:|:-----------------------------------------------------------------------------:|
| Rice#8043 | [GitHub Pages](https://riceball-tw.github.io/react-deploy/) |
| CofCat#9226 | [GitHub Pages](https://cofcat456.github.io/react-todoList) |
| HedgehogKU | [GitHub Pages](https://hedgehogkucc.github.io/react-daily-task-router/) |
| SHIN#6075 | [GitHub Pages](https://shin9626.github.io/react-week3/) |
| 布魯諾#7239 | [GitHub Pages](https://bruno-yu.github.io/react_hexschool_week3/) |
| JC#8658 | [GitHub Pages](https://jcsamoyed.github.io/react-kaohsiung-travel/) |
| yunyun#5215 | [GitHub Pages](https://yunniyunyun.github.io/create-react-app/) |
| charlottelee849#0366 | [GitHub Pages](https://char849.github.io/reactRouter/#/) |
| yuyu#6310 | [GitHub Pages](https://yuyu0905.github.io/react-kaohsiung-tour/) |
| Bumble幫啵#0255 | [GitHub Pages](https://nick1092387456.github.io/react-daily-task-router/) |
| Yanyan#3555 | [GithubPages](https://yangunli.github.io/yanyangirl/) |
| Timothy#5863 | [GithubPages](https://timothy-hippo.github.io/react-daily-task-router/) |
| Dylan_Lin#7320 | [GithubPages](https://k06132001.github.io/kaohsiung-tour/) |
| VadaChen#2055 | [GithubPages](https://astrolexa.github.io/ReactRouterWeb/) |
| Neal#0665 | [GithubPages](https://neallkf.github.io/react-simple-todolist/) |
| Anson#3594 | [Github Pages](https://github.com/huanmingchang/react-todolist) |
| Kenge#3690 | [Github Pages](https://pgkusn.github.io/react-daily-task-router/) |
| Ryder#7398 | [Github Pages](https://rider159159.github.io/react-daily-task-router/) |
| NinaKuo#3332 | [Github Pages](https://tina272763.github.io/react-daily-task-router/) |
| Midnightdinner#6220 | [Github Pages](https://woowooyong.github.io/React-P6-Traveling-in-Kahosiung/) |
| yoshidc#0455 | [Github Pages](https://yoshiyyc.github.io/react-daily-task-router/) |
| ねこ*#9385 | [Github Pages](https://neko0104.github.io/react-daily-task-router/) |
| Rocker#6235 | [Github Pages](https://rockeryo.github.io/react-daily-task-router-main/) |
| lingxuan | [Github Pages](https://lingxuan0618.github.io/react-daily-task-router/) |
| Mitour#0672 | [Github Pages](https://mitour.github.io/ReactRouterDEMO/) |
| shinyhung#3825 | [Github Pages](https://seanhong1215.github.io/projectReact/) |
| easton#3863 | [Github Pages](https://easton7906.github.io/react-starter/) |
|kancheng#3915|[GitHub Pages](https://kancheng.github.io/React-2022-Router-Day20/)|
|carolkiki2003#7399|[GitHub Pages](https://carolkiki2003.github.io/my-react-app/)|
|wenyun#2362|[GitHub Pages](https://wen1011.github.io/ted11/#/)|