Docs
Introduction
Posted on August 14, 2024 (Last modified on June 20, 2025) • 6 min read • 1,109 wordsGet 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.
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. 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 |
Installation
The next steps describe the approach how to initialize a new Hinode site using either Hugo or npm.
Windows installation notesCaution
In general, it is not recommended to fork the Hinode repository. Unlike the versioned releases, the repository
HEAD
is not guaranteed to be stable. Unless contributing to the development of Hinode, you are encouraged to use one of the installation options described below.
$PSVersionTable
.-
Create a new site
hugo new site my-hinode-site && cd my-hinode-site
-
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
-
Start a development server
hugo server
-
Create a new repository
Go to github.com and login to GitHub as needed. Next, click the green button
Use this template
to initialize a new repository based on the Hinode template.Alternatively, you can use the GitHub Cli to initialize the repository from the command line. Replace
--private
with--public
if you wish to create a public repository instead.gh repo create my-hinode-site --private --template="https://github.com/gethinode/template.git"
-
Configure a local site
Assuming your repository is
owner/my-hinode-site
, use thegit
command to clone the repository to your local machine.git clone https://github.com/owner/my-hinode-site && cd my-hinode-site
Now install the npm packages and hugo modules.
npm install && npm run mod:update
-
Start the development server
npm run start
Adding Content
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.
Quick Configuration Settings
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.Advanced Configuration Settings
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.toml
file provided in the repository’s root when deploying to
Netlify
. See the
Server Documentation for more details.