Hugo Themes Logo Hugo Themes
Hugo Theme Zen screenshot

Hugo Theme Zen

Author Avatar Theme by Frjo
Updated: 17 Dec 2025
338 Stars

A fast and clean Hugo base theme with css-grid and Hugo pipes support.

Github Live Preview

Categories

Templates & themes

Overview:

The Hugo Zen theme strives to be clean and standard compliant while offering unique features. It serves as a solid base for custom Hugo themes. The theme uses HTML5 with a modern CSS grid and flex layout and is supported by recent versions of major browsers. The Sass is processed with Hugo pipes. The theme also includes stylesheets from the sass plugin “typey.” Key updates in version 2.0 include the use of css4 variables, the reorganization of colors, fonts, and variables sass files, and the inclusion of new shortcodes.

Features:

  • Mobile menu
  • AlpineJS 3
  • Analytics with Matamo (Piwik)
  • Cookie consent
  • Commands for linting of CSS and JS
  • Contact form (PHP)
  • CSS grid and flex for layout
  • HTML5
  • Hugo Pipes for JS and Sass
  • jQuery 3
  • Micro.blog
  • Meta tags and JSON-LD
  • Multilingual (i18n)
  • Normalize CSS
  • Podcast
  • Responsive design
  • RSS and JSON feeds with full content
  • Search with FlexSearch.js
  • Sub theme support (Theme Components)
  • Umbrella JS 3
  • Minimum Hugo version: Hugo Extended version 0.88.1 or higher is required

Installation:

  • To install the Hugo Zen theme as a Hugo module, navigate to the root of your site and run the following command:
hugo mod init
  • Once your site is a Hugo module, declare the Zen theme module as a dependency by running the following command in the root of your site:
hugo mod get -u github.com/njvack/hugo-original
  • Alternatively, you can manually download and unpack the theme from GitHub. Clone the repo using the following command in the root of your site:
git clone https://github.com/njvack/hugo-original.git themes/zen
  • If you are using git to version control your site, you can add the Zen theme as a submodule by running the following command in the root of your site:
git submodule add https://github.com/njvack/hugo-original.git themes/zen

Summary:

The Hugo Zen theme is a clean and standard compliant theme for custom Hugo themes. With its modern features, including mobile menu, analytics, and responsive design, it provides a solid foundation for building a website. The theme’s use of HTML5, CSS grid and flex layout, and Hugo Pipes ensures a modern and optimized design. With the support of recent major browsers and its compatibility with Hugo Extended version 0.88.1 or higher, the Hugo Zen theme offers a reliable and efficient option for Hugo users.