Nexsas
Hugo

Create New Page

Create new Hugo pages and layouts (list/single) using partials.

This guide covers creating new pages in the NextSaaS Hugo project (Hugo 0.141.3).

Project structure overview

nextsaas-hugo/
├── archetypes/            # Default settings for new content
├── assets/                # Assets (we use themes/assets for this)
├── content/               # Page data/content
├── data/                  # Common data (client list, etc.)
├── i18n/                  # Multilingual support
├── layouts/               # Layouts (we use themes/layouts for this)
├── static/                # Static files (we use themes/static for this)
├── themes/
│   ├── nextsass/
│   │   ├── archetypes/
│   │   ├── assets/
│   │   ├── content/
│   │   ├── i18n/
│   │   ├── layouts/
│   │   ├── static/
│   │   ├── theme.toml
│   │   ├── hugo_stats.json
├── hugo_stats.json
├── hugo.toml
├── package.json
├── README.md
└── varcel.json

Creating a page

Create the page directory and file

  1. Create a new folder under themes/nextsaas/layouts with your page name and a list.html file.
  2. If the page has detail pages, also add a single.html file.

Create the basic page structure

{{ define "main" }}

  {{ partial "shared/header-one.html"
    ( dict
      "class" "border border-stroke-2 dark:border-stroke-6 bg-accent dark:bg-background-9"
      "btnClass" "btn-primary hover:btn-white-dark dark:hover:btn-white"
    )
  }}

  <main>
    {{ partial "pages/home-page-01/hero.html" .}}
    {{ partial "pages/home-page-01/about.html" .}}
    {{ partial "pages/home-page-01/how-it-works.html" .}}
    {{ partial "pages/home-page-01/our-services.html" .}}
    {{ partial "pages/home-page-01/faq.html" .}}
    {{ partial "pages/home-page-01/timeline-integration.html" .}}
    {{ partial "pages/home-page-01/testimonial.html" .}}
    {{ partial "pages/home-page-01/blog.html" .}}
    {{ partial "shared/cta/cta-v1.html"
      ( dict
        "class" "dark:bg-background-6 bg-white"
        "badgeClass" "hidden"
        "ctaHeading" "Build a complete website using the"
        "btnClass" "hover:btn-secondary dark:hover:btn-white"
        "ctaBtnText" "Get started"
        "spanText" "assistance"
        "description" "Start your free trial today and see your ideas come to life easily and creatively."
      )
    }}
  </main>

  {{ partial "shared/footer-one.html" . }}

{{ end }}

Partial components

Partials are in themes/nextsaas/layouts/partials. Pick the partials you want and include them in your page layouts.

Customization

Customize colors and typography by editing variables.

Edit Pages

Locate and edit Hugo page layouts, navbar, footer, and sections.

Copyright © 2026