hinode/content/en/docs/0.8/getting-started/introduction.md

title, description, date, group, aliases, layout

title	description	date	group	aliases	layout
Introduction	Get started with Hinode, a clean documentation and blog theme for your Hugo site based on Bootstrap 5.	2023-01-06	getting-started	/en/docs/0.8/getting-started/ /en/docs/getting-started/ /en/getting-started/ /en/docs/	docs

Hinode is a clean documentation and blog theme for [Hugo]({{< param "links.hugo" >}}), an open-source static site generator. Based on the [Bootstrap 5]({{< param "links.bootstrap" >}}) framework, the rendered site is fast, secure, and responsive. Hinode uses [FlexSearch]({{< param "links.flexsearch" >}}) to enable full text search across your site. Finally, the theme uses [Node Package Manager]({{< param "links.npm" >}}) to automate the build process and to keep track of dependencies. More information is available on the [about]({{< ref "about" >}} "about") page.

Prerequisites

Hinode requires Git, Node.js and npm for local development and testing. Download the Git binary from the [official website]({{< param "links.git_download" >}}). Next, download and install [Node.js]({{< param "links.nodejs" >}}) (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]({{< param "links.repository_child" >}}), and a [main theme]({{< param "links.repository" >}}). The child theme uses [npm]({{< param "links.npm" >}}) to link to the latest available version of Hinode. 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

Key configuration settings

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

Topic	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 primary and themeOpacity within the [style] section of params.toml to update the site's primary color and opacity. Bootstrap's other key colors can be changed too. You can use the [WCAG Color Contrast Checker]({{< param "links.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]({{< param "links.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]({{< param "links.netlify" >}}).
{.table}