Hugo Theme Hinode

About

• Online Demo
• PageSpeed Insights
• Mozilla Observatory

Hinode is a clean documentation and blog theme for Hugo, an open-source static site generator. Based on the Bootstrap 5 framework, the rendered site is fast, secure, and responsive. Hinode uses FlexSearch to enable full text search across your site. Finally, the theme supports Node Package Manager (npm) to automate the build process and to keep track of dependencies.

Detailed information about Hinode is available on the official website.

Prerequisites

Hinode is a Hugo theme that uses modules to install and maintain various components. It can be installed using either Hugo or npm. If you would like to take advantage of automation, the npm approach is recommended. Refer to the Hinode template for installation instructions with npm.

The installation instructions in this readme install Hinode as a regular Hugo theme. Hinode requires the following software to be installed on your local machine.

• Go binary
• Hugo (extended version)

Git is recommended, but is not a strict requirement.

Installation

The installation for Windows requires PowerShell v7. Download it from the Microsoft Store as needed. Check your current version with the command $PSVersionTable.

Start a new Hinode project in three steps:

1. Create a new site

   hugo new site my-hinode-site && cd my-hinode-site
   

2. Initialize the module system

   hugo mod init example.com/my-hinode-site
   echo "[[module.imports]]" >> hugo.toml
   echo "path = 'github.com/gethinode/hinode'" >> hugo.toml
   

3. Start a development server

   hugo server
   

Optional Extensions

Hinode v2 is a minimal core theme. Optional extensions are available to add features:

• mod-blocks - Pre-built Bookshop blocks for quickly building page layouts (hero, cards, FAQ, testimonials, etc.)
• Other modules - See the official modules list

To add mod-blocks to your site:

[[module.imports]]
  path = "github.com/gethinode/mod-blocks"

Configuration

See the official documentation on how to configure your site.

Application version meta tag

Set [params.application] to advertise your site's own release version in the document head, alongside the generator and theme tags:

[params.application]
  name = "My App"

This renders <meta name="application" content="My App <version>">. The version resolves from params.application.version, else the HUGO_APPLICATION_VERSION environment variable (set this in your build / CI pipeline). Sites that omit [params.application], or that set neither a config value nor the environment variable, render no such tag.

Color mode change hook

When color mode is enabled, the shared color setter dispatches hinode:color-mode:before-change on document synchronously. Its detail.theme is the requested preference (auto, light, or dark); unsupported values normalize to auto before dispatch, and auto resolves to the system appearance after dispatch.

Call event.preventDefault() to skip that setter's preference storage, root data-bs-theme / data-bs-main-theme attributes, and selector updates. Without cancellation, the existing behavior continues. Register before the critical bundle to intercept initialization, or later to intercept subsequent control, system appearance, and persisted pageshow setter calls. Cancellation does not undo native control changes or earlier preference fallback reads and writes.

document.addEventListener('hinode:color-mode:before-change', event => {
  if (document.documentElement.hasAttribute('data-external-color-mode')) {
    event.preventDefault()
  }
})

Contributing

See the official documentation on how to contribute to the open-source development of Hinode.

Credits

Hinode is inspired by the following themes:

• Blist - a clean and fast blog theme for your Hugo site using Tailwind CSS.
• Doks - a Hugo theme for building secure, fast, and SEO-ready documentation websites, which you can easily update and customize.

Hinode's SEO, Open Graph, Twitter card, and structured-data head partials are adapted from Doks. See THIRD-PARTY-NOTICES.md for the Doks copyright and license notice.

Donate

License

The hinode, docs, and template codebase is released under the MIT license. The documentation of Hinode is licensed under the Creative Commons (CC BY-NC 4.0) license. This includes all files within the repository's /content and /exampleSite/content folders and their children, as well as the "README" in the repository root. This applies to all public repositories maintained by gethinode on GitHub, including the gethinode/hinode, gethinode/template, and gethinode/docs repositories, unless specified otherwise.