---
# System prepended metadata

title: "\U0001F3C5 Day 20 ｜React Deploy"
tags: [2022 React 新手讀書會]

---

---
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 的網址，例如：
```json
// 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
```
#### 步驟三：設定部署指令
```json
// 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 的設定，因為我們會將
![](https://i.imgur.com/a26rfzI.png)

## 題目
成功部署一個 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/#/)|

