β–  Blog Posts (17)

A laptop computer with code on the screen, representing web development and static site generation

Building Static Sites with Hugo: A Practical Guide

Hugo makes building static sites incredibly fast and efficient. Let’s explore some practical code examples that showcase why Hugo is perfect for personal blogs and IndieWeb sites.

Why Hugo?

Taken from https://gohugo.io/

  • Optimized for speed Written in Go, optimized for speed and designed for flexibility. With its advanced templating system and fast asset pipelines, Hugo renders a large site in seconds, often less.
  • Flexible framework With its multilingual support, and powerful taxonomy system, Hugo is widely used to create documentation sites, landing pages, corporate, government, nonprofit, education, news, event, and project sites.
  • Fast assets pipeline Image processing (convert, resize, crop, rotate, adjust colors, apply filters, overlay text and images, and extract EXIF data), JavaScript bundling (tree shake, code splitting), Sass processing, great TailwindCSS support.
  • Embedded web server Use Hugo’s embedded web server during development to instantly see changes to content, structure, behavior, and presentation.

Hugo Configuration

The heart of any Hugo site is the hugo.toml file. Here’s a minimal but complete configuration:

Landscape photo of Tokyo city streets with busy urban life, representing Japanese web design vibrancy

Welcome to the Japanese Web

Welcome to brennan.jp.net! This site is a love letter to the vibrant, dense, colorful aesthetic of traditional Japanese web design from the 1990s through the 2010s.

Why Japanese Web Design?

The Japanese internet developed a unique visual language that prioritized information density over minimalism. Where Western web design trends moved toward whitespace and hero images, Japanese websites packed every pixel with content, color, and character.

This wasn’t bad design β€” it was a different design philosophy. One that valued giving visitors everything they needed without making them click through pages of empty space.

A person using accessibility features on a computer, representing inclusive web design

Accessibility Is Not Optional

When I built this site to emulate the dense, colorful aesthetic of Japanese web design, I made a promise to myself: it would be accessible. Every decorative element, every bright color, every packed sidebar. None of it would come at the cost of usability.

The Myth of the Trade-Off

There’s a persistent myth in web design that accessibility and aesthetics are at odds. That making a site screen-reader friendly means making it boring. That sufficient color contrast means muted colors.

A black Dell laptop with blank screen sits open on a wooden desk next to a vintage black Underwood typewriter, bathed in natural sunlight streaming through a window. Behind them are a large stainless steel pot, amber-colored glassware, and a wooden chair. An evolution of writing tools.

A Beginner's Guide to the IndieWeb for Writers Who Don't Code (But Maybe Want to a Little)

I am somebody that dives into both the literary (which is typically navel-gazing thinkpieces that are philosophical in air quotes) and the technical (where I usually just wrestle with a weird npm build bug for several hours).

One of the biggest topics I’ve been focused on the past while is the IndieWeb, also known as the independent Internet. In the simplest terms, this means owning your content and platform instead of using corporate social media that engages in dark practices like surveillance capitalism. Nearly every single person that uses the Internet does NOT use the IndieWeb. We’re all on Facebook, Instagram, TikTok, LinkedIn, or God forbid, X.

A watercolour painting of a rural mountain village scene. In the foreground, simple buildings with corrugated metal roofs line a dirt road where small figures walk. A flag flies from a pole near the center of the settlement. Behind the buildings, dense green trees dot the landscape, and in the background, dramatic mountains rise with slopes showing varied colors of pink, orange, green, and brown.

What I Have Learned Being on the IndieWeb for a Month

Around a month ago, after discovering omg.lol and writing an article on it (which turned out to be one of my most popular, ever). I decided I finally needed to get serious about my own contributions to the IndieWeb. Sure, I’ve have a portfolio for years, but so what? This is performative and designed for recruiters and potential future employers.

No, I needed something entirely different, entirely just for me. to buy a new domain on PorkBun, sign up on GitLab to build a new site from scratch with a design that sparked joy for me, and finally sink my teeth and immerse myself into the independent Internet.

Hand-drawn infographic titled "INDIE WEB" explaining why to build your own website. Left side shows reasons: be visible to humans first, own your data, build tools yourself first, prioritize usability before protocols, and use platform-agnostic platforms to play well with others. Center emphasizes "THIS IS NOT A SOFTWARE PROJECT" and advocates building for the long web and having fun.

Resources for the Personal Web: A Follow-Up Guide

Last month, I wrote about omg.lol on my Medium blog, and something unexpected happened. The response was surprising! Thousands of reads and a dozen of comments, and dozens of people signing up with my referral, taking the leap into the independent web. People who had been lurking on the sidelines for years suddenly had their own corner of the Internet.

But with that excitement came questions. Where else should I look? What other tools exist? How do I find others like me?