#教學 #Hugo

建構 Hugo 專案及主題

建構 Hugo 專案及主題

1. 檢查 Hugo 與 npm 是否安裝成功

在終端機 (Terminal) 或命令提示字元 (Command Prompt) 中輸入以下指令，確認 Hugo 與 npm 是否已成功安裝：

hugo version
npm -v

2. 建立 Hugo 新專案

  • 開啟終端機並切換到您想要放置專案的目錄

  • 執行以下指令創建新專案: 其中 mysite 為您的專案名稱，您可以自行替換。

    hugo new site mysite

3. 進入專案目錄，檢視 Hugo 檔案結構 

cd mysite

Hugo 檔案結構

mysite/ ├── hugo.toml ├── archetypes ├── data ├── layouts │ ├── index.html │ ├── single.html │ ├── list.html │ └── partials │ ├── header.html │ └── footer.html ├── static │ ├── css │ ├── js │ └── images ├── themes │ ├── my-theme │ ├── archetypes │ ├── assets │ ├── layouts │ ├── static │ └── config.toml ├── content │ ├── about │ │ └── index.md │ ├── posts │ │ ├── 2023-04-01-hello-world.md │ │ └── 2023-04-02-another-post.md

Hugo 專案的結構設計得相當直觀，讓使用者能夠輕鬆地管理網站內容和樣式。以下詳細解說各個目錄與檔案的作用：

根目錄

  • config.toml: 專案的主要配置文件，用於設定網站的標題、作者、語言、主題、網址等資訊。
  • content: 存放網站內容的目錄，如文章、頁面等。
  • archetypes: 用於創建新內容的模板，例如新文章、新頁面等。
  • data: 存放網站的資料檔案，例如網站導覽、社交媒體連結等。
  • layouts: 存放網站的佈局模板，決定網站的整體樣式和結構。
  • static: 存放靜態資產，如 CSS、JavaScript、圖片等。
  • themes: 存放主題的目錄，每個主題都是一個獨立的資料夾。

各目錄詳細說明

  • content:
    • 文章: 通常以 Markdown 格式撰寫，並按照日期歸檔在子目錄下。
    • 頁面: 存放不屬於文章類型的頁面，例如「關於我」、「聯絡我們」等。
    • sections: 用於組織內容，例如「部落格」、「作品集」等。
  • layouts:
    • index.html: 首頁模板。
    • single.html: 文章頁面模板。
    • list.html: 列表頁面模板。
    • partials: 存放部分模板，例如頁首、頁尾、導航欄等。
  • themes:
    • 主題目錄: 每個主題都是一個獨立的資料夾，包含該主題的佈局、樣式、部分模板等。

創建 Theme 主題

  1. 創建 Theme 目錄: 在你的 Hugo 项目目錄下，創建一個新的目錄，例如
hugo new theme my-theme

主題結構

themes/my-theme/ ├── archetypes/ │ └── post.md ├── assets/ │ ├── css/ │ │ └── style.css │ └── js/ │ └── script.js ├── data/ │ └── menu.toml ├── layouts/ │ ├── base.html │ ├── partials/ │ │ ├── footer.html │ │ └── header.html │ ├── list.html │ └── single.html ├── static/ │ └── favicon.ico └── config.toml

  1. 複製基礎模板: 你可以從現有的 Hugo Theme 複製一份作為基礎，或者從頭開始建立。若從頭開始，則需要建立上述的目錄結構並創建基本的模板文件。
  2. 設計佈局:
    • base.html: 這是網站的基礎模板，定義了頁面的整體結構，包括 head、body、footer 等部分。
    • partials: 存放一些可重複使用的模板片段，例如 header、footer、sidebar 等。
    • list.html: 用於展示列表頁面的模板，例如文章列表、標籤列表等。
    • single.html: 用於展示單篇文章或頁面的模板。
  3. 創建樣式: 在 assets/css 目錄下創建 CSS 檔案，定義網站的樣式。
  4. 添加 JavaScript: 在 assets/js 目錄下創建 JavaScript 檔案，實現互動功能。
  5. 配置 Theme: 在 config.toml 檔案中配置 Theme 的相關參數，例如網站標題、作者、語言等。

使用自建 Theme

在你的 Hugo 專案的 hugo.toml (建議改用 hugo.yml) 檔案中，設定 theme 參數為你自建 Theme 的名稱：

theme = "my-theme"

然後執行 hugo server 命令，即可在本地預覽你的網站。

更多資訊

Hugo 官方技術文件 安裝 Hugo 及 npm

標籤

#Tags/Projects #Tags/Themes