Source: Dev.to

Source: Dev.to

IndieWeb‑Friendly Blog Themes

Ask anybody on the IndieWeb what they think about blogging, and you’ll most likely get a rather passionate, long‑winded answer. I’m no different. I started getting into web development over a decade ago with Jekyll and the announcement of Ghost while I was still in high school.

As the years have gone by, I’ve stayed in this cozy, somewhat obscure niche of JAMstack development, making static‑site themes and projects that are open source and free for others to use however they like. This is exactly why I founded 🍓 Berry House in the first place: I believe having your own website is becoming more important and useful in today’s age of corporate‑AI “slopfests”.

Yesterday I received a donation from the lovely BinaryDigit, crediting me for the 11ty theme I previously called RetroWeird. It made me realize I needed to get back into making blog themes.

• As fun as RetroWeird is visually, I can’t imagine it would be easy to use as a blog theme—there would be a lot of wrestling with it. (Hyperpop is another fun theme I made, but it has similar problems.)
• Even though it’s only been a few months since I made those themes, I’ve already learned a lot. Sometimes, like actual property, it’s easier to start from scratch than to try to do renovations.

So I returned to form: start from scratch, apply what I’ve learned over the past few months, and make the best possible themes for people who want to get onto the IndieWeb.

With these themes—or any themes for Hugo, 11ty, Jekyll, Pelican, etc.—all you need is a Git repository (GitLab, Codeberg, GitHub, …). Hook it up to a service like Netlify or Vercel and you have your own blog for free. The only cost is a domain name. No databases, no monthly fees, no limitations to customization. Write your posts in plain‑text Markdown files however you like, and that’s it.

With all that out of the way, let’s actually get to the themes!

Platform: Hugo

Philosophy: Smolweb compliance meets brutalist design

Repository: (link pending)

Demo: (link pending)

Indiepaper is the first theme I started on, and originally was going to be the only one I’d make before procrastination and scope creep got the better of me. It takes inspiration from the brutalist web‑design movement with a greyscale aesthetic.

• Microformats2 support built‑in: h-card for author identity, h-entry for blog posts, h-feed for listings, and h-cite for webmentions.
• Smolweb‑compliant – it’s small! No embedded fonts, JavaScript, or CSS frameworks. Minimalism makes it easy to customize without breaking anything.

I used Modern Font Stacks to avoid relying on Google Fonts.

• Body: old‑style serifs (e.g., Iowan Old Style, Palatino Linotype)
• Headings: geometric‑humanist sans‑serifs (e.g., Avenir, Montserrat, Corbel)
• Code blocks: modern monospace fonts such as ui-monospace, Cascadia Code, and Source Code Pro.

Platform: Eleventy (11ty)

Philosophy: Newsletter‑first publication meets classic newspaper design

Repository: (link to repo)

Demo: (link to demo)

While building Indiepaper, I wanted a blog that actually looks like a newspaper—skeuomorphic, like the style used by omg.lol’s news and updates. A helpful CodePen snippet by Silke V. jump‑started the design.

Key Features

• Newspaper‑style layout

  • Multi‑column pages
  • Traditional masthead
  • Drop caps, pull quotes, ruled lines
  • Sepia colour palette

• Thoughtful RSS

  • Full‑content feeds using email‑safe HTML
  • Category‑specific feeds for News, Opinion, Features, Culture, and Business
  • Main feed: /feed.xml
  • Category feeds: /feed/news.xml, /feed/opinion.xml, etc.

• Front‑matter schema (per article)

  • title
  • subtitle (deck)
  • date
  • author
  • category
  • featured (boolean – promotes the article on the homepage)
  • excerpt (used for RSS and meta descriptions)
  • Optional image with caption

• Sidebar

  • Social‑platform links
  • Built‑in donation support (Ko‑fi, Patreon, or any platform)
  • Donation block can be hidden if you don’t want to monetize

• Homepage

  • Dedicated featured‑article section
  • Grid of the latest nine articles (excluding the featured one)

Platform: Hugo

Philosophy – Japanese‑inspired web design with vibrant colours, dense information layout, and a modern, accessible approach.

Repository: [Add repository URL here]
Demo: [Add demo URL here]

---

About the “silly” Theme

When I started omg.lol, I wanted a site that combined the visual punch of Japanese web design with a modern, accessible feel. The silly theme embraces:

• Vibrant colour palettes inspired by Japanese pop‑culture sites.
• Dense information layout that still respects readability and WCAG accessibility guidelines.
• Responsive typography using the same Modern Font Stacks approach as Indiepaper, but with a focus on contrast and hierarchy.

The result is a bold, information‑rich blog that feels both playful and professional—perfect for creators who need to showcase a lot of content without sacrificing usability.

