<link rel="stylesheet" href="/css/style.css">

to this in my Hugo template:

<link rel="stylesheet" href="/css/style.css?v={{ now.Unix }}">

The {{ now.Unix }} part adds a unique number (a timestamp) to the end of the file URL every time the site builds. This tricks the browser into thinking it's a completely new file, so it always loads the latest version. Problem solved! ✅

The Invisible Blog Post
I published my first real post, but it was completely missing from my blog's search results! I could see the post file (add-search-to-hugo.md) and the content was in the index.json file that Lunr.js uses, but the search couldn't find it.

After hours of confusion, I discovered the culprit: a mismatch between my filename and the slug in the front matter.

My file was named: add-search-to-hugo.md
But my front matter title was: title: "How I Added Search Bar to My Hugo Blog"

Hugo automatically generates a URL "slug" from the title, which was how-i-added-search-bar-to-my-hugo-blog. But my search script was looking for a slug that matched the filename: add-search-to-hugo.

My Solution: I added an explicit slug parameter to my post's front matter to exactly match my filename:

title: "How I Added Search Bar to My Hugo Blog"
slug: "add-search-to-hugo" # This fixed everything!
date: 2025-09-01


After this update, my post appeared in search results instantly! It was a huge relief and a valuable lesson in how Hugo manages URLs. ✅


The CSS Overflow Problem & How I Fixed It

While writing this post, I encountered a frustrating layout issue: whenever I added code snippets, they would break out of their containers and mess up my entire page layout. The text would overflow, the sidebars would get pushed around, and everything looked broken.

Here's what was happening:

Code blocks (<pre> tags) have a default behavior of not wrapping text

Long lines of code would extend beyond their containers

This caused horizontal scrolling on the entire page instead of just the code block

The layout became messy and unprofessional-looking

The solution turned out to be surprisingly simple! I added this CSS to my theme:

/* Contained code blocks with proper scrolling */
pre {
  overflow-x: auto;
  padding: 1rem;
  margin: 1.5rem 0;
  background: #1f2937;
  border-radius: 0.5rem;
  border: 1px solid #374151;
  max-width: 100%;
}

/* Ensured code displays properly */
pre code {
  display: block;
  overflow-x: auto;
  white-space: pre;
  word-wrap: normal;
}

What this fix does:

overflow-x: auto adds horizontal scrolling only when needed

max-width: 100% prevents code blocks from exceeding their container

The padding, background, and border make code blocks visually distinct

white-space: pre preserves code formatting without breaking layout

Now my code snippets stay neatly contained in their own scrollable boxes, and the rest of my content flows perfectly around them! It's one of those small fixes that makes a huge difference in readability and professionalism.

Lessons Learned
It wasn't easy, but the feeling of overcoming those challenges and having a site that I built exactly how I wanted is unbeatable. That said, I'm still smoothing out a few quirks! For example, my main app.js works for categories and dark/light mode, but doesn't play nicely with the homepage, search bar, or Utterances yet—so I'm using separate JS files for now. I'll tackle that later!

Throughout this process, I used AI not to do the work for me, but as a guide to learn and find my own answers. Most importantly, I learned to:

🧠 Be patient with the process

🎯 Stay focused on one problem at a time

💪 Not give up easily when facing obstacles

Start Your Own Journey
If you're thinking about building your own blog, just start. You'll hit walls, but I promise you can break through them. The satisfaction of creating something truly your own is worth every challenge.

Feel free to check out my site and let me know what you think—I'd love your feedback in the comments! And if you like what you see, please subscribe to my newsletter for updates.

Happy coding! 🚀