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:
The next steps describe the approach how to initialize a new Hinode site using either Hugo or npm.
Caution
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.
The installation for Windows requires PowerShell v7. Download it from the Microsoft Store as needed. Check your current version with the command $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.
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 uses Markdown and templates to define the content for your website. See the
content management page for more details.
Hinode uses a structured approach to organize and present content. See the
content organization page for more details.
Hinode uses a mix of basic Markdown syntax enriched with Bootstrap styling for the typography. Review the
typography documentation for more details.
Generate internal links and external links using a combination of Markdown and Hugo shortcodes. You can optionally manage your external links in a central configuration file. Review the
links documentation for more details.
Hinode supports responsive images out-of-the-box. Hinode uses Hugo to preprocess images on the server. By taking advantage of so-called image sets, the client’s browser can decide which image to download whilst reducing the download size. Review the
image documentation for more details.
Hinode enhances the basic tables available in Markdown with optional styling features provided by Bootstrap. You can customize the accentuation, adjust the borders, and make tables more compact. Review the
tables documentation for more details.
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.
Quick configuration settings
The main site configuration is available in ./config/_default. Review the following items to get you started.
Hinode uses a base layout for the home page, list pages, and individual pages. Individual pages can also be configured as documentation page instead of a regular page. Review the
layout documentation for more details.
Hinode uses eight configurable theme colors. You can adjust them in the style section of /config/_default/params.toml. Review the
colors documentation for more details.
Set the 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.
Configure each supported language in config/_default/languages.toml. Set the default behavior in config/_default/hugo.toml. Review the
languages documentation for more details.
Define the main menu entries for each language in 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.
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.
Hinode uses Bootstrap’s Sass files to generate the cascading style sheets of the website. The main entrypoint is defined in 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 replaces Bootstrap’s embedded icons with file-based icons to comply with its security settings. The icon files are parameterized to use the theme colors. See the
icons 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.