After migrating from WordPress to Hugo, I started adjusting not only the converted posts and deployment flow, but also the parts that make the site easier to use.
This post summarizes the display-related changes I added to the Hugo environment.
What I Wanted to Improve
In this round of work, I adjusted the following points:
- Create a 404 Not Found error page
- Add keyword search inside the site
- Remove ads that appear at the top of the home page and post lists
- Move the Japanese / English language switcher out of the main menu and show it more quietly as flags only
- Show a default image instead of
No Imagewhen a post does not have a thumbnail
Hugo is a static site generator, so I wanted search and error pages to work in a way that still fits naturally into a static site.
About the 404 Page
After checking the production site, I found that creating the Hugo template alone was not enough for the 404 page.
public/404.html was generated, but the production environment was still showing the default Nginx error page. To show the 404 page created by Hugo, Nginx also needs to be configured to return /404.html when a 404 occurs.
I wrote the details separately in Creating a Hugo 404 Page and Serving It with Nginx.
Adding Site Search
For search, I decided not to use an external service. Instead, Hugo outputs a JSON file, and browser-side JavaScript searches through it.
In hugo.toml, I added JSON output for the home page. Then layouts/index.json outputs each post’s title, URL, date, summary, body text, categories, and tags.
The search pages are content/search.md and content/search.en.md. The Japanese page is placed at /search/, and the English page is placed at /en/search/.
On the JavaScript side, the script loads index.json and performs an AND search using the words entered in the search box. For a small personal blog, this simple approach feels useful enough.
Removing Top Ads
Ads at the top of the home page or post lists can get in the way when I am trying to find an article.
So I removed the top ad areas from the lists. I did not remove all ad placements. Instead, I kept ad areas in places that are less disruptive, such as below the home page content or below related posts.
Making the Language Switcher More Subtle
Switching between Japanese and English is useful, but having it appear as a main menu item made it stand out too much.
So I removed it from the menu and moved it to the top right of the header, using only flag-style icons.
The visible labels are only 🇯🇵 and 🇺🇸, while the links still keep language names in title and aria-label. This keeps the UI quieter while still making the purpose of the links available to browsers and assistive technologies.
Preparing a Default Thumbnail
Many posts migrated from WordPress do not have featured images.
Previously, cards without thumbnails showed No Image, but the post list looked a little plain. I added static/images/default-thumbnail.svg and changed post cards without thumbnails to use that image instead.
This applies to places that use post cards, such as the home page, post lists, and related posts.
Summary
Migrating to Hugo is not finished just because the posts are visible. Adjusting details such as 404 pages, search, ads, language switching, and thumbnails makes the site feel much more settled for everyday use.
There is still room to refine the design, but the basic usability pieces that I wanted after moving from WordPress are now mostly in place.