Master HBStack configuration parameters to customize your Hugo Bootstrap site. Learn site-level vs page-level configuration parameter hierarchy best practices and practical examples for effective HBStack framework customization.
Master HBStack configuration parameters to customize your Hugo Bootstrap site. This comprehensive guide covers parameter types, configuration hierarchy, best practices, and practical examples to help you effectively configure and customize your HBStack-powered website.
Configuration parameters are the foundation of customizing your HBStack (Hugo Bootstrap) Framework. They control everything from site appearance and behavior to module-specific functionality, allowing you to tailor your Hugo site to meet specific requirements.
Parameters are key-value pairs that define:
Apply globally across your entire website:
1# config/_default/params.yaml
2title: 'My HBStack Site'
3description: 'A modern Hugo site with Bootstrap'
4author: 'Your Name'
5copyright: '© 2025 Your Company'
6
7# HBStack specific site parameters
8hb:
9 theme:
10 color: 'primary'
11 mode: 'auto' # light, dark, auto
12 header:
13 sticky: true
14 brand: 'My Brand'
15 footer:
16 poweredBy: true
Override site settings for specific pages:
1---
2title: 'Special Page'
3description: 'Custom description for this page'
4params:
5 hero:
6 enable: true
7 title: 'Custom Hero Title'
8 subtitle: 'Page-specific hero content'
9 sidebar:
10 enable: false
11---
Configure individual HBStack modules:
1# config/_default/params.yaml
2hb:
3 search:
4 enable: true
5 provider: 'fuse'
6 placeholder: 'Search the site...'
7 analytics:
8 google: 'GA-MEASUREMENT-ID'
9 comments:
10 provider: 'disqus'
11 disqus:
12 shortname: 'your-disqus-shortname'
1# hugo.yaml (Root level - Hugo core settings)
2baseURL: 'https://example.com'
3languageCode: 'en-us'
4title: 'My HBStack Site'
5theme: 'github.com/hbstack/theme'
6
7# Build configuration
8buildDrafts: false
9buildFuture: false
10buildExpired: false
11
12# Content management
13paginate: 10
14enableGitInfo: true
15enableRobotsTXT: true
1# config/_default/params.yaml (HBStack parameters)
2# Global site parameters
3brand: 'HBStack'
4description: 'Modern Hugo framework with Bootstrap'
5keywords: ['hugo', 'bootstrap', 'framework']
6images: ['images/logo.png']
7
8# Social media
9social:
10 github: 'username'
11 twitter: 'username'
12 email: 'contact@example.com'
13
14# HBStack modules configuration
15hb:
16 header:
17 brand: 'My Site'
18 logo: 'images/logo.svg'
19 sticky: true
20 breakpoint: 'lg'
21
22 footer:
23 socials:
24 github: 'username'
25 twitter: 'username'
26 poweredBy: true
27 copyright: '© {year} {brand}. All rights reserved.'
28
29 blog:
30 list:
31 paginate: 12
32 sort: 'date'
33 order: 'desc'
34 post:
35 toc: true
36 breadcrumb: true
37 navPrev: true
38 navNext: true
1# config/_default/module.yaml
2hugoVersion:
3 extended: true
4 min: '0.100.0'
5
6imports:
7 - path: github.com/hbstack/header
8 - path: github.com/hbstack/footer
9 - path: github.com/hbstack/blog
10 mounts:
11 - source: content/posts
12 target: content/blog
13 - path: github.com/hbstack/docs
14 mounts:
15 - source: content/docs
16 target: content/docs
1# config/_default/languages.yaml
2en:
3 languageName: 'English'
4 weight: 1
5 params:
6 hb:
7 header:
8 brand: 'My English Site'
9
10zh-cn:
11 languageName: '中文'
12 weight: 2
13 params:
14 hb:
15 header:
16 brand: '我的中文网站'
1# Create configuration structure
2mkdir -p config/_default
3mkdir -p config/development
4mkdir -p config/production
5
6# Create core configuration files
7touch config/_default/hugo.yaml
8touch config/_default/params.yaml
9touch config/_default/module.yaml
10touch config/_default/menus.yaml
1# config/_default/params.yaml
2# Essential site parameters
3title: 'Your Site Title'
4description: 'Site description for SEO'
5author: 'Your Name'
6copyright: '© 2025 Your Name'
7
8# SEO and metadata
9images: ['images/og-image.png']
10keywords: ['keyword1', 'keyword2', 'keyword3']
11
12# HBStack theme configuration
13hb:
14 theme:
15 # Color scheme: primary, secondary, success, info, warning, danger, light, dark
16 color: 'primary'
17 # Theme mode: light, dark, auto
18 mode: 'auto'
19
20 # Header configuration
21 header:
22 brand: 'Your Brand'
23 logo: 'images/logo.svg'
24 sticky: true
25 # Breakpoint for responsive header: sm, md, lg, xl
26 breakpoint: 'lg'
27 # Navigation style
28 style: 'navbar'
29
30 # Footer configuration
31 footer:
32 # Show powered by HBStack
33 poweredBy: true
34 # Social media links
35 socials:
36 github: 'your-username'
37 twitter: 'your-username'
38 linkedin: 'your-username'
39 email: 'contact@example.com'
1# Blog module configuration
2hb:
3 blog:
4 # Post list configuration
5 list:
6 paginate: 12
7 sort: 'date' # date, title, weight
8 order: 'desc' # desc, asc
9 style: 'card' # card, list
10
11 # Single post configuration
12 post:
13 toc: true # Table of contents
14 breadcrumb: true # Breadcrumb navigation
15 navPrev: true # Previous post navigation
16 navNext: true # Next post navigation
17 readingTime: true # Show reading time
18 wordCount: true # Show word count
19
20 # Post meta information
21 meta:
22 author: true
23 date: true
24 categories: true
25 tags: true
1# config/development/params.yaml
2# Development-specific parameters
3environment: 'development'
4debug: true
5
6hb:
7 analytics:
8 enable: false # Disable analytics in development
9 comments:
10 enable: false # Disable comments in development
1# config/production/params.yaml
2# Production-specific parameters
3environment: 'production'
4debug: false
5
6hb:
7 analytics:
8 enable: true
9 google: 'G-XXXXXXXXXX'
10 comments:
11 enable: true
12 provider: 'disqus'
13 disqus:
14 shortname: 'your-disqus-shortname'
Understanding parameter precedence is crucial for effective configuration:
config/production/)config/_default/) 1# config/_default/params.yaml (Site-level default)
2hb:
3 blog:
4 post:
5 toc: true
6 breadcrumb: true
7
8# config/production/params.yaml (Environment override)
9hb:
10 blog:
11 post:
12 toc: true
13 breadcrumb: false # Overrides default
14
15# content/blog/special-post/index.md (Page-level override)
16---
17title: "Special Post"
18params:
19 toc: false # Overrides both site and environment settings
20 breadcrumb: true # Uses production setting
21---
1# Custom theme configuration
2hb:
3 theme:
4 color: 'primary'
5 mode: 'auto'
6
7 # Custom CSS and JS
8 assets:
9 css: ['css/custom.css']
10 js: ['js/custom.js']
11
12 # Font configuration
13 fonts:
14 google:
15 families: ['Inter:400,500,600,700']
1# SEO configuration
2params:
3 # Basic SEO
4 description: 'Your site description'
5 keywords: ['hugo', 'bootstrap', 'framework']
6 images: ['images/og-image.png']
7
8 # Social media
9 social:
10 twitter: 'your_handle'
11 github: 'your_username'
12
13# Analytics and tracking
14hb:
15 analytics:
16 google: 'G-XXXXXXXXXX'
17 gtag: 'GT-XXXXXXXXX'
18
19 # Cookie consent
20 cookies:
21 enable: true
22 message: 'This site uses cookies to improve your experience.'
1# Performance-related parameters
2hb:
3 # Image processing
4 images:
5 responsive: true
6 lazyLoading: true
7 formats: ['webp', 'jpg']
8
9 # Code highlighting
10 syntax:
11 lineNos: true
12 style: 'github'
13
14 # Minification
15 minify:
16 css: true
17 js: true
18 html: true
1# config/_default/languages.yaml
2en:
3 languageName: 'English'
4 weight: 1
5 title: 'My English Site'
6 params:
7 description: 'English site description'
8 hb:
9 header:
10 brand: 'My Brand'
11
12es:
13 languageName: 'Español'
14 weight: 2
15 title: 'Mi Sitio en Español'
16 params:
17 description: 'Descripción del sitio en español'
18 hb:
19 header:
20 brand: 'Mi Marca'
1# Custom module with specific parameters
2hb:
3 # Documentation module
4 docs:
5 sidebar:
6 enable: true
7 position: 'left'
8 collapsible: true
9 breadcrumb:
10 enable: true
11 style: 'modern'
12
13 # Search functionality
14 search:
15 enable: true
16 provider: 'fuse' # fuse, algolia, google
17 placeholder: 'Search documentation...'
18 options:
19 threshold: 0.3
20 keys: ['title', 'content']
Problem: Configuration changes don’t appear on the site.
Solutions:
1# Clear Hugo cache
2hugo --gc
3
4# Restart Hugo server
5hugo server --disableFastRender
6
7# Check configuration syntax
8hugo config
Problem: HBStack module isn’t working correctly.
Debug Steps:
1# 1. Verify module import in hugo.yaml
2module:
3 imports:
4 - path: github.com/hbstack/module-name
5
6# 2. Check module-specific parameters
7hb:
8 module-name:
9 enable: true # Ensure module is enabled
10
11# 3. Verify Hugo version compatibility
12hugoVersion:
13 min: '0.100.0'
14 extended: true
Problem: Different behavior between development and production.
Solution:
1# Test with specific environment
2hugo server --environment production
3hugo server --environment development
4
5# Check merged configuration
6hugo config --environment production
hugo config to check for errorsAfter mastering configuration parameters:
Pro Tip: Use hugo config command to see your final merged configuration and debug parameter issues effectively.