When one thinks about starting a blog, the first go-to solution is probably WordPress. Unfortunately (or fortunately) I'm a web developer, so the inefficiency, inconvenience and general quality of WordPress bother me a lot, not to mention that it's a server-side system and my deployment target is Github Pages, which only accepts static files.

Why?

You may think that this entire endeavor is stupid and I wasted my time. And you would have a point, it was certainly a huge effort, and there are certainly existing solutions for static-site blogging, probably even better than I can afford to make this. But here's the thing: I really like React. To be precise, I really like how the entire ecosystem is composed of small and flexible programs that do one thing and do it well. This is the same principle, popularised by UNIX, that enables Bash together with the GNU coreutils to do everything from collecting the news through various minor automation tasks all the way to container orchestration as seen in Docker Compose.

The entire project is built in this spirit. I use Typescript and Scss for most of the work and Vite bundles everything. Articles are written in MDX, which is a variant of Markdown with React component support and itself connects Remark and Rehype to turn markdown into HTML. The result is unparallelled flexibility, since I can add plugins separately to my bundler and markdown parser and nothing has to know about anything else.

Details like server-side rendering for search-engine support and RSS feed generation are done using custom-made scripts. SSR uses simple-ssr which is basically a wrapper on Puppeteer which is a scripting interface for Chromium. RSS dynamically loads metadata from the articles folder. On the other hand, I found that React's Suspense is a deviation from the ideas of flexibility and modularity because it forces both fetch library authors and child components to acknowledge its existence. Because of this, I'm actually using a custom solution for lazy loading which fulfills these principles much better, at a small cost of efficiency.

And the result is actually a really good blog engine. I have React Router's lightning fast page loads, search engine indexing and scaffolding with my own Node and Bash scripts. Styling is all done via Sass which is bliss to use and I have a dev server with hot reload which feels almost as streamlined as a WYSIWYG editor except it doesn't break version control. What's not to love?

Principle

The key concept is actually very simple: lazy loading doesn't require any runtime information about the loaded resource besides the URL, so the total size of a website segmented into lazy loaded pages is unbounded. In the current form of the blog every article is represented by a component which is lazy loaded and some metadata which is currently eagerly loaded with the article list view, but as the content grows that may change. If need arises, I can write scripts to generate

• separate chunks for pagination
• filtered versions of the index for tag-based search
• word-frequency indexes to imitate full text search

Usage

If this sounds like something you would want on your blog, go check out the repository. Do take note though, this is not a public package and it requires a bit of tinkering to get it to work. Maybe I'll release a framework later, but it would take a bit of rewiring and further abstraction.