Adding Avatar to my Hugo blog

When I set up this blog using the risotto Hugo theme, I wanted to add a profile picture to the left sidebar, right below the site title. Sounds simple — and it is, once you know where to look. Here’s exactly what I did.

The Goal

Add a circular avatar image below the blog title in the sidebar, without touching the theme files directly (so updates don’t break anything).

Step 1 — Place the Image

Drop your image into the static/ directory at the root of your Hugo site:

static/avatar.png

Step 2 — Reference It in hugo.toml

The risotto theme already has a built-in logo_image parameter under [params.about]. Just point it at your file:

[params.about]
  title = "my DevOps Odyssey"
  description = "Your description here."
  logo_image = "avatar.png"
  logo = ""

Setting logo = "" clears the emoji/text logo so it doesn’t appear alongside the image.

Step 3 — Override about.html

Create the file layouts/partials/about.html in your site (not inside themes/). This overrides the theme’s version without modifying it:

{{ with .Site.Params.about }}
<div class="aside__about">
    <h1 class="about__title">{{ .title }}</h1>

    {{- with .logo_image -}}
    <img class="profile-circle" src="{{ . | absURL }}" alt="Logo">
    {{- end -}}

    {{ with .description }}<p class="about__description">{{ . | markdownify }}</p>{{ end }}
</div>
{{ end }}

The key change: the <h1> title comes first, and the image renders below it with the custom class profile-circle.

Step 4 — Add the CSS

In static/css/custom.css, add the following to make the image circular and properly sized:

.profile-circle {
    display: block !important;
    width: 150px !important;
    height: 150px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    margin: 1rem 0 !important;
    border: 2px solid #555;
}

.about__title {
    display: block;
    margin-bottom: 0.5rem;
}

object-fit: cover is important — it ensures the image fills the circle without being stretched or squished, regardless of the original aspect ratio.

Step 5 — Purge the Cloudflare Cache

If you’re running behind Cloudflare, don’t forget to purge the cache after deploying — otherwise you’ll stare at the old layout wondering why nothing changed.

Go to Cloudflare Dashboard → your domain → Caching → Purge Everything.

Result

A clean circular profile picture sitting right below the site title in the sidebar. No theme files modified, fully upgrade-safe.

Small things like this make a site feel more personal. Worth the ten minutes.