Configuration Parameters

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.


📋 Understanding Configuration Parameters

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.

What Are Configuration Parameters?

Parameters are key-value pairs that define:

  • Site behavior: How your site functions and operates
  • Visual appearance: Styling, layout, and theme customization
  • Module configuration: Settings for individual HBStack modules
  • Content processing: How Hugo handles and displays content
  • Feature toggles: Enable or disable specific functionality

🏗️ Parameter Types and Scope

Site-Level Parameters

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

Page-Level Parameters

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

Module-Specific Parameters

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'

⚙️ Configuration File Structure

Primary Configuration Files

1. Hugo Core Configuration

 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

2. Parameters Configuration

 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

Advanced Configuration Structure

Modular Configuration

 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

Language-Specific Configuration

 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: '我的中文网站'

🔧 Configuration Process and Best Practices

Step 1: Plan Your Configuration

  1. Identify requirements: List features and customizations needed
  2. Choose configuration approach: Single file vs modular configuration
  3. Plan parameter hierarchy: Site-level vs module-specific settings

Step 2: Implement Configuration

 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

Step 3: Configure Parameters

Basic Site Configuration

 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'

Module-Specific Configuration Examples

 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

Step 4: Environment-Specific Configuration

Development Configuration

 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

Production Configuration

 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'

📊 Parameter Hierarchy and Precedence

Understanding parameter precedence is crucial for effective configuration:

Precedence Order (Highest to Lowest)

  1. Page frontmatter parameters
  2. Environment-specific configuration (config/production/)
  3. Default configuration (config/_default/)
  4. Theme default values

Practical Example

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

🎯 Common Configuration Patterns

Theme Customization

 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']

SEO and Analytics

 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.'

Performance Optimization

 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

⚡ Advanced Configuration Examples

Multi-language Setup

 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'

Custom Module Configuration

 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']

🔍 Troubleshooting Configuration

Common Issues and Solutions

Issue 1: Parameters Not Applied

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

Issue 2: Module Not Loading

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

Issue 3: Environment-Specific Issues

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

📚 Best Practices Summary

✅ Configuration Best Practices

  1. Organize by purpose: Group related parameters together
  2. Use environment-specific configs: Separate development from production
  3. Comment your configurations: Document complex or custom settings
  4. Validate syntax: Use hugo config to check for errors
  5. Version control: Keep all configuration files in source control
  6. Test thoroughly: Verify changes in different environments

⚠️ Common Pitfalls to Avoid

  1. Don’t mix Hugo core and theme parameters in the same section
  2. Avoid hardcoding environment-specific values in default config
  3. Don’t ignore parameter precedence - understand override behavior
  4. Avoid complex nesting that makes configuration hard to maintain
  5. Don’t forget to restart Hugo server after configuration changes

🎓 Next Steps

After mastering configuration parameters:

  1. Explore specific modules: Dive deep into individual HBStack modules
  2. Custom theme development: Create your own theme configurations
  3. Performance optimization: Fine-tune parameters for better performance
  4. Advanced integrations: Configure external services and APIs

FAQs