Build A Static Site with Hugo

What is Hugo?

Hugo is an open-source static site generator, which helps me make the site you are looking at.

Install Hugo

This is the guide that we would follow first: Guide

So basically I installed Hugo from Github. Depending on your computer architecture, you will want to install either arm64 or amd64 version. After that, following these steps:

1. Extract the zip file somewhere.
2. Move huge.exe to a new empty folder (for example /hugo).
3. Add the environment varibles corresponding to that folder which containing hugo.exe.
4. Open Git Bash in that folder (or Powershell, WSL).
5. You can use some commands as the guide says — just open a Command Prompt in the root folder that contains hugo.toml first.

$ hugo version
$ hugo new site quickstart
$ cd quickstart
$ git init
$ git submodule add -b main https://github.com/1bl4z3r/hermit-V2 themes/hermit-v2
$ echo "theme = 'hermit-v2'" >> hugo.toml
$ hugo server

There are many themes available in Hugo. The GitHub URL above is just an example.
Here, we will see an error like this:

ERROR TOCSS: failed to transform "css/style.css" (text/x-scss). Check your Hugo installation; you need the extended version to build SCSS/SASS with transpiler set to 'libsass'.: this feature is not available in your current Hugo version, see https://goo.gl/YMrWcn for more information
Built in 186 ms
Error: error building site: TOCSS: failed to transform "css/style.css" (text/x-scss). Check your Hugo installation; you need the extended version to build SCSS/SASS with transpiler set to 'libsass'.: this feature is not available in your current Hugo version, see https://goo.gl/YMrWcn for more information"

The reason is that we haven’t installed the extended version yet. We can check it by
$ hugo env.

Install extended version

The easiest way to install the extended version is probably using a package manager. In my case, it is Chocolatey. Make sure you have enough storage to install, then follow these steps:

1. Open Windows Powershell as administrator.
2. Change the directory to the folder that you moved hugo.exe to (/hugo).
3. Run $ choco install hugo-extended.
4. Check $ hugo env and make sure libsass is installed.
5. Open Git Bash in the /hugo folder, change directory to quickstart folder.
   Then run $ hugo server again. It should work now.
6. Open the /hugo folder in a text editor (like Visual Studio Code) and enjoy the journey!