---
# System prepended metadata

title: 如何將 React 項目部屬至 Github Page
tags: [筆記]

---

---
tags : 筆記
---
# 如何將 React 項目部屬至 Github Page

## 1. 推送程式碼至 Github

![](https://i.imgur.com/a64qdmH.png)

## 2. 安裝 [gh-pages](https://www.npmjs.com/package/gh-pages) 套件至專案
```
npm i gh-pages
yarn add gh-pages
```

看是使用 npm 或是 yarn 啟動的專案 (我是使用 yarn)。

## 3. package.json 補上相關指令
```json
"scripts": { 

  ...

  "predeploy": "yarn build",   // 同樣的看是用什麼啟動專案
  "deploy": "gh-pages -d build" 
}
```

## 4. 執行指令
```
yarn deploy
```

執行完成後 Github 會多出一個 gh-pages 分支。

![](https://i.imgur.com/DpsGDgM.png)


## 5. 設定專案
![](https://i.imgur.com/X0iADlZ.png)

在設定當中，點選 Pages 中的分支，將分支修改為 gh-pages 並儲存，即可將 React 項目部屬至 Github Page。