How Can You Display Random Posts Dynamically in Jekyll Using Liquid

Adding a “Random Post” feature in Jekyll might sound simple, but it touches on one of the most fascinating parts of using static site generators: how to simulate dynamic behavior in a static environment. This approach makes your blog more engaging, keeps users exploring longer, and gives every post a fair chance to be seen. Let’s break down how to do it effectively using Liquid logic, without any plugins or JavaScript dependencies.

Why a Random Post Section Matters for Engagement

When visitors land on your blog, they often read one post and leave. But if you show a random or “discover more” section at the end, you can encourage them to keep exploring. This increases average session duration, reduces bounce rates, and helps older content remain visible over time.

The challenge is that Jekyll builds static files—meaning everything is generated ahead of time, not dynamically at runtime. So, how do you make something appear random when your site doesn’t use a live database? That’s where Liquid logic comes in.

How Liquid Can Simulate Randomness

Liquid itself doesn’t include a true random number generator, but it gives us tools to create pseudo-random behavior at build time. You can shuffle, offset, or rotate arrays to make your posts appear randomly across rebuilds. It’s not “real-time” randomization, but for static sites, it’s often good enough.

Simple Random Post Using Offset

Here’s a basic example of showing a single random post using offset:

<div class="random-post">
  <h3>Random Pick:</h3>
  <a href="/scrollbuzzlab01/">Is Mediumish Still the Best Choice Among Jekyll Themes for Personal Blogging</a>
</div>

In this example:

• site.posts | size counts all available posts.
• modulo: 5 produces a pseudo-random index based on the build process.
• The post at that index is displayed each time you rebuild your site.

While not truly random for each page view, it refreshes with every new build—perfect for static sites hosted on GitHub Pages.

Showing Multiple Random Posts

You might prefer displaying several random posts rather than one. The key trick is to shuffle your posts and then limit how many are displayed.

<div class="related-random">
  <h3>Discover More Posts</h3>
  <ul>
  
     <li><a href="/beatleakedflow01/">Turn jekyll documentation into a paid knowledge base</a></li>
  
     <li><a href="/buzzloopforge01/">How to Set Up a Blog on GitHub Pages Step by Step</a></li>
  
     <li><a href="/cherdira01/">How Can You Understand Jekyll Config File for Your First GitHub Pages Blog</a></li>
  
     <li><a href="/rankdriftsnap01/">How Can You Display Random Posts Dynamically in Jekyll Using Liquid</a></li>
  
     <li><a href="/rankflickdrip01/">How Responsive Design Shapes SEO in JAMstack Websites</a></li>
  
  </ul>
</div>

The sample:5 filter is a Liquid addition supported by Jekyll that returns 5 random items from an array—in this case, your posts collection. It’s simple, clean, and efficient.

Building a Reusable Include for Random Posts

To keep your templates tidy, you can convert the random post block into an include file. Create a file called _includes/random-posts.html with the following content:

<section class="random-posts">
  <h3>More to Explore</h3>
  <ul>
  
     <li>
        <a href="/fazri02/">How Does Jekyll Compare to Other Static Site Generators for Blogging</a>
     </li>
  
     <li>
        <a href="/jumpleakbuzz01/">How to Display Thumbnails in Related Posts on GitHub Pages</a>
     </li>
  
     <li>
        <a href="/isaulavegnem01/">How to Combine Tags and Categories for Smarter Related Posts in Jekyll</a>
     </li>
  
  </ul>
</section>

Then, include it at the end of your post layout like this:

Now, every post automatically includes a random selection of other articles—perfect for user retention and content discovery.

Using Data Files for Thematic Randomization

If you want more control, such as showing random posts only from the same category or tag, you can combine Liquid filters with data-driven logic. This ensures your “random” posts are also contextually relevant.

Example: Random Posts from the Same Category

<div class="random-category-posts">
  <h4>Explore More in </h4>
  <ul>
  
     <li><a href="/nestvibescope01/">How Does the JAMstack Approach with Jekyll GitHub and Liquid Simplify Modern Web Development</a></li>
  
     <li><a href="/hyperankmint01/">How to Enhance Site Speed and Security on GitHub Pages</a></li>
  
     <li><a href="/online-unit-converter01/">Automating Jekyll Content Updates with GitHub Actions and Liquid Data</a></li>
  
  </ul>
</div>

This keeps the user experience consistent—someone reading a Jekyll tutorial will see more tutorials, while a visitor reading about GitHub Pages will get more related articles. It feels smart and intentional, even though everything runs at build-time.

Improving User Interaction with Random Content

A random post feature is more than a novelty—it’s a strategy. Here’s how it helps:

• Content Discovery: Readers can find older or hidden posts they might have missed.
• Reduced Bounce Rate: Visitors stay longer and explore deeper.
• Equal Exposure: All your posts get a chance to appear, not just the latest.
• Dynamic Feel: Even though your site is static, it feels fresh and active.

Testing Random Post Blocks Locally

Before pushing to GitHub Pages, test your random section locally using:

bundle exec jekyll serve

Each rebuild may show a new combination of random posts. If you’re using GitHub Actions or Netlify, these randomizations will refresh automatically with each new deployment or post addition.

Styling Random Post Sections for Better UX

Random posts are not just functional; they should also be visually appealing. Here’s a simple CSS example you can include in your stylesheet:

.random-posts ul {
  list-style: none;
  padding-left: 0;
}
.random-posts li {
  margin-bottom: 0.5rem;
}
.random-posts a {
  text-decoration: none;
  color: #0056b3;
}
.random-posts a:hover {
  text-decoration: underline;
}

You can adapt this style to fit your theme. Clean design ensures the section feels integrated rather than distracting.

Advanced Approach Using JSON Feeds

If you prefer real-time randomness without rebuilding the site, you can generate a JSON feed of posts and load one at random with JavaScript. However, this requires external scripts—something GitHub Pages doesn’t natively encourage. For fully static deployments, it’s usually better to rely on Liquid’s sample method for simplicity and reliability.

Common Mistakes to Avoid

Even though adding random posts seems easy, there are some pitfalls to avoid:

• Don’t use sample excessively in large sites; it can slow down build times.
• Don’t show the same post as the one currently being read—use where_exp to exclude it.

This ensures users always see genuinely different content.

Summary Table: Techniques for Random Posts

Conclusion

By mastering Liquid’s sample, where_exp, and offset filters, you can simulate dynamic randomness and enhance reader engagement without losing Jekyll’s static simplicity. Your blog becomes smarter, your content more discoverable, and your visitors stay longer—proving that even static sites can behave dynamically when built thoughtfully.

Next Step

In the next part, we’ll explore how to create a “Featured and Random Mix Section” that combines popularity metrics and randomness to balance content promotion intelligently—still 100% static and GitHub Pages compatible.