Hugo Theme Hinode

A clean blog theme for your Hugo site based on Bootstrap 5

About • Prerequisites • Installation • Configuration • Contributing • Donate • License

About

• Online Demo
• PageSpeed Insights
• Mozilla Observatory

Hinode is a clean 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 uses Node Package Manager to automate the build process and to keep track of dependencies.

Additional features include:

• Comments
• Social links
• Blog pagination
• Code highlighting
• Command prompt
• Color customization
• Language switcher

Prerequisites

Hinode requires Git, Node.js and npm for local development and testing. Download the Git binary from the official website. Next, download and install Node.js (it includes npm) for your platform.

Installation

Start a new Hinode project in three steps:

1. Create a new site

Hinode is available as a child theme, and a main theme. The child theme uses npm to link to the latest available version of the Hinode theme. As such, it is less applicable if you plan to customize a lot. Vice versa, the main theme allows for heavy customization, but is not synchronized with the latest available Hinode theme automatically.

Not quite sure? Use the Hinode child theme.

Hinode child theme

git clone https://github.com/markdumay/hugo-theme-hinode-child.git my-hinode-site && cd my-hinode-site

Hinode main theme

git clone https://github.com/markdumay/hugo-theme-hinode.git my-hinode-site && cd my-hinode-site

2. Install dependencies

npm install

3. Start development server

npm run start

Configuration

The main site configuration is available in ./config/_default. Some remarks:

• Menu items - menus/menus.en.toml contains language-specific items for the navigation bar and social media links for the home page's footer.
• Content - Ensure the mainSections in config.toml is synchronized with the content folder, default values are ["blog", "projects"].
• Theme style - Update themeColor and themeOpacity within the [style] section of params.toml to update the site's primary color and opacity. You can use the WCAG Color Contrast Checker to validate the contrast ratio of your color to improve accessibility. Additionally, set themeFont and themeFontPath to override the default font.
• Comments - Comments are powered by utterances, a lightweight comments widget built on GitHub issues. Update the repo of the [comments] section of params.toml.
• Security policy - The theme uses rather strict security policies by default. Be sure to include references to external sources in the header configuration to avoid broken links. The settings of the local development server are defined in server.toml. Similar settings are defined in the netlify.toml file provided in the repository's root when deploying to Netlify.

Contributing

1. Clone the repository and create a new branch

   git checkout https://github.com/markdumay/hugo-theme-hinode.git -b name_for_new_branch

2. Make and test the changes

3. Submit a Pull Request with a comprehensive description of the changes

Credits

The Hinode theme 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.

Donate

License

The hugo-theme-hinode and hugo-theme-hinode-child codebase is released under the MIT license. The documentation (including the "README") is licensed under the Creative Commons (CC BY-NC 4.0) license.