Details Link to this heading

  • Live Demo: You’re here now!
  • Tech Stack: Hugo, HTML/SCSS, JavaScript, Netlify
  • Project Type: Personal
  • Year(s) Built: 2016-Present

Rebuilding Link to this heading

I recently decided to rebuild this site and start over from a clean slate. You can read about some of the recent changes there. I also explain on the homepage why I moved away from the open source Hugo theme I built to a private codebase.

Trying Out Zola Link to this heading

Before I refactored the theme into what you’re reading now, I first dropped the blog portion altogether and replaced my site with what was effectively just a static homepage. The reason being, I thought I wanted to take a break from blogging to focus on different things. After a few weeks without one, I missed having the freedom to share what I was learning on a whim.

Then, I experimented with trying out a newer static site generator, Zola (a strange naming choice — it has nothing to do with planning a wedding). It’s similar to Hugo, which is what I’m used to.

The main selling points of Zola are (even) faster build times, a more user-friendly, “Jinja-esque” templating language, built-in Sass support, and a simpler setup in general. The downsides — in my opinion — are less flexibility, the absense of some key features, and confusing documentation.

Back to Hugo Link to this heading

In the end, I came crawling back to Hugo. I like having lots of control, even if that results in slightly higher complexity. Once you understand how Hugo approaches templating and content organization, it’s an extremely powerful tool for building websites.

Tech Stack Link to this heading

Hugo Link to this heading

Hugo, obviously, is the core of this site’s tech stack. I host the site on Netlify and accept form submissions with Netlify Forms. Newsletter sign ups are passed from Netlify to Mailerlite via a Zapier zap. I don’t really write a newsletter, but that’s a different story.

I’ve been thinking about migrating to my own VPS. I don’t like some of the decisions Netlify has made recently as a company. Doing so would increase the maintenance effort significantly, but would also keep my Linux and server admin skills sharp. I would also need to replace the form service or roll my own forms.

SCSS Link to this heading

I use SCSS for styles with 4 types of modules: base, components, pages, and vendors.

  • base — files for the styling of base HTML elements, font declarations, layout styles, mixins and variables.
  • components — a file for each component, such as buttons or forms.
  • pages — styles for specific pages of the site, or types of pages (list, single, etc.)
  • vendors — 3rd-party styles, of which I only use normalize.css

JavaScript Link to this heading

I try to keep the amount of JavaScript on my site minimal. Anything I can achieve with CSS, I will. The only real JS on the current version of the site is the code snippet clipboard and table of contents toggle. Regardless, the JS is modularized, built with Hugo Pipes (esbuild), and minified in production.

Previous Versions Link to this heading

Different ways I’ve built this site over the years include: Static HTML/CSS/JS, WordPress, Django with CKEditor or Wagtail, Webflow, and Hugo.

I think the reason I settled on Jamstack is the simplicity.

Webflow Link to this heading

Webflow is great for non-technical users with design skills, but if you know CSS, building by hand is just as fast. Plus, the vendor lock-in for hosting is unappealing.

Django Link to this heading

Django is my go-to for building web apps but way overkill for a simple blog in terms of development and maintenance. That puts Wagtail out of contention as well, though it may provide some tools that make building a CMS from scratch easier. I would only consider Wagtail for a commercial project with a large budget and very custom requirements.

WordPress Link to this heading

WordPress is perfect for business and marketing websites, but unless you want to learn how to build themes from scratch or use a janky page builder, it can be difficult to customize.

Jamstack Link to this heading

So that leaves us with Jamstack sites. Nothing beats it for technical users building personal blogs. Free hosting on Netlify with low traffic. Basically zero maintenance. Secure by default. Full control over every aspect of your site. I could go on…

The only problem with static site generators like Hugo is CMS compatibility. Sure, you could reach for a Headless CMS and write the integration yourself. But it can be either expensive, or a pain when that vendor suddenly abandons their project (cough Netlify).

#Hugo #Blogging

Share

See Also

Read Next