How I Built a Static Blog with 50+ Articles and Zero Frameworks: Pure HTML, CSS, and JavaScript

For years, I've been asked about the framework powering my blog. The answer always catches people off guard: none at all. Wuhuajin.com, my blog, is a completely static site crafted with just HTML, CSS, and vanilla JavaScript—no React, Vue, or any build tools. Over 50 articles have been published, and it maintains near-perfect PageSpeed scores for more than a year. This article details my decision to forgo frameworks, the architecture that powers the site, and the trade-offs to consider when pursuing a similar approach.

I abandoned frameworks for a content site because frameworks tackle problems like state management, component re-rendering, routing, and code organization that my simple blog didn't require. A blog's sole purpose is to deliver text and images to readers swiftly. Framing it that way, a zero-framework blog became the logical choice. It ensures maximum speed, minimal maintenance, full control over every byte of HTML, and long-term longevity.

The system operates on a straightforward principle: write in Markdown, ship as static HTML. No client-side rendering—each article is transformed into a standalone HTML file during the build process. The site's source, located in the src/ directory, consists of reusable components, article Markdown files, CSS, and JavaScript files. The content pipeline converts Markdown into prerendered HTML, parsing front matter, applying syntax highlighting, and generating pages that work seamlessly even with JavaScript disabled.

Build scripts, written in custom Node.js .cjs files, handle the prerendering process, generating HTML for articles, categories, the homepage, and sitemaps. Each script is independent, making the build process straightforward and deterministic. Development is facilitated by a simple server script that uses Node's built-in http module and file watchers to provide live reload functionality without the overhead of a heavy bundler.

For multilingual support, the site incorporates a lightweight dictionary for translation, which maps English keys to translated strings. This dictionary is used by a single i18n component, adding just a few hundred lines of code without the substantial payload of a full i18n solution. Performance improvements, including HTML size reduction, reduced render-blocking resources, and optimized images, demonstrate that a zero-framework approach doesn't compromise on speed.