DOCSEARCHbyAlgolia
Submit Docs

HugoBlox Kit Documentation

repository·main·Indexed 27 days ago

https://github.com/hugoblox/kit

An open-source framework and page builder for Hugo used to create professional websites like portfolios, blogs, and landing pages using structured Markdown. The kit includes a Tailwind CSS v4 color system, an analytics module, and a variety of pre-built blocks such as Contact Info, Collection, CTA Button List, and CTA Card.

Tokens
18.9K
Snippets
41
Records
104
Agent score
91%

What's inside HugoBlox Kit

  1. Overview of HugoBlox content types

    main

    HugoBlox includes over 20 built-in structured content types with complete Front Matter, metadata, and layouts. Common types include:

    • Landing Pages: Hero sections, features, pricing tables, testimonials, and CTA modules.
    • Blogs & Articles: Tags, categories, authors, and SEO metadata.
    • Portfolios & Projects: Showcasing work, tech stacks, and imagery.
    • Academic/Publication Pages: Support for academic papers with BibTeX/DOI citation workflows.
    • Documentation: Searchable docs with sidebar navigation and version control.
    • Teams & Profiles: Avatars, social links, and publication lists.
    • Events & Talks: Conferences, workshops, and presentation slides.
    • Slides: Markdown-based slides using reveal.js.
    • Resumes/CVs: Structured professional pages with PDF export capability.
    • Scientific Content: Native rendering for .ipynb (Jupyter Notebooks) and LaTeX math formulas.

  3. Use the CTA Button List block

    main

    The CTA Button List block is a modern, conversion-focused component designed to present multiple call-to-action options in an organized, visually appealing format. It is suitable for creating 'link in bio' pages, resource collections, service offerings, contact options, download centers, or partner links.

    Key Features

    • Icon Integration: Add icons to buttons for visual impact.
    • Hover Animations: Includes smooth scale and transition effects.
    • Responsive Design: Optimized sizing and spacing for all devices.
    • External Link Support: Built-in support for external links with proper security attributes.
    • Markdown Support: Allows rich text formatting for button labels.
    • Clean Styling: Uses a modern card-based design with subtle shadows and borders.

  4. Understand the Hugo Blox Tailwind CSS v4 Color System

    main

    Hugo Blox uses Tailwind CSS v4's automatic utility generation to manage colors. The system is built on three layers:

    1. Theme Configuration (config/theme.css): Defines the core @theme block. Colors defined here automatically generate all standard Tailwind utilities (background, text, border, hover, dark mode, gradients, etc.).
    2. Theme Files (themes/*.css): These files allow for easy theme switching by overriding CSS variables like --color-primary-* and --color-secondary-* without redefining utilities.
    3. Custom Utilities (color-utilities.css): Contains only non-auto-generated custom colors (e.g., hb-dark).

    All colors support 11 shades: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950.

  5. Control branding visibility per slide

    main

    Use HTML comments within your Markdown slides to hide branding elements on specific slides:

    • <!-- no-branding -->: Hides all branding (logo, header, and footer).
    • <!-- no-header -->: Hides only the header and logo.
    • <!-- no-footer -->: Hides only the footer.
    ---

<!-- no-branding -->

## Full Screen Image Slide

This slide will have no branding overlays.

  6. Configure Hugo outputs for Netlify headers and redirects

    main

    After installing the module, you must instruct Hugo to generate the headers and redirects files by adding them to your outputs configuration in config/_default/config.yaml. This allows the plugin to automatically create the _headers and _redirects files in your public folder.

    outputs:
  home: [..., headers, redirects]

  7. Deploy HugoBlox to static hosting

    main

    Since HugoBlox produces pure static HTML, you can deploy your site to any platform that supports static hosting. Recommended platforms include:

    • Netlify
    • Vercel
    • Cloudflare Pages
    • GitHub Pages

    There is no database or runtime required, allowing for free hosting on most of these services.

  8. Configure the Research Areas Block

    main

    The research-areas block allows you to display research focus areas using various layouts (Cards, Hexagon, or Timeline). You can customize each area with icons, emojis, images, metrics (team size, publications, funding), and status badges.

    sections:
  - block: research-areas
    content:
      title: Research Focus Areas
      subtitle: Advancing Science Through Innovation
      text: Our lab conducts cutting-edge research across multiple domains
      items:
        - name: Computational Biology
          description: Developing algorithms for genomic analysis and protein structure prediction
          emoji: 🧬
          gradient: from-green-400 to-blue-500
          status: active
          topics:
            - Genomics
            - Proteomics
          team_size: 12 researchers
          publications: 45 papers
          funding: $2.5M
          cta:
            text: Learn More
            url: /research/computational-biology
    design:
      layout: cards

  10. Use the Resume Languages Block

    main
    The Resume Languages block is a visual component designed to showcase multilingual capabilities using circular progress indicators. It displays language proficiency levels with percentage values and adapts its layout from vertical (mobile) to horizontal (desktop) based on the screen size. The progress bars automatically utilize your site's primary brand colors.

  11. Use the CTA Image Paragraph block

    main

    The cta-image-paragraph block is a storytelling component designed to combine imagery, descriptive content, feature highlights, and calls-to-action (CTAs) in an alternating layout. It is optimized for product showcases, service explanations, and brand storytelling.

    Key Capabilities

    • Alternating Layout: Automatically alternates images between left and right positions to create visual rhythm.
    • Responsive & Modern Images: Supports multiple sizes, WebP format, and animated GIFs.
    • Feature Lists: Allows highlighting key benefits using customizable icons.
    • Markdown Support: Titles and descriptions support full Markdown syntax.
    • Mobile Optimization: Content stacks vertically on mobile devices for a seamless experience.
    • Conversion Focused: Includes strategic button placement for CTAs.

  12. Best practices for CTA Button List

    main

    To maximize engagement and conversion when using the CTA Button List block, follow these recommendations:

    • Visual Distinction: Use contrasting icons to make each button stand out.
    • Concise Copy: Keep button text short but descriptive.
    • Strategic Ordering: Arrange buttons based on priority or the user journey importance.
    • Brand Alignment: Test different icon styles to ensure they match your brand aesthetic.