Hugo Noir

Hugo Noir is a clean, minimalist Hugo theme built with Tailwind CSS that focuses on readability, simplicity, and multilingual support, and is distributed on GitHub by prxshetty.

What is Hugo Noir?

Hugo Noir is a portfolio and blog theme for the Hugo static site generator. It takes standard Hugo content — markdown files with YAML front matter and per-language data files — and renders a responsive, SEO-friendly website with manual and OS-aware dark/light modes. The theme is open source under the MIT License and was created by prxshetty, with a live demo hosted at pranamshetty.dev.

Key Features

• Dark & Light mode — manual toggle and OS-aware switching, with dark mode as the default look on the homepage.
• Tailwind CSS — the entire visual design is built on Tailwind CSS, making utility-class styling and customization straightforward.
• Multilingual support — English, Spanish, and French translation strings are pre-configured in the theme's i18n directory, and content can be organized into language-specific content directories.
• Tech stack carousel — a criss-cross carousel with two rows, populated from data files where each item uses a Devicon class name for its icon.
• Experience section — a dedicated layout that reads entries from data files (such as data/en/experience.toml), each with role, company, period, country, responsibilities, and technologies, plus optional clickable company links.
• Local time display — the theme shows the visitor's local time based on their browser settings.
• Responsive and SEO-friendly — enhanced mobile navigation and SEO-friendly markup are included out of the box.
• Customization hooks — template files can be overridden by copying them into your site's layouts/ directory, and custom CSS can be loaded from assets/css/custom.css.

Who is it for?

• Portfolio owners — present projects, professional experience, and contact details on dedicated dark-mode-styled pages.
• Multilingual bloggers — publish the same blog content in English, Spanish, and French with language-specific URLs when multilingual mode is enabled.
• Hugo developers — use Hugo Noir as a base theme and override layouts, partials, or Tailwind configuration without starting from scratch.

What can you do with Hugo Noir?

• Showcase your skills — fill data/en/tech.toml (or language equivalents) with Devicon class names to display a two-row tech stack carousel on the homepage.
• Document your career — create experience entries with responsibilities, technologies, and company links to build a visual resume section.
• Publish a blog — write posts with standard Hugo front matter, tags, and categories, and let the theme render a blog-ready layout.
• Run a multilingual site — configure multiple languages with subdirectory URLs like /en/blog and /es/blog.

How does Hugo Noir work?

Install the theme by cloning the repository into themes/hugo-noir or adding it as a Git submodule, then set theme = "hugo-noir" in your site's configuration file. The theme requires Hugo Extended version 0.92.0 or newer. Once installed, it reads site-specific content from your content directories and language-specific data files; the bundled hugo.example.toml provides a full configuration starting point.

FAQ

Is Hugo Noir free?

Yes. Hugo Noir is released under the MIT License, so you can use, modify, and redistribute it freely, including in commercial projects.

What Hugo version do I need?

You need Hugo Extended, version 0.92.0 or newer. The theme specifies this requirement in its theme.toml module settings.

Does Hugo Noir support multiple languages?

The theme ships with English, Spanish, and French translation strings. You enable multilingual mode by defining languages in your site configuration with separate contentDir values.

How can I customize the theme?

Override any layout by copying it from themes/hugo-noir/layouts/ into your site's layouts/ directory, or add your own CSS in assets/css/custom.css. For deeper changes, you can fork the theme and adjust its Tailwind configuration.

What content types are included?

The theme includes layouts for a homepage, about, projects, experience, and contact, plus a standard blog section. Projects and experience entries are driven by data files rather than individual content pages.