使用 Git Submodule 安裝 Hextra 主題 | 點燈坊

Hextra 主題有多種安裝方式，若想修改 Hextra 主題，且想獲得最乾淨的原始 Hugo 專案，則要使用 Git Submodule 方式安裝。

Version

Hextra 0.7

Create New Site

$ hugo new site hextra-git-lab --format json

• hugo new site：使用預設的骨架建立新網站
• --format json : 以 JSON 格式建立設定檔

Add Hextra Theme

$ git init
$ git submodule add https://github.com/imfing/hextra.git themes/hextra

• git init：因為要使用 Git Submodule 安裝 Hextra 主題，因此要先使用 git init 建立 git repository
• git submodule add：使用 Git Submodule 安裝 Hextra 主題

Configuration

hugo.json

{
  "baseURL": "https://example.org/",
  "languageCode": "en-us",
  "title": "My New Hugo Site",
  "theme": "hextra",
  "menu": {
    "main": [
      {
        "name": "Search",
        "weight": 5,
        "params": {
          "type": "search"
        }
      }
    ]
  }
}

Line 5

"theme": "hextra",

• 設定 Hugo 使用主題為 hextra

Line 6

"menu": {
  "main": [
    {
      "name": "Search",
      "weight": 5,
      "params": {
        "type": "search"
      }
    }
  ]
}

• 官網並沒有提到這個設定，但若沒加此段設定，會在成 JavaScript 執行錯誤

Add Content

$ hugo new content/_index.md
$ hugo new content/docs/_index.md

• 使用 hego new 建立 markdown 檔案

Preview the Site

$ hugo server --buildDrafts --disableFastRender

• 啟動 development mode 的 Web Server

.gitignore

.gitignore

# Hugo output
public/
resources/
.hugo_build.lock

# Editor
.vscode/

# NPM
node_modules

# WebStorm
.idea

# macOS
.DS_Store

• 更新 .gitignore 加入 NPM / WebStorm 與 macOS 部分

Update Git Submodules

$ git submodule update --remote

• 更新所有 Git Submodule

Update Theme

$ git submodule update --remote themes/hextra

• 只更新 Hextra 主題

Conclusion

• 若想修改 Hextra 的 layout 或 CSS，則必須使用 Git Submodule 方式安裝 Hextra 主題，在 themes/hextra 下可看到完整的源代碼
• TailwindCSS JIT 已經整合在 Hextra 主題內，只要修改其 utility class，就可直接在 development mode 看到即時改變

Reference

Hextra, Setup Hextra as Git submodule