Run any Skill in Manus with one click

hugo-themes

Stars3

Forks1

UpdatedFebruary 8, 2026 at 08:47

This skill should be used when the user asks about Hugo themes, installing a theme, customizing a theme, overriding theme layouts or partials, Hugo template lookup order, creating a Hugo theme from scratch, Hugo asset pipeline (SCSS, PostCSS), Hugo baseof.html, or theme configuration parameters. Also applies when evaluating which theme to use, switching themes, or troubleshooting theme-related rendering issues.

Installation

Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.

Run Skill in Manus

Source

therealbill

therealbill/mynet

View GitHub Repository View Creator Repositories

Download

Run Skill in Manus

Related occupationsSOC

Based on SOC occupation classification

Web DevelopersComputer and Mathematical Occupations·SOC 15-1254

SKILL.md

readonly

name	Hugo Themes
description	This skill should be used when the user asks about Hugo themes, installing a theme, customizing a theme, overriding theme layouts or partials, Hugo template lookup order, creating a Hugo theme from scratch, Hugo asset pipeline (SCSS, PostCSS), Hugo baseof.html, or theme configuration parameters. Also applies when evaluating which theme to use, switching themes, or troubleshooting theme-related rendering issues.
version	1.0.0

Overview

Hugo themes control the visual presentation and layout structure of a site. Most users install a community theme and customize it by overriding specific templates and styles. Full theme creation from scratch is less common but documented here at reference level.

Installing a Theme as a Hugo Module

The recommended approach — no git submodules, version-managed:

# Initialize modules if not already done
hugo mod init github.com/username/mysite

# Add theme as module dependency
hugo mod get github.com/theNewDynamic/gohugo-theme-ananke

In hugo.toml:

[module]
  [[module.imports]]
    path = 'github.com/theNewDynamic/gohugo-theme-ananke'

Update the theme:

hugo mod get -u github.com/theNewDynamic/gohugo-theme-ananke

Template Lookup Order

Hugo resolves templates in this order (first match wins):

layouts/ in the project root (your overrides)
layouts/ in the theme

This means: to override any theme template, create the same file path under your project's layouts/ directory.

Overriding Theme Templates

Override a Partial

If the theme has themes/mytheme/layouts/partials/header.html, override it by creating:

layouts/partials/header.html

Your version replaces the theme's version completely. To extend rather than replace, copy the theme's partial and modify it.

Override a Layout

Theme provides themes/mytheme/layouts/_default/single.html. Override with:

layouts/_default/single.html

Override for Specific Sections

Override the list template only for the blog section:

layouts/blog/list.html

Hugo's template lookup searches section-specific templates before _default/.

Customizing CSS

Method 1: Custom CSS File

Add to static/css/custom.css and include in the head partial:

<!-- layouts/partials/head.html -->
{{ partial "head/meta.html" . }}
{{ partial "head/css.html" . }}
<link rel="stylesheet" href="{{ "css/custom.css" | relURL }}">

Method 2: Hugo Pipes (Recommended)

Process SCSS/CSS through Hugo's asset pipeline:

<!-- layouts/partials/head.html -->
{{ $style := resources.Get "scss/main.scss" | toCSS | minify | fingerprint }}
<link rel="stylesheet" href="{{ $style.RelPermalink }}" integrity="{{ $style.Data.Integrity }}">

Place source files in assets/scss/main.scss.

Method 3: Theme Parameters

Many themes support CSS customization via config:

[params]
  customCSS = ["css/custom.css"]
  colorScheme = "dark"

Check the theme's documentation for supported parameters.

Theme Configuration Parameters

Themes define custom parameters in [params]:

[params]
  # Common theme parameters
  logo = "/images/logo.png"
  favicon = "/images/favicon.ico"
  description = "Site description"
  dateFormat = "January 2, 2006"

  # Social links (theme-specific)
  [params.social]
    github = "username"
    twitter = "username"

  # Navigation (theme-specific)
  [params.nav]
    showBreadcrumbs = true
    showTableOfContents = true

Creating a Theme from Scratch

Scaffold

hugo new theme mytheme

Creates:

themes/mytheme/
├── archetypes/
│   └── default.md
├── layouts/
│   ├── _default/
│   │   ├── baseof.html
│   │   ├── list.html
│   │   └── single.html
│   ├── partials/
│   │   ├── footer.html
│   │   ├── head.html
│   │   └── header.html
│   └── index.html
├── static/
│   ├── css/
│   └── js/
└── theme.toml

