浏览用户手册

安装到已有站点

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 服务器以预览，以及调整模块。

问题排查

导致构建失败的原因有很多。

  • 缺少之前主题的短代码。
  • 与之前的配置和参数冲突。
  • 更多请参阅问题排查页面。

如果你不知道如何解决，请随意提问。