Module-2 on Ghafoor's Personal Blog

Footer Module

noreply@example.com (AG Sayyed) — Sat, 16 May 2026 00:00:00 +0000

The footer module provides a universal footer section for HBStack sites, featuring configurable menus, social media links, copyright notices, and extensible hooks for custom content injection. It is the ideal location for placing donation buttons, affiliate disclaimers, newsletter signup links, and other monetization-related elements.

Overview

The footer module is a core component of the HBStack framework, automatically included when using the meta/recommended module set. It ships with built-in support for multi-level menus, social link generation, and several extension points via HugoPress hooks.

Importing Modules in Site

noreply@example.com (AG Sayyed) — Wed, 20 Aug 2025 18:25:28 +0000

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

Header Menus

noreply@example.com (AG Sayyed) — Mon, 11 Aug 2025 19:03:05 +0000

This comprehensive guide explains how the HBStack framework handles navigation menus in Hugo. Learn how to configure main menus, create submenus, manage section-based navigation, and customize menu appearance with icons and descriptions. The guide covers both automatic menu generation from content structure and manual menu configuration using YAML files.

How HBStack Framework Handles Menus

The HBStack framework provides a flexible menu system that combines Hugo’s built-in menu functionality with enhanced features for navigation management.

Necessary Changes

noreply@example.com (AG Sayyed) — Tue, 15 Apr 2025 10:40:31 +0000

This document outlines the necessary changes to the `package.json` file when starting a new project based on HBStack. It includes details on updating project metadata, repository links, and other essential configurations.

Modifying the package.json File

The package.json file contains critical metadata about your project, including its name, repository URL, and other identifying information. When starting a new project based on HBStack, you should update this file to reflect your own project’s details.

Header Navigation

noreply@example.com (AG Sayyed) — Mon, 14 Apr 2025 15:12:15 +0000

Advanced techniques and workflows for working with HBStack, including optimization strategies, debugging tips, and productivity enhancements.

The header by defualt is not shown unless a layout is used that is designed to show it. The header contains the following elements:
- Logo ( A Site logo)
- Title ( The title of the site)
- Navigation links ( Links to different sections of the site)
  - These links are present in Menus
- Social media icons ( Links to social media profiles)
- Search bar ( A search input field)

Header Settings

The header settings can be configured in eihter the hugo.ymal of params.yaml file.
The following are few settings:

 1hb:
 2 header:
 3 brand: PN # the brand name, leave it empty to use site's title.
 4 logo_bg: '#712cf9' # logo background color, used by logo with transparent background.
 5 # see https://hbstack.dev/en/docs/modules/socials/.
 6 socials:
 7 github: hbstack
 8 # twitter: razonyang
 9 rss: true
10 mastodon: https://techhub.social/@hbstack
11 footer:
12 # see https://hbstack.dev/en/docs/modules/socials/.
13 socials:
14 _color: true # when false, remove the color of social icons.
15 github: hbstack
16 twitter: razonyang
17 rss: true
18 mastodon: https://techhub.social/@hbstack

FAQs

Home Page

noreply@example.com (AG Sayyed) — Mon, 14 Apr 2025 15:03:22 +0000

Learn how to work effectively with HBStack, including development workflows, best practices, and common tasks for building and maintaining your site.

Home page

Hbstack does not have any built in home page which would appear at development localhost:1313 or any other port which would appear at / endpoints.
A blank area is shown under ports:9000/ in the pricture shown below.

It is to be defined by the settings. By convention the _index.md under content folder is the best choice.

1---
2title: Projects Notes
3layout: landing
4#description: Personal project tracking and documentation
5---

The above frontmatter setting is an example of how to set up a home page in HBStack. It uses the landing layout, which is suitable for a home page.
The title and description fields can be customized to reflect the purpose of your home page.
The home page can include links to various sections of your site, such as project documentation, notes, and other resources.

Important

Site Configuration

noreply@example.com (AG Sayyed) — Sun, 13 Apr 2025 21:13:46 +0000

A comprehensive guide to configuring your HBStack-based Hugo site. Learn to set up hugo.yaml, manage parameters, and optimize site settings for production.

Understanding the Hugo Configuration File

The primary configuration for your HBStack site is managed through the config/_default/hugo.yaml file. This file contains essential settings that control how your site functions, its appearance, and various technical aspects of Hugo’s behavior.

Basic Site Settings

