瀏覽文檔

安裝到已有站點

HB Framework Authors 2023年6月18日 2 分鐘閱讀 安裝 文檔
本頁內容

本文介紹如何安裝 HB 和模塊到已有站點。

初始化 Hugo 模塊

我們需要初始化站點，使其作爲一個模塊，以使用 Hugo 模塊。請將 github.com/user/repo 替換爲你的。

1hugo mod init github.com/user/repo

安裝構建工具

HB 要求安裝一些構建工具。

調整配置

本教程使用推薦的元模塊作爲使用 HB 的起點，你可以在模塊頁面找到更多可用的模塊。

  1. 如果存在 theme，則刪除。
  2. 確保設置了以下必要的配置。

hugo.toml

 1[build]
 2  writeStats = true
 3[markup]
 4  [markup.goldmark]
 5    [markup.goldmark.renderer]
 6      unsafe = true
 7  [markup.highlight]
 8    lineNos = true
 9    lineNumbersInTable = false
10    noClasses = false
11[module]
12[[module.imports]]
13    path = 'github.com/hbstack/meta/recommended'
14[outputs]
15  home = ['HTML', 'Offline', 'RSS', 'SearchIndex', 'WebAppManifest']
16[permalinks]
17  blog = '/blog/:year/:month/:title'
18[taxonomies]
19  authors = 'authors'
20  categories = 'categories'
21  series = 'series'
22  tags = 'tags'

hugo.yaml

 1build:
 2  writeStats: true
 3markup:
 4  goldmark:
 5    renderer:
 6      unsafe: true
 7  highlight:
 8    lineNos: true
 9    lineNumbersInTable: false
10    noClasses: false
11module:
12  imports:
13  - path: github.com/hbstack/meta/recommended
14outputs:
15  home:
16  - HTML
17  - Offline
18  - RSS
19  - SearchIndex
20  - WebAppManifest
21permalinks:
22  blog: /blog/:year/:month/:title
23taxonomies:
24  authors: authors
25  categories: categories
26  series: series
27  tags: tags

hugo.json

 1{
 2   "build": {
 3      "writeStats": true
 4   },
 5   "markup": {
 6      "goldmark": {
 7         "renderer": {
 8            "unsafe": true
 9         }
10      },
11      "highlight": {
12         "lineNos": true,
13         "lineNumbersInTable": false,
14         "noClasses": false
15      }
16   },
17   "module": {
18      "imports": [
19         {
20            "path": "github.com/hbstack/meta/recommended"
21         }
22      ]
23   },
24   "outputs": {
25      "home": [
26         "HTML",
27         "Offline",
28         "RSS",
29         "SearchIndex",
30         "WebAppManifest"
31      ]
32   },
33   "permalinks": {
34      "blog": "/blog/:year/:month/:title"
35   },
36   "taxonomies": {
37      "authors": "authors",
38      "categories": "categories",
39      "series": "series",
40      "tags": "tags"
41   }
42}

更改 PWA 緩存策略

爲了避免本地環境的緩存問題，建議更改 PWA 緩存策略。

config/development/params.toml

 1[pwa]
 2  [pwa.caches]
 3    [pwa.caches.font]
 4      strategy = 'network-first'
 5    [pwa.caches.image]
 6      strategy = 'network-first'
 7    [pwa.caches.script]
 8      strategy = 'network-first'
 9    [pwa.caches.style]
10      strategy = 'network-first'

config/development/params.yaml

 1pwa:
 2  caches:
 3    font:
 4      strategy: network-first
 5    image:
 6      strategy: network-first
 7    script:
 8      strategy: network-first
 9    style:
10      strategy: network-first

config/development/params.json

 1{
 2   "pwa": {
 3      "caches": {
 4         "font": {
 5            "strategy": "network-first"
 6         },
 7         "image": {
 8            "strategy": "network-first"
 9         },
10         "script": {
11            "strategy": "network-first"
12         },
13         "style": {
14            "strategy": "network-first"
15         }
16      }
17   }
18}

預覽和調整

現在你應該可以啓動 Hugo 服務器以預覽，以及調整模塊。

問題排查

導致構建失敗的原因有很多。

  • 缺少之前主題的短代碼。
  • 與之前的配置和參數衝突。
  • 更多請參閱問題排查頁面。

如果你不知道如何解決，請隨意提問。