Bragging About My New Hugo Theme

I wanted to rewrite my website for a while now. My modified HUGO.386 theme was cool, but I got bored with it, and since I finally (re)learned how to write HTML and CSS, I decided to take what I learned and use it in a Hugo theme.

Design Choices

I decided to make my new webpage in the boring-but-modern-and-spaced-out layout, basically replicating every other landing page currently out there, and more-or-less half of the existing Hugo themes showcased on their page.

Here is what I wanted to have:

A homepage with:
- 1 featured article
- a Recommended (manually chosen) articles section
- a Recommended (manually chosen) gallery section
- a section for the Markdown content for the main _index.md file.
An article list page
A gallery list page
Regular article pages
A gallery-type page, which is a redirect to a photo.

I wanted to differentiate between regular articles and gallery items, because I want to host my own image dump, instead of relying on social media, like Mastodon.

The Article Pages

The new article page allows me to add a background image (also used as a preview image in Homepage and lists, and as og:image meta content), title, subtitle (most people used description here, but I chose subtitle instead), author field, with params for the link to author and the fediverse_creator meta tag. The article can also be selected as a frontpage content (to be shown as a recommended article) and featured content (lastest featured article published will be shown on the homepage).

---
title: 'Bragging About My New Hugo Theme'
subtitle: 'I **finally** sat down and wrote this thing.'
date: 2025-05-16T21:48:37+03:00
background_image: '/images/blog/bragging-about-my-new-hugo-theme/bg.png'

author: 'CritteR'
social_media_url: 'https://mastodon.social/@crittero'
fediverse_handle: '@crittero@mastodon.social'

draft: false
frontpage_content: true
featured_content: false
---

The old theme didn’t allow me to markdownify the contents of … well… anything other than the regular content. Titles, subtitles, page names, etc, were all text-only in content. Any other modification had to be done in code.

Now that I wrote my own theme (and decided to read the Hugo docs as well), I made sure that I can change as much as possible in content, without going through the theme / site layouts. This is why all pages (regular, lists, homepage, etc) allow .Content to be displayed, and why all titles and subtitles and markdownified and safeHTML-ed.

Above images are from the old content that I had. The only thing that I changed is adding the “Original Post” link from the content, to the page subtitle.

The style is a lot more spaced out than the previous theme, but in my opinion it looks better. Also, now all articles have the fediverse_handle meta tag (if I want), which means I can add a different Mastodon (or other services that use it) account based on whatever article I write.

Screenshot of a Mastodon post, which shows my article's OpenGraph card, and the fediverse mention. — Screenshot of a Mastodon post, which shows my article’s OpenGraph card, and the fediverse mention.

The Article List Page

The list page uses the same article cards as the Homepage’s “Recommended articles”, but with more space-per-card (2 per row, instead of 3, and less padding between them). It shows a preview image (or a fallback one), date published, reading time, title and summary of the article.

The list page title and subtitle can be modified in _index.md and they both support markdown. The list background banner uses the same background_image param as the articles. Homepage uses the same param for the main image.

The All-New Gallery List Page

This working the same as the list page, but using the gallery cards instead of the article cards. They are the exact same gallery cards as the ones of the homepage.

Hovering over the image will show you the title and subtitle of the image, as defined in their .md pages. Gallery images are regular pages in content, but they don’t open a single-type page. Currently, clicking on the image will simply open it in full resolution, in another tab.

I plan on writing a different single page for it, some time later, to allow space for content as well. But for now I like it like this.

Missing Things and Future Plans

Table of features
I forgot to add support for categories and tags. I only realized that after porting my previous content. It’s not the end of the world, I personally didn’t focus on them that much, but they useful for filtering content, so I plan on adding them … at some point.
Multi-language support is also something that I want to add. I want to write more in Romanian, so having they page automagically translated to RO is on my bucket list.
Pagination is also needed. I’ll add that when I have enough content to matter.
A better way for easy image dumps. Right now I have to create a different content page for each image.
A comment section. I already have the form! (But it doesn’t work)

The Comments

I wrote a shortcode for a comment form, that can be added to any content section. It doesn’t work right now, but I’ll add it here just to show off. I don’t really want to show them on the page, but I will want to catch them in some e-mail style app, with the article reference and the comment.

Final Notes

Nothing. I’ll probably release this when the missing things are added. Thanks for reading!