我已經在週末結束了我的投資組合網站，並希望將其部署到GitHub Pages

我假設您已經擁有可以正常使用的React應用程序（與使用 create-react-app 創建的應用程序一樣），並且託管在GitHub的存儲庫中。讓我們開始吧。

首先，在您的應用目錄中安裝 gh-pages 模塊：

<code>$ npm i gh-pages/<code>

現在，您必須添加部署配置。轉到您的 package.json 文件進行一些編輯。

下一步做什麼編輯取決於您是創建項目網站還是用戶/組織網站。您可以根據需要在GitHub Pages上創建任意數量的項目站點。他們的地址將具有以下格式：https://username.github.io/repository。

另一方面，每個帳戶只能有一個用戶網站，它將有一個更漂亮的地址：https://username.github.io。

如果要創建項目站點

下面是你必須在 package.json 裡面做的事情：

• 添加您的主頁地址（在 dependencies 之前）：“homepage”：“http://username.github.io/repository”
• 在>

這個 package.json 文件應該是這樣的。(不要忘記使用正確的值來代替用 username和repository！)

<code>{
  "name": "YourReactApp",
   ...
  "homepage": "https://username.github.io/repository",
   ...
  "scripts": {
     ...
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build",
     ...
  }
}/<code>

要部署，您所要做的就是在終端中運行以下命令：

<code>$ npm run deploy/<code>

我們差不多了，如果你轉到GitHub上的repo，你會注意到一個新的分支，叫做 gh-pages，它已經被創建了。這是為你的網站服務的網點。從GitHub上的repo主頁轉到Settings。您將在頁面的末尾找到

好極了！現在，您可以實時查看您的網站！如果您在應用中使用路由，則還有另一件事要做，因此請繼續閱讀（您可以通過下一節）。

每個帳戶只能有一個用戶站點，該站點的存儲庫應具有特定名稱。您的應用程序庫的名稱應為username.github.io。如果您已經使用其他名稱，請放心！導航到GitHub上的存儲庫主頁，然後單擊“Settings”。然後，在“Repository Name”標題下，鍵入新名稱：username.github.io（當然使用您自己的用戶名）。

當您仍在“Settings”頁面上時，向下滾動到頁面底部到GitHub Pages標題。您會注意到，與項目頁面不同，用戶頁面只能從 master 分支提供。這需要對分支以及我們在 package.json 中配置部署的方式進行一些更改。

首先，讓我們將主分支上的內容移動到一個新分支上。我們稱之為source：

<code>$ git checkout -b source
$ git push origin source/<code>

返回倉庫的“Settings”頁面，單擊左側菜單中的“Branches”，然後將“Default branch ”更改為 source，然後單擊“Update”。

接下來，在 package.json 中配置用戶網站的部署：

• 添加您的主頁地址（在依賴項(dependencies)之前）：“homepage”：“http://username.github.io/”
• 在>

package.json 文件應如下所示。 （不要忘記使用用戶名值代替username！）：

<code>{
  "name": "YourReactApp",
   ...
  "homepage": "https://username.github.io/",
   ...
  "scripts": {
     ...
    "predeploy": "npm run build",
    "deploy": "gh-pages -b master -d build",
     ... 

  }
}/<code>

要部署，您所要做的就是在終端中運行以下命令：

<code>$ npm run deploy/<code>

讓我們談談路由

我使用React Router讓我的網站看起來就像有獨立的頁面和唯一的地址。我按照上面介紹的步驟將其部署為GitHub用戶站點，這些鏈接似乎工作正常。當我點擊刷新時，我正在其中的一個頁面上，頁面消失了，取而代之的是一個404頁面。嘗試通過直接輸入其地址來訪問頁面（而不是從首頁開始導航）會得到相同的結果。在生產環境中，新的頁面加載似乎無法檢索頁面(而在開發環境中卻可以正確地處理它)。

似乎有兩種方法可以解決此問題（請參閱客戶端路由和GitHub Pages上的此說明）。一種是使用React的<hashrouter> 而不是 <browserrouter>。另一個是處理404，並將它們重定向到正確的頁面。我採用了第二種解決方案，使用了這個倉庫(https://github.com/rafrex/spa-github-pages)上提供的代碼(和解釋)。

兩個簡單的步驟：

• 將 404.html 文件從該存儲庫複製到項目的 /public 目錄（緊靠 index.html）。在404.html的腳本中可能需要設置一個變量 segmentCount。對於GitHub頁面的用戶站點，segmentCount = 0 就可以了。
• 將此處找到的腳本（行：58–88）複製到 /public/index.html 中的 部分。

就是這樣。部署（$ npm run deploy），您的鏈接應該可以正常工作。

本頭條號聚焦大前端技術和程序員成長，如果對你有所啟發和幫助，可以點個關注、收藏，也可以留言討論，這是對作者的最大鼓勵。

作者簡介：Web前端工程師，全棧開發工程師、持續學習者。

閱讀更多 做工程師不做碼農 的文章

關鍵字: 部署 Origin 站點