如何將我的 React-App 部署到 github 用戶頁面

Question

我一整天都在努力將我的 React 應用程序部署到

Github 用戶頁面：例如https://mygitname.github.io

而不是 Github 頁面：例如https://mygitname.github.com/mysite

我遇到了很多答案和 HOW-TO 並沒有真正提供可行的解決方案（或至少是一個簡單的解決方案），所以我決定在這里問自己這個問題，這樣我就可以分享給大家下次有人會需要知道。

我已經閱讀了條款，我發現可以提出問題並回答它，如果我認為它會有所幫助。

對於這個例子，我假設你正在構建一個簡單的 Onepage，因為路由會帶來其他問題（我不會在這里討論這些）

Answer 1

首先，在 github 上創建一個空的存儲庫並將其命名為您的網站

“我的github名稱”

命名

“我的github名稱.github.io”

然后，在你的 React App 文件夾中打開一個終端/Gitbash 並執行以下操作

$ npm install gh-pages --save-dev

然后，打開 package.json 文件並在最開始（在第一個括號之后）添加以下內容：

"homepage": "http://mygithubname.github.io/",

並將這些行添加到“腳本”中：

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

因為 gh-pages 創建了一個 gh-pages 分支並且 github 用戶頁面僅從 master 分支顯示您的網站，所以您必須強制它。

最后，返回到您的終端/gitbash 並鍵入以下命令：

$ git init

$ git remote add origin https://github.com/mygithubname/mygithubname.github.io.git

$ npm run deploy

瞧！ 您的網站現已上線“ https://mygithubname.github.io ”

請記住，這樣只有您的生產網站才會在線，如果您還想跟蹤源，您可以創建另一個分支並將其推送到那里（或擁有不同的存儲庫）。

希望這會有所幫助，玩得開心！