Introduction
Get started with Hinode, a clean documentation and blog theme for your Hugo site based on Bootstrap 5.
Hinode is a clean documentation and blog theme for Hugo - an open-source static site generator. Based on the Bootstrap framework, the rendered site is fast, secure, and responsive. Hinode uses FlexSearch to enable full text search across your site. Finally, the theme provides optional support for Node Package Manager (npm) to automate the build process and to keep track of dependencies. More information is available on the about page.
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. Hinode requires the following software to be installed on your local machine:
| Software | Hugo | npm | Remarks |
|---|---|---|---|
| Go binary | Required for Hugo modules, including Hinode itself | ||
| Hugo (extended) | Embedded as npm binary | ||
| Node.js | The installation package includes npm | ||
| Git | recommended | Recommended for version control | |
| Dart Sass | optional | optional | Required when using Dart Sass transpiler |
The next steps describe the approach how to initialize a new Hinode site using either Hugo or npm.
The
main Hinode repository
contains a folder exampleSite with sample content for a blog and a project portfolio. The examples are available in English, French, and Dutch. Review the following items on to how organize and enrich your content.
Hinode provides out-of-the box access to the free icons of Font Awesome . The icon library provides various styling options. Review the icons documentation for more details.
The main site configuration is available in ./config/_default. Review the following items to get you started.
style section of /config/_default/params.toml. Review the colors documentation for more details.themeFont and themeFontPath in the style section of /config/_default/params.toml to adjust the main font. Hinode includes supports for Emoji by default. Review the fonts documentation for more details.config/_default/languages.toml. Set the default behavior in config/_default/hugo.toml. Review the languages documentation for more details.config/_default/menus. For example, the English menu entries are defined in menus.en.toml. See the navigation documentation for more details.The next topics give an overview of the advanced configuration settings.
Hinode supports npm packages to automate various tasks. In addition, it uses Hugo’s mounted folders to create a virtual file system. Review the advanced settings overview for more details.
assets/scss/app.scss. See the styles documentation for more details.Hinodes uses npm to include the latest JavaScript files of external packages such as Bootstrap and FlexSearch . All local and external files are bundled in a single JavaScript file. See the scripts documentation for more details.
Hinode uses rather strict security policies to ensure the site is secure 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 config/_default/server.toml. Similar settings are defined in the netlify.toml file provided in the repository’s root when deploying to
Netlify
. See the server documentation for more details.