Hugo

05 Jul, 2025

Well Yesterday I found out HUGO and static site generation. Now I was thinking to host my notes like this and code and stuff as a DEVLOG but doing frontend burns the hell outta me. So I discovered Jekyll but then understood I needed Ruby installed in Order to use Jekyll !

So exploring further I found out Hugo and how I don't need Ruby installed but obviously had to install Hugo.

Seeing how crazy good it was I was Seriously impressed !

I can create fully responsive minimalistic websites without banging my head on HTML, CSS and JavaScript. All I needed to know is markdown which I already do and like using it !

Loaded Microsoft Copilot and Docs to help me through the whole control flow of Hugo and soon enough I was able to static sites using Hugo. The templates from Hugo Themes are very good and are responsive !

The Devlog is made using Hugo !

For the theme I choose the PaperMod theme, very minimalistic, responsive and suits very good for purposes like Devlog !

Explored Hugo Tags, Titles and Dates and how Hugo uses TOML for configurations.

Lets summarize what I found and learnt so far:

Hugo uses commands to create new site and files and uses .md files as primary input and then renders them to corresponding HTML, CSS and JS. View list of Hugo Commands here.
Each .md represents one HTML Page. Initially stored in the contents directory.
The url uses the same directory structure for route. For example: If We have a archive.md in /content/archive.md the corresponding url will be localhost:1313/archive.
Sub-folders will be treated as sub route. For example: If archive.md is in a sub folder in content like /content/posts/archive.md the corresponding url will be localhost:1313/posts/archive.
Hugo uses toml for config and things like title, language, theme, params can be set by modifying the hugo.toml file.
To modify the home page, we need to create a _index.md in the content folder and add content as desired. It needs to be in content folder and not in any sub folders.

Changing Fonts

Next I needed to change font for my Devlog !

First it seemed hard but thanks to this thread I was able to change my font ! I used Google Fonts to get my font.

👉🏼 Font I used: 📎 Overpass

WHAT I DID ?

In the themes folder I navigated to themes/layouts/partials/header.html, added the HTML link tags at the very top of the file.
Then navigated to themes/assets/css/extended/blank.css, added the following code block in the file.

body {
    font-family: "Overpass", system-ui;
}

li {
    margin-bottom: 1.5rem;
}

pre, code {
  font-family: monospace, sans-serif;
}

NOTE: The header.html and blank.css were part of the theme I used, this may vary depending what theme you decide to use !

Credits

Additional

I will keep this thread updated as much as possible and share any updates and finds regarding HUGO !

#Hugo