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 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. More information is available on the about page.
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.
Start a new Hinode project in three steps:
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 Hinode. Unless you plan to customize a lot, it is recommended to use the child theme:
git clone https://github.com/gethinode/child.git my-hinode-site && cd my-hinode-site
Use the main theme if you intend to customize the base code:
git clone https://github.com/gethinode/hinode.git my-hinode-site && cd my-hinode-site
Start the development server
npm run start
Hinode contains sample content for a blog and a project portfolio. The examples are available in English and Dutch and can be found in the
content folder. Review the following items on to how organize and enrich your content.
The main site configuration is available in
./config/_default. Review the following items to get you started.
/config/_default/params.toml. Review the colors documentation for more details.
/config/_default/params.tomlto 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/config.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.
assets/scss/app.scss. See the styles documentation for more details.
config/_default/server.toml. Similar settings are defined in the
netlify.tomlfile provided in the repository’s root when deploying to Netlify. See the server documentation for more details.