emblog is a distinctive and powerful blog framework specifically designed for emtech. It enables you to create stunning single-page static blogs in seconds.
Since my second year in junior high school, emtech has relied on Hugo as its blogging framework. Paired with GitHub Pages, it used the Hugo Clarity theme for deployment. While Hugo is a stable and fast blog generator, prolonged use of Hugo Clarity revealed several issues, primarily related to Chinese encoding problems. These issues affected features like the sitemap and search functionality, in addition to some pages looking odd.
I also wanted my blog to be one-of-a-kind. Creating a Hugo theme that met my specific requirements would have meant overhauling its core significantly. Since a blog generator is essentially about converting Markdown to HTML using templates, I decided to build one myself. From conception to development, the process took about a year (with active development taking roughly a month).
emblog is based on Node.js. It avoids frameworks and uses only markdown-it for Markdown parsing and highlight.js for syntax highlighting—libraries that are hard to replicate well. The entire UI and SPA (single-page application) were handcrafted to keep emblog lightweight and efficient.
Although I considered learning Go for this project, I ultimately chose Node.js due to its shorter learning curve and better platform support.
Every detail in emblog—from page transitions, TikTok-like lazy loading, meticulous SEO optimization, to the RSS feed—has been carefully designed to ensure the final blog delivers outstanding performance and user experience. Some features are still under development due to time constraints, but updates are ongoing. Feedback via GitHub is always welcome.
emblog primarily consists of just two pages: a homepage and an article page. Definitely not because I was too lazy to add more. Some planned features haven't been implemented yet but will be added gradually.
The page-to-article transitions are one of the blog's standout features. I designed the animations myself to ensure seamless transitions and prevent blank loading screens while articles or images are being fetched.
The effect of returning to the homepage was particularly challenging. Various attempts resulted in flashy, unnatural effects reminiscent of amateurish presentations. Ultimately, I implemented a parallax effect inspired by Material Design guidelines and Apple's approach.
After reading an article, scrolling down reveals the next article, which gradually scales up. Similarly, scrolling up returns you to the previous article.
The left black area is designed to host primary visuals, animations, or mini-games. The right side features simple buttons mainly for layout balance.
Scrolling down reveals the article list. Though currently a work-in-progress, it is functional. The issue of aspect ratios for thumbnails (many of which are 1:1 memes from my junior high days) presented a challenge. To address this, emblog analyzes each image's primary color and generates a gradient background to fill empty spaces, providing a seamless appearance even before the image loads.
The time required to generate the blog is slightly longer because image analysis in Node.js is computationally intensive.
The article elements are designed to be clean and straightforward, with a touch of creativity. Image captions are automatically extracted from the alt text.
For code highlighting, I used the Nord theme. Code blocks support copying, and if they exceed five lines, they auto-collapse. Clicking the copy button changes it to a checkmark upon successful copying—something I insisted on including.
On the right side, the aside section includes sharing buttons, a table of contents, and a recent browsing list. Recent browsing is stored locally using localStorage for convenience and to ensure recommended articles don't repeat.
The circular CSS design for related articles at the bottom was quite tricky, relying on layered pseudo-elements to achieve the look.
The writing workflow is designed for maximum comfort. The first paragraph automatically becomes the description, and the first h1 becomes the article title. Formatting—like spacing, capitalization, and quotation marks—is automated to avoid errors. If any article encounters issues, the generator continues without halting, ensuring smooth output.
If you'd like to experiment locally, you can download it from GitHub. Don't forget to leave a star!
- Ensure Node.js is installed.
- Run
pnpmto install dependencies. - Run
pnpm buildto generate the static site. - The static site will be output to the
dist/folder.
emblog was designed for emtech and currently lacks customization features for general use. However, all code is released under the Apache 2.0 license, and you're welcome to modify and use it. In the future, I plan to make it a publicly usable blog generator. Follow my GitHub for updates.