Hugo Site Example:

nobodyhome

Introduction

This guide is not all inclusive. RTFM. Hugo is a static site generator, converting your .md text files, and a chosen theme into a modern looking website (like this one). There are a staggering number of themes to give you the look and feel that your site needs.

themes

Everything Up Front

It all starts with the hugo.yaml file (you can use .toml too, but that’s beyond my expertise, consult the hugo documentation). Here is the configuration for this site:

hugo.yaml

baseURL: https://nobodyhome.dev/
languageCode: en-us
title: Nobody's Home
theme: ["PaperMod"]

enableRobotsTXT: true
buildDrafts: false
buildFuture: false

ShowReadingTime: true
ShowCodeCopyButtons: true
UseHugoToc: true

minify:
  disableXML: true
  minifyOutput: true

menu:
  main:
    - identifier: search
      name: Search
      url: /search/
      weight: 1
    - identifier: Tags
      name: Tags
      url: /tags/
      weight: 2
    - identifier: Posts
      name: Posts
      url: /posts/
      weight: 3

params:
  title: nobodyhome.dev
  description: "Documentation and lessons learned from my homelab services."
  author: welcome-welcome-2themachine
  DateFormat: "January 2, 2006"

  assets:
    favicon: "/img/favicon.ico"

  ShowBreadCrumbs: true
  ShowPostNavLinks: true

  profileMode:
    enabled: true
    title: Nobody's Home
    subtitle: "Documentation and lessons learned from my homelab services."
    buttons:
      - name: Posts
        url: /posts/
        style: primary
      - name: Search
        url: /search/
        style: primary
      - name: Tags
        url: /tags/
        style: primary
      
    imageUrl: "https://avatars.githubusercontent.com/u/11509172?v=4"
    #imageUrl: "/assets/iamroot.png"
    imageTitle: "I'm Root"
    imageWidth: 300
    imageHeight: 300

  socialIcons:
    - name: "Github"
      url: "https://github.com/welcome-2themachine"

outputs:
  home:
    - HTML
    - RSS
    - JSON # necessary for search

Directory Structure

Here’s how everything is stored in the hugo directory. The hugo.yaml file resides in the root directory:

├──hugo.yaml #This is the yaml file above
├──README.md
├──archetypes
├──content
│  └──Posts #this is where your posts go
|  └──posts.md
|  └──search.md
├──PaperMod
├──public
│  ├──[DO NOT TOUCH THIS - HUGO GENERATED]
├──static
│  ├──assets #this is where I'm storing the images for my posts
│  │  ├──[A FOLDER PER POST WITH IMAGES]
│  └──img
└──themes
   └──PaperMod

Breaking It Down

That was a dump of information, so here’s the context and some basics.

Getting Started

  1. Set up the project with hugo new project PROJECT-NAME
  2. Get the site up and running: hugo serve.
  3. Edit the site and posts to your heart’s content, then finalize it with hugo build.
  4. Move the site contents from the public folder to your chosen web hosting service (nginx, apache, caddy, etc).

My workflow

  1. Build the post using a standard setting for each page:
---
title: "Hugo"
tags: ["web","service"]
author: welcome-2themachine
draft: false
canonicalURL: "https://nobodyhome.dev/posts/hugo"
showToc: true
ShowCodeCopyButtons: true
date: 2026-04-24
---

  1. Build the post:

    links: [text to display](link url)

    images: ![a short name](image location from the site root directory)

    code snippets using the “`” character, use three to open and close code blocks “```”

  2. Regenerate the site contents:

hugo build --minify --cleanDestinationDir

or

hugo build --minify --cleanDestinationDir -d [DESTINATION DIR]
  1. Move the contents of the public folder to your hosting service.

Additional Configuration

See above ‘hugo.yaml’ - the search.md file contains the following contents:

---
title: "Search" # in any language you want
layout: "search" # necessary for search
url: "/search"
description: "Find what you're looking for"
summary: "search"
placeholder: "what are you looking for?"
---

Posts

Again, here’s the .md file:

---
title: "Posts"
layout: "archives"
url: "/posts/"
summary: "posts"
---

Conclusion

Hugo is incredibly flexible, and endlessly customizable. This little walkthough barely scratches the surface, but shows how I’ve implemented it onto my website.

References