使用 github Pages，您可以免費創建和發布網站。這適合炫耀您一直在從事的項目、您的作品集（用於您的個人網站）或您的組織/公司。

常規的靜態網頁可以輕鬆部署，也可以只顯示存儲庫的README.md.

默認顯示 README.md

那麼我們如何才能將我們製作的單頁應用程式（使用 React、Svelte 等）部署到我們的 GitHub Pages 中呢？這很簡單。

請記住，如果您的網站使用後端，它可能必須託管在其他地方。

第 1 步：您的項目存儲庫！

如果您正在製作個人網站，請確保將您的存儲庫命名為yourusername.github.io. 顯然，這是 GitHub 的另一個「秘密」，這樣網站就不會在路徑下/，而只是yourusername.github.io.

如果您的存儲庫名稱與上述不同，您的網站可以在yourusername.github.io/repository-name.

此外，除非您擁有Pro GitHub 帳戶，否則您的私有存儲庫無法啟用 GitHub Pages。因此，如果您的存儲庫包含任何敏感信息，請記住這一點。

第 2 步：安裝 gh-pages 包

npm 包對於將您的應用程式部署到 GitHub Pagesgh-pages是必需的。因此，只需將其安裝在您的項目中：devDependencies

npm i -D gh-Pages

第 3 步：您的腳本

轉到package.json並添加以下腳本：

「預部署」：「npm 運行構建」，「部署」：「gh-pages -d 構建」

"predeploy"必須指向構建應用程式的生產就緒、優化版本的腳本。至於"deploy"腳本，-d標誌後面的文件夾名稱gh-pages就是要部署的。就我而言，它被稱為build.

總而言之，"predeploy"將獲取您的代碼並將優化版本構建到構建文件夾中。該"deploy"腳本將獲取該文件夾的內容並將其部署到 GitHub Pages。所以請確保指向正確的腳本和文件夾！

第 4 步：構建和部署

只需在終端中運行"deploy"腳本即可。在將構建發送到 GitHub 之前，將首先調用npm run deploy該腳本。"predeploy"

當您看到終端說Published時，您可以繼續檢查您的存儲庫的分支。您將看到另一個名為gh-pages. 此分支包含您的應用程式的生產版本。

要更改您的應用程式部署到的分支，您可以將-b標誌添加到您的腳本，後跟您選擇的分支名稱：

「部署」：「gh-pages -d build -b 分支名稱」

第 5 步：啟用 GitHub 頁面

如果您的存儲庫名稱類似yourusername.github.io，您的 GitHub Pages 將自動啟用。當您進入頁面時，它只會顯示您的存儲庫README.md，如上所示。但是，我們希望它顯示我們剛剛部署的應用程式。現在讓我們這樣做：

轉到您的存儲庫設置，然後單擊Pages：

在此頁面中，您可以選擇要部署的任何分支和文件夾。確保選擇腳本剛剛部署到的分支，在我的情況下，它將是gh-pages. 單擊保存，GitHub Actions 將開始部署應用程式。

完成後，當您轉到您的 URL 時，將顯示您的應用程式。

我們去吧！您的應用程式現已部署並公開。任何輸入您的URL的人都可以訪問它。

提示：路由

對於多個頁面之間的路由，應該使用哈希路由器。是的，您的 URL 之間會有一個#，但如果不使用，則無法直接訪問其他頁面。

對於 React，你可以導入HashRouterfrom react-Router-dom，而對於 Svelte，你可以只導入Routerfrom svelte-spa-router。

提示：網站圖標

我在我的網站上添加了一個圖標。但是當發布在 GitHub Pages 上時，它卻無處可尋。

當應用程式在 GitHub Pages 上發布時，網站圖標的連結方式會有所不同。這是一個對我有用的：

<link rel="快捷圖標" type="image/x-icon" href="favicon.ico?" />

最後的問號 (?)是網站圖標能夠顯示所需要的。另外，請確保開頭沒有斜線。/

結論

這就是您可以使用 GitHub Pages 發布自己的單頁應用程式的方式。老實說，這很簡單。感謝您的閱讀，我希望這可以幫助您建立自己的網站，或者展示您的項目的網站。