GitHub提供的免費靜態網站托管服務可以無需擔心昂貴的服務器費用和復雜的設置步驟，本篇文章中將一步步解如何通過GitHub免費部署一個靜態網站，幫助大家將創意和作品快速展現給世界。
目錄
了解基礎情況
創建基礎站點
在線調試站點
前端項目部署
部署存儲倉庫
取消刪除站點
設置404站點
了解基礎情況
GitHub Pages是GitHub提供的一項服務，允許用戶將靜態網頁托管在GitHub上，用戶可以免費托管HTML、CSS、JavaScript文件快速部署網站，它是GitHub針對開源項目、個人博客、作品集等靜態網站提供的托管平臺，完全免費且支持自定義域名，使用GitHub免費搭建靜態網站，需要提前了解一下使用它的前提及其一些限制，具體詳情可以參考官方文檔：地址?，這里不再過多贅述：
從上面官方文檔給出的限制來看，GitHub Pages提供免費托管適合個人開發者、小項目或非盈利性項目，靜態網站直接托管在GitHub上無需自己配置和維護服務器，但是其也有一些缺點：
1）僅支持靜態網站：只能托管靜態網頁無法直接支持后端應用或動態內容，如果需要數據庫、服務器端處理或動態功能，GitHub Pages不是合適的選擇
2）存儲限制：每個倉庫的文件大小限制為100MB且每個用戶有一定的帶寬限制，因此對于大文件或高流量的網站可能不太適用
3）缺少數據庫支持：如果項目需要動態數據存儲(例如用戶提交表單、評論功能等)，GitHub Pages并不提供數據庫支持
4）需要手動更新：每次修改和更新網站內容都需要通過Git提交并推送更新，可能不如一些拖拽式網站構建平臺(如 Wix、WordPress)方便
5）功能限制：盡管支持Jekyll和一些靜態生成器，但相對于其他托管平臺GitHub Pages的自定義和擴展功能仍然較為有限，尤其是當需要復雜功能時
這些缺點決定了GitHub Pages更適用于簡單的個人網站、項目展示和博客而不適合需要復雜后臺處理的應用，總的來說GitHub Pages提供了一個簡單、免費的平臺幫助開發者和創作者快速部署和管理靜態網站，如果你的需求是展示項目、博客或者個人作品集，GitHub Pages是一個理想的選擇，接下來我們開始講解如何部署GitHub Pages。
創建基礎站點
在創建基礎站點之前，我默認你已經創建好GitHub賬戶了，如果沒有自行訪問站點進行注冊即可，注冊完成之后，點擊左上角的新建存儲庫按鈕：
接下來輸入倉庫的名稱以及描述(可選)，如果要創建用戶或組織站點則存儲庫必須命名為 <user>.github.io或<organization>.github.io，如果你的用戶或組織名稱包含大寫字母，則添加的必須小寫字母，這里我就輸入名稱進行演示，如下輸入完名稱之后點擊創建存儲庫即可：
創建完成之后我們點擊上傳已經存在的文件：
然后將下面的index.html文件拖到上傳，上傳完成點擊提交即可：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.github {color: red;}</style>
</head>
<body><div class="github">hello github pages</div>
</body>
</html>
上傳完成之后，我們點擊設置按鈕找到Pages選項，然后設置我們當前GitHub Pages的分支，在這里我們調整設置了main分支，然后點擊Save保存，
然后等待一會刷新一下頁面就可以看到我們的站點部署已經成功，然后訪問我們的站點就可以看到我們上傳的index.html的內容已經被成功的展示在瀏覽器界面上了：
在線調試站點
我們可以點擊代碼的Code按鈕，然后選擇Codespaces打開代碼空間，如下所示：
打開之后就給我們展示了一個vscode編輯器的內容，這個編輯器就相當于一臺服務器， 當我們修改代碼之后可以點擊編輯器的左側分支提交按鈕，修改代碼然后輸入描述點擊提交分支即可：
提交完成回到Code選項可以看到我們的代碼修改已經成功被提交上來了：
等待一會刷頁面之后就可以看到我們的修改的內容也已經同步到站點上了：
前端項目部署
如果想設置Webpack或Vite構建的項目打包部署到GitHub站點上的話，需要考慮一下對資源文件的調用設置，確保文件能夠準確的被調用，其處理方法如下所示：
webpack：如果是webpack項目進行打包的話，需要在package.json中添加如下屬性，屬性值就是我們創建好的GitHub項目名稱：
vite：如果是vite項目進行打包的話，需要在package.json中添加如下的打包命令設置，我們在vite build命令后面添加 --base=/項目名稱 即可，如下所示：
可以看到打包后的文件內容，都已經在靜態資源目錄下面添加了我們的項目名稱：
接下來我們將打包好的靜態資源目錄上傳到剛剛創建的GitHub倉庫當中，如下所示：
然后我們稍微等待一會，等待站點的代碼進行更新，過了一會刷新站點之后可以看到我們的站點內容已經變成我們打包好的站點內容了：
部署存儲倉庫
如果想部署的站點是已經在GitHub上存儲的倉庫，新建一個倉庫然后再打包然后在部署未免有些太過繁瑣，這里我們可以通過GitHub的部署工具進行設置，終端執行如下命令安裝插件：
npm i gh-pages -D安裝完插件之后我們也是需要調整一下package.json中的命令操作，如下所示：
設置完命令之后，終端執行如下命令進行打包文件夾：
文件打包完成之后執行我們設置的發布命令，如下所示：
回到我們的項目倉庫，可以看到我們正準備要發布站點的項目已經成功被寫入分支當中：
接下來還是老樣子，我們來到倉庫的設置界面點擊Pages，可以看到當前分支我們發布的項目已經幫助我們配置好了站點內容，這里我們無需在選擇分支進行發布了，直接訪問站點即可：
可以看到我們的項目也已經成功部署到GitHub站點上了，效果還不錯：
取消刪除站點
如果想對已經部署的站點進行取消或刪除操作的話，可以參考以下內容：
取消站點：取消站點部署僅僅是對當前部署的站點進行刪除且該站點將不再可用，但是所有現有存儲庫設置或內容都不受影響，取消發布站點不會永久刪除該站點，我們只需要在已經部署的站點配置頁中，點擊取消發布站點的按鈕即可，如下所示：
取消站點之后再次訪問我們的站點鏈接的話就會看到404界面，如下所示：
如果又想重啟已經取消的站點，可以創建新部署，切換一下文本保存方式然后再切換回來然后點擊保存即可，后面再訪問鏈接可以看到我們的項目又可以繼續訪問了：
刪除站點：如果想刪除站點可以通過兩種方式刪除站點：
1） 刪除存儲庫：直接將該倉庫進行刪除即可
2）源更改為None分支：切換項目分支，選擇None分支即可
設置404站點
如果想自定義設置部署站點中的404界面的話，非常簡單，只需要在部署站點發布來源配置一個404.html或404.md文件即可，在YAML 前頁（如果存在）下方添加要在404頁面上顯示的內容：
---
permalink: /404.html
---這里我嵌入一個404.html文件試一試，首先我們先隨便輸入一段內容到站點的url上可以看到默認的404界面的內容：
接下來我們點擊項目右上角的添加文件的按鈕，然后點擊創建新文件：
然后將我們配置的404界面的內容輸入其中，然后提交：
接下來輸入我們提交的描述信息是添加404界面內容即可：
等待一段時間之后，我們再次訪問站點，可以看到我們自定義的404界面生效了：
當然配置GitHub站點還有一些其他操作，博主這里就不再一一再贅述了，感興趣的朋友可以自行嘗試一下吧！
![[ 計算機網絡 ] | 宏觀談談計算機網絡](http://pic.xiahunao.cn/[ 計算機網絡 ] | 宏觀談談計算機網絡)
