葛瑞斯肯樂活筆記

在此紀錄一下 React 部屬到github教學

前情提要: 你要會建立 react 專案(使用 create-react-app套件)，你的電腦也需要先裝好git

步驟一: 建立與react 相同名稱的 repository (請先註冊github帳號: https://github.com/ )

首先請先到github上建立一個 repository，名稱要跟你後續要建立的 react專案名稱相同，在此我用 ruwar 當名稱，ruwar代表Russia-Ukraine war:

步驟二: 複製repository URL並且該畫面請保留，後續要使用

步驟三: 開啟react IDE並建立 react專案

我是使用VS code，所以我使用下述指令建立ruwar專案

• create-react-app ruwar

步驟四: 安裝gh-pages套件

建好後請先移至ruwar專案資料夾下再安裝套件 gh-pages:

• npm install gh-pages –save-dev

步驟五: 將github資訊貼到 react專案 package.json中

在package.json中加入:

“homepage”: “https://[你的帳號].github.io/ruwar”,

我的就是 https://x831617.github.io/ruwar

Scripts區塊中加入:

"predeploy": "npm run build",

"deploy": "gh-pages -d build"

如下圖:

步驟六: 之後依github頁面指示下git指令

請使用git bash進到 ruwar專案資料夾下:

接下來輸入下述指令，將專案連結到github並且將專案推至 github:

• git init

• git remote add origin https://github.com/x831617/ruwar.git

• git add . (有空格句點)

• git commit -m “first commit”

• git push -u origin master

步驟七: 回到VS code，在終端機直接下達 npm run deploy指令

就可以在你的 URL中看到如下畫面

這代表成功了。

如果有遇到下述錯誤:

Error: spawn git ENOENT

代表需要安裝git到環境變數，請參考這篇:

請點我，git環境變數安裝說明