Hugo Themes Logo Hugo Themes
Hugo Whisper Theme screenshot

Hugo Whisper Theme

Author Avatar Theme by Zerostaticthemes
Updated: 26 Nov 2023
272 Stars

Whisper is a minimal documentation theme for Hugo.

Github Live Preview

Overview:

The Hugo Whisper Theme is a minimal documentation theme designed specifically for Hugo, a static site generator. This theme focuses on simplicity in both design and functionality. It offers a clean and minimalistic interface for creating documentation websites efficiently. The theme supports various content types, including markdown for documentation pages and a homepage for introducing projects or other information. With a responsive design and integration of Bootstrap 5.3, the theme ensures a smooth user experience across different devices. It also boasts a high-speed performance, with a Google Lighthouse speed score of 100/100 and a small file size of 21KB (excluding images) using vanilla JavaScript only.

Features:

  • Content Types: Supports markdown for documentation pages and a separate homepage.
  • Content Management: Generates documentation from markdown files located in the content/docs directory.
  • SCSS (Hugo Pipelines): Uses Hugo Pipes to compile SCSS and minify assets.
  • Responsive design: Ensures optimal display on different screen sizes.
  • Bootstrap 5.3: Integrates Bootstrap framework for enhanced styling and layout.
  • Speed: Achieves a perfect 100/100 Google Lighthouse speed score.
  • 21KB without images: Keeps the file size small for faster loading times.
  • Vanilla JS only: Relies on vanilla JavaScript for functionality.
  • Menu: Includes a responsive mobile menu that can be managed in the config.toml file.

Installation:

To install the Hugo Whisper Theme, follow these steps:

  1. Install Hugo: Ensure that you have Hugo installed on your system. Refer to the official installation guide for detailed instructions. Note that the Hugo Extended version is required for this theme due to its usage of Hugo Pipes to compile SCSS and minify assets.

  2. Create a new Hugo site: Use the following command to create a new Hugo site with the desired name:

hugo new site mynewsite
  1. Install the theme: Download or clone the theme repository into the “themes” directory of your Hugo site. The resulting folder structure should look like this:
mynewsite/themes/hugo-whisper-theme
  1. Copy the example content: Copy the entire contents of the exampleSite folder from the theme into the root folder of your Hugo site (i.e., mynewsite/). You can use the terminal to copy the files. Ensure that you are in the root folder of your project (i.e., mynewsite) before executing the following command:
cp -R mynewsite/themes/hugo-whisper-theme/exampleSite/* mynewsite/

  1. Configure and customize: Modify the necessary configuration files and content files to suit your needs. These files include config.toml and the markdown files in the content/docs directory.

  2. Run Hugo: Generate your Hugo site by running the following command from the root folder of your Hugo site (i.e., mynewsite/):

hugo

  1. Local development: For local development, you can use Hugo’s built-in local server. Enter localhost:1313 in the address bar of your browser to preview your site.

  2. Deploying to Netlify: If you want to deploy your site to Netlify, the theme includes a netlify.toml file that is configured to deploy from the exampleSite folder. However, if you have copied the exampleSite folder or removed it, make sure to delete the netlify.toml file.

Summary:

The Hugo Whisper Theme is a minimal documentation theme specifically designed for Hugo. Its simplicity in design and functionality makes it a reliable choice for creating documentation websites. The theme supports content types such as markdown for documentation pages and a separate homepage. It uses Hugo Pipes to compile SCSS and minimize assets, resulting in a responsive design and high-speed performance. With a file size of only 21KB without images and reliance on vanilla JavaScript, this theme ensures a fast and efficient user experience. Installation is straightforward, requiring the installation of Hugo, creation of a Hugo site, and copying the theme files. Overall, the Hugo Whisper Theme is a versatile and user-friendly solution for creating minimal and efficient documentation websites.