Hey there! If you’re just diving into the world of static site generators and picked Hugo, you’re in good company. I recently went through the process of setting up a basic blog and figured I’d share the steps in a way that might help someone else who’s just starting out. Think of this as a guide based on the questions I had and how I found the answers.

We’ll cover the basics: creating new posts, handling images, setting up an “About Me” page, adding navigation links, and customizing site elements like the favicon, header, and footer.

Creating a New Blog Post

The core of your blog will be your posts. In a standard Hugo setup like this one (using the PaperMod theme), your blog posts live in the content/posts/ directory.

To create a new post, you simply create a new Markdown file (.md) inside this directory. The filename will determine the URL slug for your post. For example, creating a file named my-first-post.md will typically result in a URL like /posts/my-first-post/.

Every post needs “front matter” at the very top. This is metadata about your post, usually written in YAML, TOML, or JSON. It’s enclosed by delimiters (--- for YAML). Here’s a basic example:

---
title: "Title of Your Post"
date: 2025-04-28T15:15:00-04:00 # Use the current date and time
draft: true # Set to true while you're working on it, false when ready to publish
tags: ["tag1", "tag2"] # Add relevant tags
categories: ["category1"] # Add relevant categories
---

Below the front matter, you write the actual content of your blog post using Markdown syntax.

Storing and Using Images

Images are crucial for making your blog visually appealing. You have a couple of main options for where to put them:

  1. static directory: This is for general, static assets like your site’s logo, favicon, or images you’ll reuse across multiple pages. If you place an image in static/images/my-logo.png, you can reference it in your Markdown like this: ![](/images/my-logo.png). The path is relative to the site’s root.

  2. Page Bundles: For images that are specific to a particular post or page, using a Page Bundle is often better. Instead of a single .md file for your post, you create a directory with the same name as your desired slug (e.g., content/posts/my-great-post/). Inside this directory, you place an index.md file (which contains your post’s front matter and content) and your images (e.g., image1.jpg, image2.png). You can then reference these images directly within the index.md file using just the filename: ![](image1.jpg). Hugo can also perform image processing (like resizing) on images within Page Bundles.

Creating an “About Me” Page

An “About Me” page is a common addition to a blog. You create this similarly to a blog post, but typically directly in the content directory, not inside content/posts/.

Create a file named about.md in your content directory (eoko.dev/content/about.md). Add front matter and your content:

---
title: "About Me"
date: 2025-04-28T15:15:00-04:00
draft: false # Make sure this is false so the page is published
layout: "page" # Often themes have a specific layout for general pages
---

This is where you write about yourself!

To make your “About Me” page ( or any other page) easily accessible, you can add a link to your site’s navigation menu. This is usually done in your main configuration file, hugo.toml.

You’ll add a [[menu.main]] section to your hugo.toml. Each [[menu.main]] block defines a menu item.

baseURL = 'https://eoko.dev/'
languageCode = 'en-us'
title = 'eoko.dev'
theme = "PaperMod"
enableRobotsTXT = true

[params]
  # Add PaperMod specific params here later if needed

[[menu.main]]
name = "About" # The text that appears in the menu
url = "/about/" # The URL the link points to (relative to baseURL)
weight = 10 # Controls the order of menu items (lower numbers appear first)

# You could add more menu items like this:
# [[menu.main]]
# name = "Blog"
# url = "/posts/"
# weight = 20

By adding this block to your hugo.toml, a link named “About” pointing to your /about/ page will appear in your site’s main navigation menu, depending on how your theme is configured to display menus.

You can further customize the look and feel of your site by adding a favicon, setting a header tagline, and adding content to the footer.

  1. Favicon:

    • Place your favicon image files (e.g., favicon.ico, favicon-32x32.png, apple-touch-icon.png) directly into the static directory (eoko.dev/static/). PaperMod is designed to automatically detect and use these standard favicon filenames.

  2. Header Tagline (Description):

    • Edit your hugo.toml file.
    • Inside the [params] section, add a description parameter with your desired tagline:
    [params]
  description = "Your site's tagline or description here."
  # ... other params

  3. Site Footer:

    • PaperMod often allows simple footer text via a parameter in hugo.toml. Look for a parameter like copyright within the [params] section and add your desired text:
    [params]
  # ... other params
  copyright = "© 2025 Your Name or Company"
    • For more advanced footer customization, you might need to override the theme’s footer partial template. This involves creating a file at eoko.dev/layouts/partials/footer.html. You can copy the content of the theme’s footer.html (found in themes/PaperMod/layouts/partials/) and modify it, or create your own HTML structure for the footer in this new file.

What’s Next?

With these steps, you have the foundation for a basic Hugo blog: creating content, adding images, setting up key pages and navigation, and customizing basic site elements. From here, you can explore more advanced Hugo features like taxonomies (tags and categories), shortcodes for embedding content, and further customizing your theme by overriding other partial templates or CSS.

Remember to run your Hugo development server (hugo server) to see your changes locally as you work, and build your site (hugo) when you’re ready to deploy.

eoko