My First Post: The Creation of Moniker
Why Moniker?
When I began, I had a simple idea, a theme that was clean and straightforward, yet inviting enough to stand out. I didn’t want something overly austere like a brutalist website, but at the same time nothing overly complex since this is my first time building a website template from scratch.
This project was my first real plunge into the world of front-end web design, and even though I started with only a little prior experience, I learned a tremendous amount along the way. Here’s a look behind the scenes at the parts that make up Moniker and the things I learned from putting it all together.
The Building Blocks
Archetypes: A Starting Point for Every Page
I started with Hugo’s archetypes to simplify content creation:
- default.md
This file lays the foundation for new pages. It automatically generates a title (by transforming the file name), sets the date, and marks the content as a draft. It was a neat way to ensure consistency without repetitive typing. - posts.md
Specifically designed for blog posts, this archetype includes placeholders for tags and a thumbnail as well as the title and date used in the default archetype. I really love this feature in Hugo as tt taught me how to pre-configure content, so I never have to worry about missing details when writing a new post as well as save time creating the frontmatter each and every time.
Diving into Layouts and Templates
Hugo’s templating system is incredibly powerful, and building Moniker really pushed me to understand its potential. Here’s what I did:
The Base Layout
- File:
layouts/_default/baseof.html
This file is like the skeleton of the theme. It includes the common header and footer sections and defines a block (main) where specific page content is injected. Learning about this file and how it’s used in every Hugo theme, taught me the importance of having a solid foundation to ensure consistency across all pages.
Homepage
- File:
layouts/_default/homepage.html
For the homepage, I took inspiration from many different and amazing Hugo themes and combined many aspects of several of them together. It features:- A circular profile image.
- A bio section that pulls content from an
_index.htmlfile, so updating my introduction is as simple as editing a single markdown file in the content folder. - Social links to GitHub and LinkedIn, using feather icons for a modern look. While I don’t personally use LinkedIn right now, I would like to eventually submit this theme to the official Hugo themes repository and LinkedIn is very popular.
- A dynamic list of recent posts, limited to four, which gives visitors a quick peek at my latest posts.
Post and Single Page Layouts
-
Posts Layout: (
layouts/_default/posts.html)
This template shows the title, an optional thumbnail image, the main content, and metadata like the publication date and tags. Formatting dates and linking tags to their taxonomy pages were new challenges that helped me learn about Hugo’s built in functions. -
Single Layout: (
layouts/_default/single.html)
This layout is used for displaying single pages like CV and Projects.
Taxonomies and the 404 Page
-
Tag and Terms Pages:
I set up custom templates (layouts/taxonomy/tag.htmlandlayouts/taxonomy/terms.html) to manage tags. They not only list posts under each tag but also add pagination for better navigation, pagination also has a parameter in hugo.toml to control how many are displayed per page. -
404 Page: (
layouts/404.html)
It’s simple but crucial.
Modular Design with Partials
To keep my code DRY (Don’t Repeat Yourself), I split common elements into partials:
- header.html:
This partial includes all the<head>elements like meta tags, links to stylesheets, the theme toggle and feather scripts. I also built a dynamic navigation menu here, which reads from the config file. - footer.html:
It holds the site’s credits, the footer text, and a small script call to initialize feather icons. - cursor.html:
A small, animated cursor (because why not?). - post-list.html:
Used in taxonomy and paginated post listings, this partial helped me keep the post grid consistent and reusable across the two different sections.
Styling: Bringing It All Together
I am currently using one long style.css file and a fonts.css file, in the future I will make these more modular and perhaps include SCSS, adding parameters for accent color control, adjustable profile picture size and things of that nature:
- style.css:
Here, I defined the overall layout of everything from the responsive grid for posts to the transitions on links and buttons. Experimenting with different effects, like gentle shadows and scaling animations, was both fun and challenging, I do have some prior experience with CSS from customizing my Hyprland dotfiles. - fonts.css:
I decided to host fonts locally (Lato and JetBrains Mono) in thestatic/fonts/folder. This not only boosts performance but also preserves user privacy by avoiding external font requests.
Dark and Light Mode
I prefer dark mode on just about every website I visit whenever it’s available and even when it’s not, and with DarkReader I can. But still, I wanted users to have a choice, so I implemented a dark/light mode toggle with javascript(I will most likely make a purely CSS implementation of this in the future):
- theme-toggle.js:
This script listens for clicks on the theme toggle link, switches the body class betweenlightanddark, and updates the feather icons accordingly. It also saves the user’s preference in localStorage, so the site remembers their choice on future visits as is standard on most websites nowadays.
Config File
The hugo.toml file:
- Site Settings:
It sets the base URL, language, and site title. - Params Section:
This part defines your personal details, like the profile image path, social links, and even the footer text. As I mentioned before, at some point in the future I will be adding even more parameters for further customization. - Menus and Taxonomies:
The config also includes definitions for navigation menus and taxonomies (only tags, I did not see a need for categories as of now, but may add support for them in the future), allowing for dynamic content organization and filtering.
Lessons Learned and Moving Forward
Building Moniker wasn’t without its frustrations. As always there were moments when a missing semicolon or a misconfigured partial left me scratching my head. But every challenge taught me something new:
- Attention to Detail:
Even the smallest change can have a big impact on the final look and feel as well as have the potential to break the entire functionality of the template. - Modularity Pays Off:
Breaking the theme into layouts and partials not only simplified the development process but also made the theme more maintainable going forward. - UX Matters:
Implementing features like dark/light mode and responsive design made me appreciate how small touches can improve the overall experience for visitors. - Updating and New Features: Although I will undoubtedly be working on multiple other projects over the next few months, I do plan on updating and adding many new features to Moniker whenever I can, the next thing I plan on adding is support for SEO.
This project has been an invaluable learning experience with front end development.
Thanks for reading!
Check out Moniker Here