準備、設置、啟動：使用 GitHub Pages 創建靜態站點
已發表: 2023-02-23隨著當前熱門的Web開發工具和框架的出現，創建網站變得越來越複雜。 但有時，您不需要網站上有很多交互性。 如果您專注於向查看者提供信息並且不需要復雜的功能，那麼靜態站點可能是正確的選擇。
在本教程中，您將了解什麼是靜態網站，包括它的好處、限制，以及如何使用 GitHub Pages 免費創建和部署使用 HTML 和 Bootstrap 創建的簡單個人網站。
什麼是 GitHub 頁面？
GitHub 是一個基於 Web 的平台，用於託管 Git 存儲庫和協作軟件項目。 它提供用於共享和跟踪代碼更改、管理和審查代碼的工具，以及打開和審查拉取請求的能力。
不要混淆 Git 和 GitHub！ GitHub 是一種允許開發人員之間協作的託管服務，而 Git 是用於保存軟件項目狀態快照的本地版本控制軟件。
GitHub Pages 是 GitHub 最好的功能之一。 它是一項允許您直接從 GitHub 存儲庫託管靜態網站的服務。 這意味著您可以使用您的存儲庫來存儲您網站的代碼和文件，GitHub 會自動將它們發佈為您可以在線訪問的網站。
總之，GitHub Pages 是啟動和運行網站的一種快速簡便的方法，對於展示您的作品集、開源項目或其他靜態內容特別有用。
靜態與動態網站
正如我們所見，GitHub Pages 提供了一種部署靜態網站的方法。 但是靜態網站和動態網站有什麼區別呢？
讓我們從討論上述網站上的內容開始。
靜態內容是指網站的所有用戶都保持不變的元素，無論他們是誰或他們在網站上採取了什麼行動。 這可能包括網站的文本、圖像和佈局，以及構成網站的底層代碼和文件。 靜態站點將完全按照其存儲的方式交付給用戶。
相比之下，動態內容是根據用戶的操作（例如登錄、與付費專區交互或評論帖子）或其他因素（例如當前時間或位置）而變化的內容。
例如，顯示產品靜止圖像的網站將始終向每個用戶顯示相同的圖像（靜態）。 另一方面，顯示當前時間的網站將根據每個用戶的位置（動態）向每個用戶顯示不同的時間。
一般來說，我們可以說一個網站是靜態的，如果前端只包含 HTML、CSS 和 JavaScript，沒有像 PHP 或 Python 這樣與數據庫交互的服務器技術。
雖然無法使用 GitHub Pages 構建動態網站，但您可以使用 CMS（例如 WordPress）或靜態網站生成器（例如 Gatsby 或 Hugo）輕鬆構建您自己的網站。
GitHub 頁面的主要功能
讓我們看看 GitHub Pages 作為託管服務的優勢：
- 輕鬆設置和發布： GitHub Pages 讓您只需幾個簡單的步驟即可輕鬆上手。 您可以為您的存儲庫啟用 GitHub Pages 並指定您網站文件的來源，GitHub 將自動發布您的網站，並根據您的用戶名和存儲庫名稱在 URL 上提供它。
- 自定義域：使用 GitHub Pages，您可以為您的網站使用自定義域名，而不是 GitHub 提供的默認 URL。 這使您可以使用自己的品牌，並使用戶更容易找到和訪問您的網站。
- HTTPS 支持： GitHub Pages 提供對 HTTPS 的支持，允許安全連接到您的網站。 這對於建立您網站的信任度至關重要。
- Jekyll 支持： GitHub Pages 支持 Jekyll，這是一種靜態站點生成器，可讓您使用模板和其他功能創建複雜的網站。 這使得創建具有專業外觀的網站變得容易，而無需從頭開始編寫所有代碼。
限制
如前所述，您只能使用 GitHub Pages 創建靜態站點。 如果您想構建一個具有許多功能的複雜項目，您將需要其他託管服務。 您還應該記住，您不能將 GitHub Pages 用於商業目的，例如經營在線業務或電子商務。
GitHub Pages 不允許您的站點大於 1 GB，這意味著您存儲庫的文件不能超過該內存量。 大多數情況下，1 GB 對於靜態站點來說綽綽有餘； 一定要壓縮你的圖像。
它還具有每月 100 GB 的軟帶寬限制。 這個帶寬量足以每月將您的網站分發給幾千人，所以除非您有大量的受眾，否則您就可以開始了。
使用 GitHub Pages 創建和部署：分步指南
創建 GitHub 頁面是託管靜態站點的一個簡單直接的過程。 請記住，如果您需要某種數據庫連接，您應該有一個外部數據庫提供程序。
在以下指南中，您將學習如何從頭開始創建 GitHub 頁面。 這包括創建遠程存儲庫、使用 HTML 構建響應式個人網站以及使用 GitHub 部署到 Web。
讓我們開始吧！
1. 在 GitHub 上註冊
要開始，您必須擁有一個活躍的 GitHub 帳戶。 如果您沒有，請轉到他們的註冊頁面。 填寫表格的時間不應超過幾分鐘。
登錄後，您應該能夠創建遠程存儲庫。
2.創建遠程倉庫
存儲庫是一個目錄，您可以在其中存儲與特定項目相關的所有代碼。
在 GitHub 主頁上，單擊站點左側面板中的“新建”或“創建存儲庫”按鈕。 這會將您重定向到一個表單，您將在其中填寫您的回購信息。
這些後續步驟至關重要：
- 將存儲庫的名稱設置為
"yourusername".github.io。 - 檢查公共按鈕。 您必須將存儲庫設置為公開才能發布您的站點。
- 添加自述文件。
您只能為給定的個人帳戶或組織擁有一個存儲庫。 這就是為什麼存儲庫的名稱是您的用戶名和github.io域。 稍後，我們將了解如何從存儲庫設置站點。
除非你有 GitHub Pro，否則你只能在存儲庫公開時發布 GitHub 頁面。 如果您不想公開共享您網站的源代碼，請記住這一點。
在此之後，您應該有如下內容：
如果您已經擁有站點的工作源代碼，則可以跳過常見的 Git 工作流程，而是將文件直接放入存儲庫中。
為此，請單擊存儲庫中的Add file菜單，然後選擇上傳文件選項。 然後選擇您網站的文件，主要 HTML 文件名為index.html 。 請記住將所有 CSS 和 JavaScript 文件也放入存儲庫中。
最後，點擊Commit changes按鈕。
在下一節中，我們將使用 HTML 和 Bootstrap 構建一個簡單的個人網站。 然後我們將其上傳到 GitHub 並將其設置為具有自定義域的 GitHub 公共頁面。
3. 建立個人網站
我們將從克隆我們剛剛創建的 GitHub 存儲庫開始。 為此，請確保您的計算機上已經安裝了 Git 客戶端。 （如果不了解，請查看我們關於 Git 和 GitHub 的教程。）
轉到存儲庫的code選項卡並複制SHH選項中的 SSH URL。
然後，啟動終端或命令行。 在大多數 Linux 發行版和 macOS 上，您可以使用快捷鍵Ctrl + Alt + T ，或通過系統的應用程序菜單查看Terminal 。 在 Windows 上，您可以使用 Git、CMD、PowerShell 或 GUI 客戶端默認安裝的 Git BASH。
在您的終端上，鍵入git clone和您複製的 URL。 這將在您的本地計算機上下載並創建遠程存儲庫的副本，以便您可以構建您的網站。
然後使用cd和ls輸入名為yourusername.github.io的新文件夾。 您應該會看到.git文件夾，其中包含項目的配置和元數據，以及README.md文件（如果您創建了一個文件）。
打開您最喜歡的文本編輯器（例如 Sublime Text），讓我們開始創建您的網站。
在存儲庫的根目錄下，創建一個名為index.html的文件（GitHub Pages 需要此名稱）並輸入典型的 HTML 代碼結構：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Kinsta User</title> </head> <body> </body> </html>正如我們之前所說，我們將使用 Bootstrap 5.0，這是一個開源 CSS 框架，可幫助我們更輕鬆地構建響應式網站。 正如您將看到的，我們不必為此特定站點使用自定義 CSS。
為了讓 Bootstrap 進入我們的頁面，我們需要通過 CDN 包含編譯後的 CSS 和 JavaScript。 將以下代碼粘貼到 HTML <head>中，以便能夠使用 Bootstrap CSS：
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">以同樣的方式，我們還將包括 Devicon CDN，以便能夠毫不費力地使用流行編程語言和技術的 SVG 圖標：
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/devicons/[email protected]/devicon.min.css"> 現在，要包含 JavaScript，請在</body>標記末尾的正上方插入以下代碼：
<!-- JavaScript: Above --> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>我們將從為我們的網站創建標題開始。 這將是一個黑色的標題，帶有指向我們的索引頁面和其他兩個頁面的鏈接——“項目”和“閱讀日誌”——你可以稍後創建：
<nav class="navbar navbar-dark navbar-expand-lg bg-dark "> <div class="container-fluid"> <div class="mx-4"> <a class="navbar-brand" href="#">Kinsta User</a> </div> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse"> <ul class="navbar-nav me-auto mb-2 mb-lg-0"> <li class="nav-item"> <a class="nav-link" href="#">Projects</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Reading Log</a> </li> </ul> </div> </div> </nav> 我們使用 Bootstrap 包裝器navbar和navbar-expand-lg創建一個響應式容器，當顯示寬度小於 992px 時該容器會折疊。 發生這種情況是因為網格選項lg 。 如果您想了解更多關於網格選項的信息，請查看 Bootstrap 的佈局頁面。
現在，讓我們在容器中創建兩個響應列：一個用於 Unsplash 的免費圖像，另一個用於描述我們自己：
<div class="container my-4 "> <div class="row justify-content-center"> <div class="col-lg mb-lg-4"> <img src="image.jpg" class="img-fluid" alt=""> </div> <div class="col-lg mx-2 align-self-center"> <div class="my-3"> <h1 class="text-center">I'm a Kinsta User</h1> <p>As a passionate software developer, I am deeply enthusiastic about creating and developing software applications. I am constantly learning and experimenting with new technologies and approaches, and I have a strong desire to create innovative and effective solutions to complex problems. I am driven by my curiosity and love for problem-solving, and I am committed to producing high-quality, well-designed software that meets the needs of users. </p> </div> </div> </div> </div>如您所見，我們從本地文件獲取圖像，因此當我們將更改推送到 GitHub 存儲庫時，它必須在存儲庫中。
最後，在我們的 Bootstrap 容器中，我們將使用 Devicon 的 SVG 圖標，以及一些內部 CSS 來使我們的技能脫穎而出：
<!-- Inside the container created above --> <div class="my-4"> <div class="text-center mb-4"> <h1>My Skills</h1> </div> <div class="row "> <style> I { font-size: 4em; } </style> <!-- Skills --> <div class="col"> <div class="text-center"> <h4>WordPress</h4> <i class="devicon-wordpress-plain"></i> </div> </div> <div class="col"> <div class="text-center"> <h4>Django</h4> <i class="devicon-django-plain"></i> </div> </div> <div class="col"> <div class="text-center"> <h4>Python</h4> <i class="devicon-python-plain"></i> </div> </div> <div class="col"> <div class="text-center"> <h4>GitHub</h4> <i class="devicon-github-original" ></i> </div> </div> </div> </div> 由於我們使用<i> HTML 標記，我們可以將其視為一種字體。 因此，我們通過在style標籤中聲明將徽標的大小設置為4 em 。
這是這個簡單的個人網站的最終結果：
您是否知道超過 50% 的網站流量來自移動設備？ 因為我們使用了 Bootstrap，所以我們節省了大量的 CSS 編碼，並且還得到了一個響應式的網站，您可以在下面欣賞。
您可以根據需要自定義此站點。 這是 GitHub 上的完整源代碼，供您使用。
您甚至可以使用我們功能齊全的應用程序託管解決方案之一附加無頭 CMS，例如 Ghost。 您可以通過 MyKinsta 儀表板直接連接到您的 GitHub 存儲庫，並在幾分鐘內啟動並運行您的新站點。
是時候推送你的文件了。 為此，請在終端上的項目頂層運行以下命令。
git add . git commit -m "Added website source code and image" git push現在，我們可以使用這個網站來設置我們的 GitHub 頁面。
4. 發布用戶 GitHub 頁面
一旦您將index.html推送到以您的用戶名命名的遠程存儲庫，GitHub 將自動啟動一個工作流程來在線設置您的站點。 這可能需要幾分鐘時間，但您會自動啟動並運行靜態站點。
您網站的 URL 將類似於以下內容： https://kinstauser.github.io/
如果 10 分鐘後您的站點不在線，您可以嘗試對您的代碼進行虛擬更改（例如，添加一個空格）並再次推送以重新激活 GitHub Pages 的構建過程。
5. 發布存儲庫 GitHub 頁面
到目前為止，我們已經創建了一個用戶站點，但是如果我們想要擁有多個已發布的 GitHub 站點怎麼辦？ 然後我們必須去一個項目網站。
作為示例，我們將使用我們在 Git for Web 開發教程中創建的 HTML 技術站點。
最簡單的方法是轉到我們存儲庫的設置選項卡，然後轉到“代碼和自動化”部分中的頁面選項。
選擇源Deploy from a branch ，然後單擊要從中部署文件的分支。 強烈建議從主分支發布，但使用輔助分支創建功能和修復錯誤，然後合併它們。 這樣您就不會輕易將錯誤引入已發布的站點。
選擇分支後，選擇要從中提供文件的文件夾——通常是根 ( / )——然後單擊保存。
再次等待幾分鐘。 您的站點應該在"yourusername".github.io/可用。
要取消發布存儲庫站點，您可以轉到Settings ，然後Pages ，然後單擊三個點選項。 您會看到一個框，其中包含消息Unpublish site 。
偉大的！ 您已經啟動並運行了您的開源項目的站點，但是域名本身很長而且肯定不容易記住。 讓我們看看如何改進它。
6. 設置自定義域
為 GitHub 頁面設置自定義域並確保其正常工作的最簡單方法是訪問您的 DNS 提供商並為 GitHub 頁面的 IP 地址創建四個 A 記錄：
185.199.108.153 185.199.109.153 185.199.110.153 185.199.111.153 您還必須設置一條以yourusername.github.io作為目標的 CNAME 記錄。 通常，DNS 更改很慢，所以請耐心等待，最多可能需要一整天。
完成此操作後，轉到您的存儲庫設置中的自定義域部分，輸入您的域，單擊保存按鈕，然後等待 GitHub 檢查您的自定義域。
此外，如果您的 DNS 支持它，請選中強制 HTTPS框以僅通過 HTTPS 為您的站點提供服務。
恭喜！ 如果您一直學習到本教程的這一點，那麼您已經在 GitHub Pages 中免費託管了一個靜態網站。
GitHub 頁面的最佳實踐
在我們分開之前，這裡有一些您在發布 GitHub 站點時應該考慮的最佳實踐：
- 永遠不要直接提交到你正在部署的分支。 在其他分支中創建更改，然後創建拉取請求。
- 如果您負擔得起，請為您的網站選擇一個好的域名。 這是您個人或項目品牌最重要的決定之一。
- 不要將 GitHub Pages 用於商業目的，例如建立電子商務網站。
- 評估您的需求。 能夠免費發布靜態網站真是太棒了，但如果您期望有大量流量或需要復雜的功能，那麼付費購買優質的託管服務才是正確的選擇。
概括
Web 開發每天都變得越來越複雜。 自 Internet 出現以來，靜態站點就一直存在，它們是開始創建項目的好方法。
在本教程中，您了解了什麼是靜態站點，以及如何使用 GitHub Pages 在線設置它們。 您使用 Bootstrap 創建了一個簡單的個人網站，並將其發佈為您的 GitHub 用戶網站。 您還學習瞭如何啟動和運行項目站點，以及如何在必要時取消發布它。
總的來說，GitHub Pages 是一種方便而強大的免費託管靜態網站的方式。 無論您是想展示您的作品集、分享您的開源項目，還是開始創建在線形象，GitHub Pages 都是一個絕佳的選擇。 一旦您獲得足夠的流量或準備好創建一個全棧站點，您就可以無縫地轉移到其他應用程序託管服務，如 Kinsta，而不會錯過任何一個節拍。