baseof.html — The Master Template

All pages inherit from this:

<!DOCTYPE html>
<html lang="{{ .Site.LanguageCode }}">
<head>
  {{ partial "head.html" . }}
</head>
<body>
  {{ partial "header.html" . }}
  <main>
    {{ block "main" . }}{{ end }}
  </main>
  {{ partial "footer.html" . }}
</body>
</html>

single.html — Individual Pages

{{ define "main" }}
<article>
  <h1>{{ .Title }}</h1>
  <time>{{ .Date.Format "January 2, 2006" }}</time>
  {{ .Content }}
</article>
{{ end }}

list.html — Section List Pages

{{ define "main" }}
<h1>{{ .Title }}</h1>
{{ .Content }}
<ul>
  {{ range .Pages }}
  <li>
    <a href="{{ .RelPermalink }}">{{ .Title }}</a>
    <p>{{ .Summary }}</p>
  </li>
  {{ end }}
</ul>
{{ end }}

For detailed theme creation patterns, see Hugo's template documentation. The hugo-content-authoring skill covers shortcodes and render hooks that complement theme layouts.

More from this repository

same repository

hugo-s3-deployment

therealbill/mynet

This skill should be used when the user asks about deploying Hugo to AWS S3, S3 static site hosting, Hugo with CloudFront, the hugo deploy command, configuring Hugo's deployment section, GitHub Actions with AWS OIDC for Hugo, S3 bucket static website configuration, CloudFront cache invalidation after Hugo deploy, or choosing between GitHub Pages and S3 for Hugo hosting. Also applies when GitHub Pages limitations (auth, custom headers, size) require an alternative deployment target.

2026-02-083

hugo-github-actions

therealbill/mynet

This skill should be used when the user asks about deploying Hugo to GitHub Pages, setting up a GitHub Actions workflow for Hugo, Hugo CI/CD pipeline, content-aware path filtering for Hugo builds, caching Hugo modules in CI, Hugo PR preview deployments, Hugo build workflow, or configuring GitHub Pages deployment for a Hugo site. Also applies when troubleshooting GitHub Actions workflow failures related to Hugo builds.

2026-02-083

hugo-data-templates

therealbill/mynet

This skill should be used when the user asks about Hugo's data directory, loading YAML or JSON or TOML data files in Hugo templates, using .Site.Data to access structured data, data-driven navigation or menus, rendering datasets or bibliographies or registries from data files, generating content from data, using range to iterate over data collections, Hugo resources.GetRemote for external data, or organizing data files for large projects. Also applies when the user wants to drive site content or navigation from structured data rather than hardcoding it in templates.

2026-02-083

hugo-content-authoring

therealbill/mynet

This skill should be used when the user asks about Hugo shortcodes, creating custom shortcodes, Hugo render hooks, custom rendering for links or images or headings or code blocks, Hugo taxonomies (tags, categories, custom), page bundles and page resources, content formatting beyond basic markdown, creating callout boxes or tabs or admonitions in Hugo, or customizing how Hugo processes markdown elements. Also applies when the user wants to add reusable content components to their Hugo site.

2026-02-083

hugo-module-mounts

therealbill/mynet

This skill should be used when the user asks about Hugo module mounts, mounting multiple directories into Hugo's content tree, aggregating docs from scattered directories, using hugo mod init, configuring module.mounts in hugo.toml, building a unified documentation site from a monorepo, mapping subdirectory docs/ folders into a single Hugo site, or understanding Hugo's union file system. Also applies when the user has a repository with multiple docs/ directories that need to be presented as a single site. This is the core skill for multi-directory content aggregation.

2026-02-083

hugo-fundamentals

therealbill/mynet

This skill should be used when the user asks to create a Hugo site, set up Hugo, start a new Hugo project, understand Hugo directory structure, configure hugo.toml or hugo.yaml, work with Hugo front matter, create content types or archetypes, run hugo server for local development, or understand Hugo content organization including section pages and page bundles. Also applies when the user is new to Hugo and needs guidance on basic concepts, URL structure, or the relationship between content directories and rendered pages.

2026-02-083

