React.jpg

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

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

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

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

1.png

 

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

2.png

 

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

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

  • create-react-app ruwar

3.png

 

 

 

步驟四: 安裝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"

如下圖:

4.png

 

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

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

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

  • git init

5.png

 

6.png

 

  • git add . (有空格句點)

7.png

 

  • git commit -m “first commit”

 

  • git push -u origin master

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

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

8.png

這代表成功了。

 

如果有遇到下述錯誤:

Error: spawn git ENOENT

1.png

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

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

arrow
arrow

    葛瑞斯肯 發表在 痞客邦 留言(0) 人氣()