在 GitHub 上建立自己的 Hugo 部落格
本帖最後由 Sdna 於 2024-3-27 12:01 編輯介紹
Hugo 是一個快速、靈活且容易使用的靜態網站生成器，它可用於建立個人部落格、網站或其他任何類型的靜態網站。在這篇文章中，我們將指導您如何在 GitHub 上建立自己的 Hugo 部落格。使用 GitHub 可以免費托管您的部落格並與他人分享您的內容。
步驟 1：安裝 Hugo
首先，您需要在本地環境中安裝 Hugo。請確保您的電腦上已經安裝了 Git 和 Go 語言環境，然後按照以下步驟進行安裝：
[*]前往 Hugo 官方網站：https://gohugo.io/，並下載適合您作業系統的最新版本。
[*]解壓縮下載的壓縮檔，將 Hugo 執行檔（hugo 或 hugo.exe）移至您的 PATH 中，以便在終端中使用。
[*]在終端中執行
以下指令來驗證 Hugo 是否安裝成功：
hugo version
步驟 2：建立新的 Hugo 專案
現在，我們將建立一個新的 Hugo 專案，這是部落格的根目錄。
[*]在 GitHub 上建立一個新的儲存庫（Repository），並命名為您希望的部落格名稱。勾選 "Initialize this repository with a README" 選項。
[*]複製建立的儲存庫 URL。
[*]在本地環境中打開終端，導向至您希望保存專案的目錄，並執行以下指令：
git clone <您剛剛複製的儲存庫 URL>
cd <您的部落格名稱>
步驟 3：選擇一個 Hugo 主題
Hugo 提供了多種主題供您選擇。您可以從官方主題庫中選擇一個喜歡的主題，或者使用其他使用者建立的自定義主題。以下是官方主題庫的連結：https://themes.gohugo.io/
[*]選擇一個主題，並從 GitHub 上的主題儲存庫中複製該主題的 URL。
[*]在您的 Hugo 專案根目錄中執行以下指令來添加主題作為子模組：
git submodule add <主題儲存庫 URL> themes/<主題名稱>
步驟 4：設定 Hugo 部落格
在專案根目錄中，執行以下指令初始化 Hugo：
hugo new site .
編輯 config.toml 檔案來設定您的部落格。您可以設定標題、語言、主題等。
接下來，編輯 config.toml 檔案中的 theme 欄位，將其設定為您所選擇的主題名稱。
基本設定完成後，您可以建立第一篇文章。在終端中執行以下指令：
hugo new posts/my-first-post.md
這將建立一篇位於 content/posts 目錄下的新文章。
步驟 5：撰寫文章內容
使用您喜歡的文字編輯器編輯剛剛建立的 my-first-post.md 檔案，並填寫內容。
步驟 6：預覽部落格
在本地預覽您的部落格，請在終端中執行以下指令：
hugo server -D
這將啟動 Hugo 的本地伺服器，並將您的部落格內容生成為靜態網站。在瀏覽器中打開 http://localhost:1313/，您就可以預覽您的部落格。
步驟 7：部署到 GitHub
當您對部落格滿意並準備好分享給他人時，將其部署到 GitHub 上：
在終端中執行以下指令：
hugo
這將在 public 目錄下生成靜態檔案。
將生成的靜態檔案推送到 GitHub 儲存庫：
git add .
git commit -m "Add my first post and deploy"
git push origin main
前往您的 GitHub 頁面，進入儲存庫設定，將 GitHub Pages 的 Source 設定為 main 分支並保存。
等待片刻後，您的 Hugo 部落格就會被成功部署到 https://<您的GitHub使用者名>.github.io/<您的部落格名稱>/。
恭喜！您已經成功在 GitHub 上建立並部署了💖
頁:
[1]