Hugo is a static site generator, meant to serve static web pages. To get started without spending too much time, download the repo from github.

To get started with Hugo, either we could have a standalone hugo installed, or we could have it as a npm dependency with nodejs. Here we deal with Hugo as a npm dependency.

Nodejs installed to serve the contents.

The structure to HUGO sites follows the pattern below

├── hugo/ // The Hugo project; content, data and static files
| ├── .dxtright/ // Contains configuration files
| ├── content/ // Where all site content is stored
| ├── data/ // TOML, YAML or JSON files containing site data
| ├── layouts/ // Your site’s layouts
| | ├── partials/ // Your site’s partials
| | ├── shortcodes/ // Your site’s shortcodes
| ├── static/ // Where all static files live
| | ├── css/ // Where compiled CSS files live
| | ├── img/ // Where user images are stored
| | ├── js/ // Where compiled JS files live
| | └── svg/ // Where svg are stored
| └── config.toml // The Hugo configuration file
└─── src/
├── css // CSS/SCSS source files to be compiled to /css/
└── js // JS source files to be compiled to /js/

Navigate to the working directory and run, this would install all the dependencies for the project along with HUGO

npm i

As hugo is installed as a npm dependency, we can run hugo commands using the following syntax

npm run hugo — <command> –<param>

npm run hugo — new posts/ /* Create a new post*/

Hugo creates a new post with Front Matter. Front Matter (structured metadata for the page) that can be used in your templates.

Download a theme and have it installed in the themes directory.

Now, we’ll extend the theme by using Hugo’s template inheritance.

Any layouts stored in hugo/layouts/ will override any layout with the same name in theme’s layouts directory, allowing us to customize our site without messing with the theme.