［情境劇場］

小當家：哇！怎麼來了這麼多外國人

解師傅：嘿嘿～因為我們把網站偷偷發布上線了，沒想到成效這麼好啊！

React 熱炒店已名聲遠播，但這不會是終點，它們會為世人再做出更美味的料理

gh-pages 可以將我們製作的專案很簡易的部署到 Github

安裝 gh-pages

// npm
npm install --save gh-pages

// yarn
yarn add gh-pages

先安裝 gh-pages，接著執行下面的動作

1. package.json 添加 homepage、scripts 指令

package.json

{
	"name": "my-app",
	"homepage": "https://myusername.github.io/my-app",
	// more...
}

加入 homepage，在 myusername 帶入自己的 github 帳號、在 my-app 帶入專案名稱

{
  "scripts": {
	"predeploy": "npm run build",
	"deploy": "gh-pages -d build",
    // more...
  }
}

在 scripts 欄位中添加 predeploy、deploy 指令

1
2
3

git remote add origin https://github.com/myusername/my-app.git
git branch -M main
git push -u origin main

myusername 為自己的 github 帳號、my-app 為專案名稱

1	npm run deploy

在終端機輸入指令

部署後會多了一個 gh-pages 分支，將網站指定此分支後，部署就完成囉！

為期 30 天的鐵人賽完成了～～～太令人感動的一刻！
很開心自己可以堅持到最後，每天要寫一篇技術文章不是一件容易的事，
在寫文章同時也更了解 React 的生態，也可能可以幫助到別人(不知道有沒有XD)
IT 鐵人賽完賽 get～明年再見吧！！

最近 Lala 開了前端課程 👉【實地掌握RWD - 12小時新手實戰班】👈
無論您是 0 基礎新手，又或是想學 RWD 的初學者，
我們將帶你從零開始，深入了解並掌握 RWD 響應式網頁設計的核心技術，快來一起看看吧 😊

線上課程可以加速學習的時間，省去了不少看文件的時間XD，以下是我推薦的一些課程
想學習更多關於前後端的線上課程，可以參考看看。