冰楓論壇

標題: 在 GitHub 上建立自己的 Hugo 部落格 [打印本頁]

作者: Sdna 時間: 2023-7-25 13:38
標題: 在 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 上建立並部署了💖

作者: xmen500 時間: 2024-7-11 20:26
謝謝分享......

歡迎光臨冰楓論壇 (https://bingfong.com/)