Hugo Whisper Theme

Whisper is a minimal documentation theme for Hugo that generates static documentation websites from Markdown files, built by Zerostatic Themes and scoring a perfect 100/100 on Google Lighthouse.

What is Hugo Whisper Theme?

Whisper is a Hugo theme specifically for documentation sites. It takes Markdown files placed in a content/docs folder and outputs a static website with a docs section and a separate homepage. The theme is open source, published on GitHub at zerostaticthemes/hugo-whisper-theme, and comes with a live demo hosted on Netlify.

Key Features

• Markdown-based docs — Documentation pages are written as Markdown in content/docs; the theme auto-generates the docs layout from those files.
• Bootstrap 5.3 styling — The theme is built on Bootstrap 5.3 with a responsive design, and SCSS is compiled with Hugo Pipelines.
• 100/100 Lighthouse score — The theme reports a perfect performance score, weighs only 21KB without images, and uses vanilla JavaScript only.
• Responsive mobile menu — Navigation collapses into a mobile hamburger menu, with menu items configured in config.toml.
• Homepage included — A non-documentation homepage introduces the project, separate from the docs area.
• Netlify deployment — A netlify.toml is included, preconfigured to deploy from the exampleSite folder to Netlify.

Who should use Hugo Whisper Theme?

Open-source projects that want clean, fast documentation alongside their repository will find this theme fitting: you just write Markdown and get a static docs site. Developers and teams already using Hugo benefit from a theme that stays lightweight and integrates with Hugo Pipelines. Technical writers who want version-controlled documentation can commit Markdown files and preview them locally with hugo server.

What can you do with Hugo Whisper Theme?

• Project maintainers: publish API references, installation guides, and tutorials by adding Markdown files to content/docs and building the site with a single hugo command.
• Startups: create a professional docs hub with a homepage for product introduction and a docs section for onboarding material.
• Technical writers: manage documentation in a Git repo, run hugo server for live reload at localhost:1313, and push changes to Netlify for automatic deployment.

How does Hugo Whisper Theme work?

First install Hugo Extended, then run hugo new site to create a site. Clone the theme into the themes folder, copy the exampleSite contents into the project root, and run hugo to generate static files. For development, hugo server starts a local server with live reload.

Pros and cons

• Pros: Ships with a ready-to-use docs layout, no JavaScript frameworks, a perfect Lighthouse score, Netlify-friendly config, and a responsive mobile menu.
• Cons: Requires Hugo Extended because it relies on Hugo Pipes to compile SCSS; the included netlify.toml is tailored to the exampleSite folder, so you may need to delete it if you copy the folder elsewhere.

FAQ

Does Hugo Whisper Theme require Hugo Extended?

Yes. The theme uses Hugo Pipes to compile SCSS and minify assets, so it only works with the Extended version of Hugo. Run hugo version and confirm the output shows /extended after the version number.

How do I install Hugo Whisper Theme?

Install Hugo Extended, create a new site with hugo new site mynewsite, clone the theme into mynewsite/themes, copy the exampleSite contents to the root, and run hugo to build. For local development, use hugo server and open localhost:1313.

Is Hugo Whisper Theme free?

Yes, it is an open-source theme published by Zerostatic on GitHub. You can use it for personal or commercial projects, and it is listed among other open-source Zerostatic themes like Hugo Hero, Hugo Serif, and Hugo Winston.