---

Getting Started

1. Fork or clone the repository you’re interested in.
2. Configure the site’s config.toml / config.yaml (or the Eleventy equivalent) with your own details (author name, social links, etc.).
3. Add your Markdown posts to the appropriate content folder.
4. Deploy to Netlify, Vercel, Cloudflare Pages, or any static‑site host of your choice.

That’s it! You now have a fully IndieWeb‑compatible, smolweb‑friendly blog ready to publish. Happy hacking!

My Domain Journey

I wanted a short, memorable domain, so I started searching for any TLD that was available. There are so many options these days—.taxi, .pizza, .skins, and countless alternatives to the boring .com or .org we’ve grown accustomed to.

I eventually settled on brennan.day, but I also bought brennan.page and brennan.cafe because they were cheap first‑year purchases and short. I’m currently using the latter two for home‑servers I’ve been neglecting (it’s fun to procrastinate side projects with other side projects!).

While searching, one domain caught my eye: brennan.jp.net. It was inexpensive (under $8 for registration and future renewals), short, and simple.

Why Japanese Web Design?

“Japanese web design sure is interesting, huh?”

I wanted to recreate the compact, text‑heavy, colourful aesthetic of traditional Japanese web design from the 1990s‑2010s while keeping modern accessibility and performance standards.

Many have already written about this topic with far more knowledge and research than I have, but digging into it, I found the phenomenon fascinating. As one Reddit user succinctly put it:

“Japan, living in the year 2000 since 1985.”

The essence is that a lot of Japanese sites still retain a classic Web 1.0 aesthetic that isn’t exactly what the Web 1.0 aesthetic looked like in the West. There’s a simplicity, but also a density—a wide array of rows and columns displaying diverse information to the user all at once.

Historical Context

Pre‑iPhone mobile web (Japan)

• 1999 – NTT DoCoMo launches i‑mode, bringing email and web browsing to compact phones years before the rest of the world.
• 2000 – Japanese phones gain built‑in cameras.
• 2001 – 3G arrives; the J‑SH04 enables photo messaging before most people have even heard of a smartphone.

Western shift (≈2007)

• As the West began simplifying web design for the iPhone, Japanese designers felt less pressure because they had already optimized for tiny screens a decade earlier.
• Those text‑heavy, densely packed layouts were crafted for one‑handed phone navigation on crowded Tokyo trains.

Cultural Expectations

Japanese UX architects note a cultural expectation of passivity in information presentation: users prefer comprehensive, brochure‑like content rather than digging through minimalist menus.

• Detail and thoroughness are valued over stark minimalism.
• Bright, clashing colours echo the neon‑lit streets of Tokyo, where every available space is used efficiently.

Because the Japanese language contains thousands of CJK characters, there are far fewer web‑font options compared to Latin alphabets. Consequently, many Japanese sites embed text in images to gain typographic freedom that web fonts can’t provide.

Quantitative Study

A fascinating quantitative study by Sabrina’s Space examined 2,600 images of popular websites. The clustering analysis found that Japanese sites:

• Avoid dark, minimalist designs.
• Cluster around lighter colours and higher visual density.

This pattern does not appear in other countries, even neighboring nations with similar writing systems.

Design Characteristics

• Nostalgic, newspaper‑style layouts packed with information.
• Bright, vibrant colours with thick borders.
• Classic Web 1.0 elements: webrings, 88×31 badges, visitor counters (using local storage for fun, not actual analytics).

Despite the retro look, the designs maintain modern accessibility:

• Proper semantic HTML.
• Keyboard navigation.
• High contrast.
• Screen‑reader compatibility.

---

Theme Features

All three themes I’ve created are:

• Accessible – configurable via hugo.toml, with simple colour overrides (hex codes), optional sidebars, and a place for custom CSS without touching core files.
• Deploy‑ready – host for free on Netlify, GitHub Pages, Vercel, or Cloudflare Pages. The only cost is a domain name (as cheap as $5 / year on Porkbun).
• Open‑source – released under the AGPL license; you can use, modify, and even commercialise the themes as you wish.
• SEO‑friendly – includes noindex options for demo sites (remember to turn this off when you launch!), social‑media meta tags, and optimized feeds.

The Three Themes

All three embody my commitment to content ownership, web standards, and the IndieWeb principles of controlling your own digital identity. They are fast, dependency‑free, and built with just HTML, CSS, and Markdown files.

Closing Thoughts

Whether you’re a writer, journalist, developer, or simply someone who wants a corner of the internet to call your own, these themes provide a solid foundation for building something meaningful. Just you, your words, and your website.

Happy blogging!