name	Hugo Themes
description	This skill should be used when the user asks about Hugo themes, installing a theme, customizing a theme, overriding theme layouts or partials, Hugo template lookup order, creating a Hugo theme from scratch, Hugo asset pipeline (SCSS, PostCSS), Hugo baseof.html, or theme configuration parameters. Also applies when evaluating which theme to use, switching themes, or troubleshooting theme-related rendering issues.
version	1.0.0

Overview

Installing a Theme as a Hugo Module

The recommended approach — no git submodules, version-managed:

# Initialize modules if not already done
hugo mod init github.com/username/mysite

# Add theme as module dependency
hugo mod get github.com/theNewDynamic/gohugo-theme-ananke

In hugo.toml:

[module]
  [[module.imports]]
    path = 'github.com/theNewDynamic/gohugo-theme-ananke'

Update the theme:

hugo mod get -u github.com/theNewDynamic/gohugo-theme-ananke

Template Lookup Order

Hugo resolves templates in this order (first match wins):

layouts/ in the project root (your overrides)
layouts/ in the theme

This means: to override any theme template, create the same file path under your project's layouts/ directory.

Overriding Theme Templates

Override a Partial

If the theme has themes/mytheme/layouts/partials/header.html, override it by creating:

layouts/partials/header.html

Your version replaces the theme's version completely. To extend rather than replace, copy the theme's partial and modify it.

Override a Layout

Theme provides themes/mytheme/layouts/_default/single.html. Override with:

layouts/_default/single.html

Override for Specific Sections

Override the list template only for the blog section:

layouts/blog/list.html

Hugo's template lookup searches section-specific templates before _default/.

Customizing CSS

Method 1: Custom CSS File

Add to static/css/custom.css and include in the head partial:

<!-- layouts/partials/head.html -->
{{ partial "head/meta.html" . }}
{{ partial "head/css.html" . }}
<link rel="stylesheet" href="{{ "css/custom.css" | relURL }}">

Method 2: Hugo Pipes (Recommended)

Process SCSS/CSS through Hugo's asset pipeline:

<!-- layouts/partials/head.html -->
{{ $style := resources.Get "scss/main.scss" | toCSS | minify | fingerprint }}
<link rel="stylesheet" href="{{ $style.RelPermalink }}" integrity="{{ $style.Data.Integrity }}">

Place source files in assets/scss/main.scss.

Method 3: Theme Parameters

Many themes support CSS customization via config:

[params]
  customCSS = ["css/custom.css"]
  colorScheme = "dark"

Check the theme's documentation for supported parameters.

Theme Configuration Parameters

Themes define custom parameters in [params]:

[params]
  # Common theme parameters
  logo = "/images/logo.png"
  favicon = "/images/favicon.ico"
  description = "Site description"
  dateFormat = "January 2, 2006"

  # Social links (theme-specific)
  [params.social]
    github = "username"
    twitter = "username"

  # Navigation (theme-specific)
  [params.nav]
    showBreadcrumbs = true
    showTableOfContents = true

Creating a Theme from Scratch

Scaffold

hugo new theme mytheme

Creates:

themes/mytheme/
├── archetypes/
│   └── default.md
├── layouts/
│   ├── _default/
│   │   ├── baseof.html
│   │   ├── list.html
│   │   └── single.html
│   ├── partials/
│   │   ├── footer.html
│   │   ├── head.html
│   │   └── header.html
│   └── index.html
├── static/
│   ├── css/
│   └── js/
└── theme.toml

baseof.html — The Master Template

All pages inherit from this:

<!DOCTYPE html>
<html lang="{{ .Site.LanguageCode }}">
<head>
  {{ partial "head.html" . }}
</head>
<body>
  {{ partial "header.html" . }}
  <main>
    {{ block "main" . }}{{ end }}
  </main>
  {{ partial "footer.html" . }}
</body>
</html>

single.html — Individual Pages

{{ define "main" }}
<article>
  <h1>{{ .Title }}</h1>
  <time>{{ .Date.Format "January 2, 2006" }}</time>
  {{ .Content }}
</article>
{{ end }}

list.html — Section List Pages

{{ define "main" }}
<h1>{{ .Title }}</h1>
{{ .Content }}
<ul>
  {{ range .Pages }}
  <li>
    <a href="{{ .RelPermalink }}">{{ .Title }}</a>
    <p>{{ .Summary }}</p>
  </li>
  {{ end }}
</ul>
{{ end }}

For detailed theme creation patterns, see Hugo's template documentation. The hugo-content-authoring skill covers shortcodes and render hooks that complement theme layouts.