Landing Pages

Build beautiful landing pages with the drag-and-drop block builder. Combine hero sections, features, testimonials, and more — all from Markdown.

Build beautiful, modular landing pages by stacking content blocks — no HTML or templates required. Each section of your page (hero, features, team, contact form, etc.) is a self-contained block that you configure in YAML.

Visual Editor Available

The easy way: Use Ownable CMS to configure your homepage visually in VS Code — no YAML editing required!

Install Ownable CMS →

How Landing Pages Work

Landing pages use type: landing and define their content as a list of sections (blocks). Each block has a block: type and a content: configuration.

content/_index.md

---
title: Home
type: landing

sections:
  - block: hero
    content:
      title: Welcome to My Site
      text: A short intro paragraph.
      primary_action:
        text: Get Started
        url: /about/
      secondary_action:
        text: Learn More
        url: /docs/

  - block: features
    content:
      title: Key Features
      items:
        - name: Fast
          icon: bolt
          description: Lightning-fast static HTML.
        - name: Secure
          icon: shield
          description: No databases to hack.

  - block: cta
    content:
      title: Ready to start?
      text: Join thousands of researchers.
      button:
        text: Sign Up Free
        url: /signup/
---

File Structure

_index.md # Homepage landing page

_index.md # About landing page (optional)

Landing pages typically use _index.md (with underscore) to serve as the index page of a section. The homepage is always content/_index.md.

Available Blocks

HugoBlox ships with 50+ content blocks. Here are the most popular:

Hero

Full-width intro section with title, text, image, and call-to-action buttons.

Features

Grid of feature cards with icons, titles, and descriptions.

About

Bio section with avatar, name, role, and social links.

Experience

Timeline of work experience, education, or milestones.

Skills

Visual skill bars or tag clouds.

Collection

Auto-generated list of posts, publications, projects, or events.

Contact

Contact form, address, and map.

CTA

Call-to-action banner with button.

See the Page Builder guide for the full list of blocks and their configuration options.

Customizing Blocks

Every block supports common options alongside its specific content:

sections:
  - block: hero
    id: intro             # HTML anchor ID (for scroll-to links)
    content:
      title: Hello World
    design:
      background:
        color: '#1a1a2e'
        text_color_light: true
      spacing:
        padding: ['80px', '0', '80px', '0']
      css_class: 'dark'

Design Options

Option	Description
`background.color`	Background color (hex)
`background.image.filename`	Background image
`background.text_color_light`	Use light text on dark backgrounds
`spacing.padding`	Top, right, bottom, left padding
`css_class`	Custom CSS class
`columns`	Number of columns (for grid blocks)

Multi-Page Landing Sites

You can create landing pages for any section, not just the homepage:

content/about/_index.md

---
title: About Us
type: landing

sections:
  - block: hero
    content:
      title: Our Team
  - block: people
    content:
      sort_by: Params.last_name
---

Quick Reference

Field	Type	Description
`type`	`landing`	Required. Tells HugoBlox to render as a landing page
`sections`	`list`	List of block configurations
`sections[].block`	`string`	Block type name (e.g., `hero`, `features`)
`sections[].id`	`string`	Optional HTML anchor ID
`sections[].content`	`object`	Block-specific content configuration
`sections[].design`	`object`	Visual design overrides