1baseURL: https://theme.hbstack.dev/
2title: HB Starter Theme Template
3copyright: 'Copyright © 2022-{year} [Hugo Modules](https://hugomods.com/) and [HB Framework](https://hbstack.dev/). All Rights Reserved.'

baseURL: This is the root URL where your site will be published. Change this to your domain (e.g., https://yourdomain.com/).
title: The name of your site that appears in the browser tab and is used throughout the site. Customize this to your project name.
copyright: The copyright notice shown in the footer. Note the {year} placeholder is automatically replaced with the current year.

Changed Settings for the Project

1baseURL: https://agsayyed.github.io/hugo-with-docker/
2title: Hugo With Docker
3# Copyright, the {year} is the placeholder of this year.
4copyright: 'Copyright © 2024-{year} AG Sayyed. All Rights Reserved.'

Language Settings

1defaultContentLanguage: en
2defaultContentLanguageInSubdir: true

defaultContentLanguage: Sets the default language for your site (currently “en” for English).
defaultContentLanguageInSubdir: When set to true, adds the language code to URLs (e.g., /en/docs/). Set to false to remove language codes from URLs.

Site Features and Behavior

1enableRobotsTXT: true
2timeout: 120s
3enableEmoji: true
4
5title_sections: true
6title_sections_depth: 0
7title_sections_depth_dir: end

enableRobotsTXT: Generates a robots.txt file for search engine crawlers.
timeout: Sets the build timeout (120 seconds) - useful for sites with complex image processing.
enableEmoji: Allows emoji shortcodes in your content (e.g., :smile: → 😄).
title_sections: Controls whether section names appear in page titles.
title_sections_depth and title_sections_depth_dir: Control how deep section names go in titles.

URL Structure

1permalinks:
2 blog: /blog/:year/:month/:title

permalinks: Defines URL patterns for different content types. Modify this section to customize URL structures for your content.

Output Formats

1outputs:
2 home:
3 - HTML
4 - Offline
5 - RSS
6 - SearchIndex
7 - WebAppManifest

This section defines what output formats are generated. The current configuration supports:
- Standard HTML pages
- Offline pages (for PWA support)
- RSS feeds
- Search index (for site search functionality)
- Web App Manifest (for PWA installation)

Taxonomy Configuration

1taxonomies:
2 authors: authors
3 tags: tags
4 categories: categories
5 series: series

taxonomies: Defines how content is categorized. You can modify this section to add, remove, or rename taxonomies according to your organizational needs.

Build Settings

1build:
2 writeStats: true

writeStats: Required for PurgeCSS to optimize CSS files. Leave this enabled for better performance.

Markdown Rendering

1markup:
2 goldmark:
3 renderer:
4 unsafe: true
5 highlight:
6 noClasses: false
7 lineNos: true
8 lineNumbersInTable: false

goldmark.renderer.unsafe: When set to true, allows raw HTML in Markdown files.
highlight: Controls code syntax highlighting:
- noClasses: When false, uses CSS classes for styling.
- lineNos: Enables line numbers in code blocks.
- lineNumbersInTable: When false, shows line numbers inline rather than in a table format.

 1related:
 2 includeNewer: true
 3 indices:
 4 - name: keywords
 5 weight: 100
 6 - name: tags
 7 weight: 80
 8 # Additional indices...
 9 threshold: 10
10 toLower: false

This section controls how related content suggestions work:
- includeNewer: When true, newer posts can be suggested as related to older ones.
- indices: Lists factors for determining relatedness, with higher weights having more influence.
- threshold: Minimum score needed to include a page in related content.

Security Settings

1security:
2 funcs:
3 getenv:
4 - ^HUGO
5 - CI$
6 - PWD

Controls which environment variables can be accessed by Hugo templates for security purposes.

Development Environment Configuration

Hugo allows for environment-specific configuration using separate files. For local development, the project uses a specific configuration located at config/development/hugo.yaml:

Project Local Configuration

noreply@example.com (AG Sayyed) — Sat, 12 Apr 2025 09:06:46 +0000

A comprehensive guide to setting up HBStack project configuration including EditorConfig, linting, and markdown handling for code quality and consistency.

Project Configuration for Formatting and Linting

This project implements a comprehensive approach to code formatting, linting, and markdown handling. Below is a detailed explanation of how these components work together to maintain code quality and consistency.

EditorConfig (.editorconfig)

The .editorconfig file provides basic code style definitions that work across different editors and IDEs.