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

Workflow on Ghafoor's Personal Blog

Header Navigation

HbStack Header Navigation

Header Settings

FAQs

Home Page

Home page