- UID
- 397852
- 帖子
- 10
- 主題
- 4
- 精華
- 0
- 積分
- 45
- 楓幣
- 309
- 威望
- 26
- 存款
- 600
- 贊助金額
- 0
- 推廣
- 0
- GP
- 42
- 閱讀權限
- 10
- 性別
- 女
- 在線時間
- 372 小時
- 註冊時間
- 2023-7-25
- 最後登入
- 2024-11-6
|
本帖最後由 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 是否安裝成功:
步驟 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:
編輯 config.toml 檔案來設定您的部落格。您可以設定標題、語言、主題等。
接下來,編輯 config.toml 檔案中的 theme 欄位,將其設定為您所選擇的主題名稱。
基本設定完成後,您可以建立第一篇文章。在終端中執行以下指令:
- hugo new posts/my-first-post.md
複製代碼
這將建立一篇位於 content/posts 目錄下的新文章。
步驟 5:撰寫文章內容
使用您喜歡的文字編輯器編輯剛剛建立的 my-first-post.md 檔案,並填寫內容。
步驟 6:預覽部落格
在本地預覽您的部落格,請在終端中執行以下指令:
這將啟動 Hugo 的本地伺服器,並將您的部落格內容生成為靜態網站。在瀏覽器中打開 http://localhost:1313/,您就可以預覽您的部落格。
步驟 7:部署到 GitHub
當您對部落格滿意並準備好分享給他人時,將其部署到 GitHub 上:
在終端中執行以下指令:
這將在 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 上建立並部署了💖
|
|