Implementing Related & Random Post Recommendations on a Static Blog
Anyone who maintains a static blog or personal site has likely experienced this familiar cycle:
You dedicate considerable effort to researching, writing, and publishing an article. It receives some initial traffic for a few days, and then quietly sinks into the bottom of the archives. When a visitor arrives via a search engine or an external link, they finish reading the piece, find nothing underneath except a dreary, generic “Previous / Next” link, and promptly close the tab.
To encourage readers to explore further and give older articles a well-deserved spotlight, I recently upgraded the blog by injecting Related Posts, Random Recommendations, and smooth visual animations at the end of every article.
The implementation was clean and enjoyable. Here is a recap of the design philosophy, algorithmic logic, and practical lessons learned along the way.
1. Where Are Recommendation Cards Most Effective?
If a visitor scrolls all the way to the bottom of an article, it proves they found the content genuinely interesting. Their focus has not yet dispersed.
Placing recommendation modules immediately at the conclusion of the post body seizes this critical window of high reader intent. As they finish reading, their attention naturally transitions to relevant next steps, followed by a second tier of serendipitous discoveries.
2. Related Posts (5 Cards): Following the Breadcrumbs
Readers often arrive with a specific inquiry (e.g., exploring a PDF manipulation technique or an algorithmic trick). Upon finishing, they are naturally receptive to closely related topics.
The matching mechanism is lightweight and effective:
- Scoring Rules: The script compares categories and tags between the active article and all published posts across the site. Shared categories contribute +3 points, while each matching tag adds +2 points.
- Card Count & Fallback: Selects the top 5 highest-scoring posts. If an article has too few related siblings, the remaining slots are randomly padded from the global pool to maintain neat visual alignment.
- Card Content: Each card displays a Post Title and a Clean Text Excerpt. Excerpts are sanitized at build time by stripping markdown tags, code blocks, and images, giving readers an instant preview of the content.
3. Random Recommendations (10 Cards): The Delightful Mystery Box
While related recommendations provide targeted topical depth, relying strictly on tag matches risks trapping readers in small silos while leaving older, eclectic notes permanently buried.
This is where Random Recommendations come in:
- Card Count: A carousel of 10 cards placed directly below the related section.
- De-duplication: Filters out the current article and the 5 already-selected related posts, then applies the Fisher-Yates shuffle algorithm across the remaining candidate pool.
- User Experience: Every rebuild or visit surfaces a fresh mix of topics, creating that pleasant sensation of opening a surprise box.
4. Visual Design: Bright, Mood-Lifting Gradient Cards
Traditional blog recommendations are often uninspired: drab bullet lists with grey borders that fail to capture any visual interest.
I took an intentional design pivot, rendering each recommendation as an eye-catching, color-coded gradient card:
- Curated a palette of bright, high-contrast gradients (Warm Sunrise, Clear Sky Blue, Fresh Mint, Morning Lilac, Spring Emerald, and Sunset Peach).
- Cards cycle smoothly through these vivid backgrounds.
- Pure white high-contrast typography, bold headlines, and semi-transparent readable excerpts.
- Integrated an automatic carousel animation: human vision is instinctively drawn to gentle motion, prompting readers to pause and interact with the scrolling showcase.
Placing these vibrant cards at the bottom transforms a once-static page into an inviting visual hub, naturally encouraging visitors to spend extra time exploring.
Low Engineering Cost, High Traffic ROI
The entire recommendation architecture is executed during Hexo’s static build lifecycle (after_render:html), injecting pre-rendered HTML cards directly into the output files. It relies on zero backend servers, zero database calls, and introduces zero client-side fetch latency.
The practical result is immediately noticeable: the end of an article is no longer a dead end. Five related articles satisfy topical curiosity, ten random cards provide delightful serendipity, and the vivid visual design makes browsing the blog a genuinely enjoyable journey.