Hugo Mana Theme is a futuristic, MIT-licensed Hugo theme for blogs and personal sites that ships with full-text search, right-to-left language support, and GitHub/Obsidian-style alert blockquotes.
What is the Hugo Mana Theme?
The Hugo Mana Theme is a blog-focused theme built for the Hugo static site generator: it takes Markdown content and hugo.toml configuration as input and outputs a responsive site with a two-line hero title, a home page mini-about, a filterable posts listing, tag pages, archive pages, an about page, and a custom 404 page. It requires Hugo Extended version 0.100.0 or higher for PostCSS asset processing, is maintained by the developer Livour, and is installed as a Git submodule from the github.com/Livour/hugo-mana-theme repository. A live demo is available at managuide.blog.
What makes the Hugo Mana Theme stand out?
- Full-text search — generates a JSON search index and supports keyboard navigation; enabled by adding "HTML" and "JSON" to the home outputs in hugo.toml.
- RTL support — mirrors navigation, layout, and mobile menus for Hebrew, Arabic, and other right-to-left languages via
languageDirection = "rtl", and ships English and Hebrew i18n files by default. - GitHub/Obsidian-style alerts — supports NOTE/INFO, TIP, IMPORTANT, WARNING/CAUTION, SUCCESS, QUESTION, DANGER, BUG, and EXAMPLE admonitions, with collapsible + and - markers and optional custom titles.
- Theme-aware code highlighting — uses Chroma with Catppuccin Macchiato for dark mode and Catppuccin Frappe for light mode, and accepts any Chroma style name via hugo gen chromastyles.
- Dark/light theme toggle — detects the system preference and offers a manual toggle, plus a configurable alert header style of favicon or emoji.
- Multilingual layouts — supports translation by filename (content/posts/post.md plus post.es.md) or by directory (content/en, content/es), with per-language menus and a header language switcher.
- Analytics and donation integrations — connects Umami Analytics through a website ID and adds a configurable Buy Me a Coffee floating widget with message, color, position, and margin options.
Who should use the Hugo Mana Theme?
- Individual bloggers — publish Markdown posts with frontmatter for title, date, tags, and image and get automatic filtering by tag, year, and month plus chronologically organized archive pages.
- Developers and technical writers — write posts with syntax-highlighted code fences, collapsible warning and tip alerts, and a table of contents with active-section highlighting.
- Multilingual content teams — run a single site in English and Spanish with filename-based translation, or English and Hebrew with directory-based translation and mirrored RTL layouts.
- Privacy-conscious site owners — replace Google Analytics with self-hosted or cloud Umami tracking configured from one website ID parameter.
What can you do with the Hugo Mana Theme?
- Launch a personal blog quickly: add the theme as a Git submodule, set
theme = "mana", copy a minimal example config, and write posts — the home page, recent posts, tag cloud, about page, and 404 page are generated automatically. - Publish documentation-style content: embed collapsible alert admonitions for tips, warnings, and examples using GitHub Flavored Markdown, Obsidian, or Typora syntax.
- Localize for RTL audiences: set
languageDirection = "rtl"and a per-language content directory to deliver mirrored navigation, right-aligned text, and RTL-specific styles for filters, search, and table of contents. - Tune pagination and SEO: set the page size for the posts listing, which then shows first, last, previous, and next links plus page numbers and total post counts; SEO output includes Open Graph, Twitter Cards, and structured data.
How does the Hugo Mana Theme work?
After adding the theme as a Git submodule and enabling it in hugo.toml, you configure feature blocks such as JSON search output, avatar images, menus, pagination page size, syntax highlighting styles, and table-of-contents levels. The theme ships five example configs — example-single-folder-single-lang.toml, example-single-folder-multilang.toml, example-multi-folder-single-lang.toml, example-multi-folder-multilang.toml, and example.toml — so you copy the one that matches your content layout and language setup.
Pricing
The theme is free and open source under the MIT license. The author accepts optional donations through Buy Me a Coffee, and a configurable Buy Me a Coffee widget can be enabled on your site.
FAQ
Is the Hugo Mana Theme free?
Yes. The theme is distributed under the MIT license, so it is free to use and modify for personal or commercial projects. The author supports development through optional Buy Me a Coffee donations, which are not required to use the theme.
What Hugo version does the Hugo Mana Theme need?
Hugo Extended version 0.100.0 or higher is required because the theme uses PostCSS for asset processing. The standard Hugo binary may fail during builds, so install the Extended build before adding this theme to your site.
Does the Hugo Mana Theme support RTL languages?
Yes. Set languageDirection = "rtl" in a language block and the theme mirrors the navigation and layout, right-aligns text, and applies RTL-specific styles to filters, search, the table of contents, and post metadata. English and Hebrew i18n files ship with the theme.
Can I change the syntax highlighting colors?
Yes. Run hugo gen chromastyles --style=your-style and write the output to themes/mana/assets/css/syntax-dark.css and syntax-light.css. Any valid Chroma style name, such as github, monokai, or dracula, can be used and pointed to from the darkTheme and lightTheme parameters.
What alert types are supported?
The theme supports NOTE, INFO, TIP, IMPORTANT, WARNING, CAUTION, SUCCESS, QUESTION, DANGER, BUG, and EXAMPLE admonitions. Alert headers can be rendered with favicon icons (default) or emoji, controlled by the alertStyle parameter.
