Mindbrew

Develop brand-new blog theme based on `hexo`.

Comment

Inspiration

I’ve always wanted a personal blog that reflects a quiet, thoughtful aesthetic—minimalist yet rich in detail, with subtle Eastern undertones and a touch of literary warmth. Existing Hexo themes felt either too flashy or too sterile. So I decided to build my own: a lightweight, semantic, and responsive theme tailored to my voice and audience—especially for sharing ideas with global readers.

What it does

My custom Hexo theme renders clean, fast-loading blog pages with a 3:2 cover image system, elegant typography, dark/light mode support, and optimized for both reading and SEO. It’s designed to put writing first—no distractions, just clarity and calm.

How we built it

I started from Hexo’s minimal landscape base and rebuilt everything in EJS and SCSS:

  • Structured layout with semantic HTML5
  • Used post.cover front-matter to auto-process cover images (later optimized via CLI to 3:2 and <5MB)
  • Implemented dark mode with CSS variables and prefers-color-scheme
  • Added critical CSS inlining and lazy loading for performance
  • Deployed via GitHub Pages with a simple hexo deploy

All assets are local—no external CDNs—keeping the theme truly lightweight and private.

Challenges we ran into

  • Responsive cover alignment: Ensuring 3:2 images looked consistent across devices without layout shift. Solved with aspect-ratio CSS and object-fit: cover.
  • Font pairing: Found a balance between Western readability and subtle East Asian typographic rhythm using system fonts (-apple-system, BlinkMacSystemFont, "Noto Sans CJK SC").
  • Build speed: Early versions had heavy SCSS nesting. Flattened structure and purged unused styles cut build time by 60%.

Accomplishments that we're proud of

  • A theme that loads in under 0.5s on desktop (Lighthouse score >95)
  • Fully accessible (keyboard nav, semantic headings, alt-text support)
  • Personal design language: quiet margins, restrained color palette, and thoughtful spacing that feels like a well-bound notebook

What we learned

Building a theme from scratch teaches you how every layer of the web fits together—from Markdown parsing to CSS cascade to deployment hooks. Simplicity isn’t minimalism; it’s precision. And the best tool for expression is often the one you make yourself.

What's next for Mindbrew

  • Add native support for bilingual posts (EN/ZH) with language toggle
  • Integrate a lightweight search using FlexSearch
  • Create a companion script to auto-generate optimized cover images (linking back to that convert CLI workflow!)
  • Open-source the theme for fellow I-type creators who value silence over noise

Built With

Share this project:

Updates