Extend & Customize HugoBlox

HugoBlox is designed to be extensible. Whether you need a simple CSS tweak or a complex third-party integration, you can do it without modifying the core theme files.

Hooks

Inject custom code (like analytics, popups, or meta tags) into specific parts of your site using Hooks.

Example: Add a Script

To add a custom script to the end of the body:

1. Create layouts/partials/hooks/body-end/myscript.html.

2. Add your code:

   <script>
     console.log("Hello from custom hook!");
   </script>

Custom Styling (CSS)

Override or add new styles.

1. Create assets/css/custom.css.

2. Add your CSS.

   /* assets/css/custom.css */
   .my-custom-class {
     color: red;
   }

Overriding Components

Hugo's Lookup Order allows you to replace any official layout file by creating a copy in your local layouts/ folder.

Advanced Customization

Creating New Blocks

Create custom blocks using Go HTML templates or Preact components, with optional co-located style.css for Tailwind-powered styling.

See the full Block Development guide for details on both approaches.

Theme-Aware JavaScript

Listen for theme changes (Light/Dark mode) in your custom scripts.

document.addEventListener('hbThemeChange', (e) => {
    const isDark = e.detail.isDarkTheme();
    console.log('Theme changed to:', isDark ? 'Dark' : 'Light');
});