使用 Hugo Module 安裝 Hextra 主題 | 點燈坊

Hextra 主題有多種安裝方式，若不想修改 Hextra 主題，且想獲得最乾淨的原始 Hugo 專案，則使用 Hugo Module 也是不錯方式。

Version

Hextra 0.7

Create New Site

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

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

Add Hextra Theme

$ hugo mod init github.com/oomusou/hextra-module-lab
$ hugo mod get github.com/imfing/hextra

• hugo mod init：將此專案以 Hugo module 形式初始化
• hugo mod get：使用 Hugo Module 安裝 Hextra 主題

Configuration

hugo.json

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

Line 5

"module": {
  "imports": [
    { "path": "github.com/imfing/hextra" }
  ]
},

• 設定 Hextra 主題的路徑

Line 10

"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 Modules

$ hugo mod get -u

• 更新所有 Hugo Module

Update Theme

$ hugo mod get -u github.com/imfing/hextra

• 只更新 Hextra 主題

Conclusion

• 若使用 Hugo Module 安裝 Hextra 主題，在本地並不包含任何 Hextra 的源代碼，若想用修改 Hextra 的 layout 或 CSS 則不適用此方法
• 若只想使用 Hextra 主題並不想修改其源代碼，可以使用此方式從頭開始建立自己的 Hugo 專案

Reference

Hextra, Setup Hextra as Hugo module