Importing Modules in Site

This document provides an overview of using modules in your site. Modules in Hugo are a powerful way to organize and reuse content across your site. When using the hbstack framework, you work only with modules and their imports. No need to worry about the underlying file structure or layout.

Importing Modules

• To start working with modules in your site, you need to import them into your site. It is done through the site configuration file. Depending on how your configuration is set up, it is done either in hugo.yaml file directly or in module.yaml in config directory.

Syntax to import modules

1module:
2  imports:
3    - path: github.com/yourusername/yourmodule
4# If it is a module.yaml file the `module` will be omitted
5imports:
6  - path: github.com/yourusername/yourmodule

Which modules to start with

• Hbstack provides a set of core modules that are necessary for rendering your basic contents. They are packed in a one module called github.com/hbstack/meta/recommended.
• When this module is used, it automatically imports all the necessary sub-modules for you. They are shown below.

 1require (
 2  github.com/GoogleChrome/workbox v7.3.0+incompatible // indirect
 3  github.com/KaTeX/KaTeX v0.16.22 // indirect
 4  github.com/desandro/masonry v4.2.2+incompatible // indirect
 5  github.com/hbstack/base v0.6.2 // indirect
 6  github.com/hbstack/breadcrumb v0.8.0 // indirect
 7  github.com/hbstack/carousel v0.2.7 // indirect
 8  github.com/hbstack/docs v0.24.0 // indirect
 9  github.com/hbstack/featured-image v0.2.2 // indirect
10  github.com/hbstack/hb v0.16.2 // indirect
11  github.com/hbstack/heading-sign v0.2.0 // indirect
12  github.com/hbstack/meta/recommended v0.2.10 // indirect
13  github.com/hbstack/pagination v0.8.0 // indirect
14  github.com/hbstack/snackbar v0.1.2 // indirect
15  github.com/henrygd/bigger-picture v1.1.19 // indirect
16  github.com/hugomods/ascii v0.1.0 // indirect
17  github.com/hugomods/bootstrap v0.24.1 // indirect
18  github.com/hugomods/code-block-panel v0.9.0 // indirect
19  github.com/hugomods/gravatar v0.2.1 // indirect
20  github.com/hugomods/hugopress v0.5.0 // indirect
21  github.com/hugomods/icons/vendors/simple-icons v1.1.1 // indirect
22  github.com/hugomods/idb-js v0.1.0 // indirect
23  github.com/hugomods/images v0.12.3 // indirect
24  github.com/hugomods/masonry-js v0.1.0 // indirect
25  github.com/hugomods/mermaid v0.1.4 // indirect
26  github.com/hugomods/pwa v0.9.0 // indirect
27  github.com/hugomods/search v0.20.0 // indirect
28  github.com/hugomods/search-index v0.1.2 // indirect
29  github.com/hugomods/simple-icons v13.21.0+incompatible // indirect
30)

Module Configuration Settings

• Hbstack modules can be configured either directly in the hugo.yaml file or in the params.yaml file within the config directory.
• This directory can be default or custom depending on your project structure. Mostly development and production environments are used. So they can be defined separately.

Caution

Importing a module is not enough, it must be configured to work properly. Otherwise you will see error on your console / terminal.

Using Search Module

• To use the search module functionality, you need to import it in your configuration file. But as soon as you import it and do not configure it properly, an error will occur.

1ERROR [github.com/hugomods/search] no search index is specified. To rectify this.
2you can either add the "SearchIndex" to the "outputs.home" for internal indices.
3Or specify external indices with the "search.indices" parameter.

• To get rid of this error you configure this module with the following settings in configuration file.

1outputs:
2  home:
3    - SearchIndex: # "your-search-index"

Search Module Configuration

Every module when downloaded will have its own configuration settings. Hbstack or Hugomod site provides these settings in their documentation.

• If you use these settings in your configuration file and accidently remove the import statement for the module, you may encounter errors or unexpected behavior. If this module is used by another module it will be automatically included and downloaded otherwise you will see the error.

FAQs