Display Random Jekyll Posts During Each Page Load or Refresh Using Javascript

• Updated January 10, 2019


Because Jekyll is a static site generator it can be difficult to have various parts of your website be dynamic. For example, I wanted a side bar element to show a list of randomized posts. I found two methods here and here to go to a random Jekyll post by clicking a link, but nothing that displayed a randomized list of Jekyll posts. So, I adapted the Javascript code from the links into what I was looking for.

First, since there is not a database to query for the post titles and URLs, two Javascript arrays will be created to store and retrieve post titles and URLs.

Add the following Javascript and Liquid code within the head tags of your website’s default Jekyll template:

<script type="text/javascript">

    var postsHREF = [{% for post in site.posts %}"{{ post.url }}"{% unless forloop.last %},{% endunless %}{% endfor %}];

    var postsTitle = [{% for post in site.posts %}"{{ post.title }}"{% unless forloop.last %},{% endunless %}{% endfor %}];

</script>

Second, put the following Javascript code within the body tags where you want the randomized list of posts to appear on your website (modify the numberOfPosts variable depending on how many posts you want displayed):

<script type="text/javascript">

    var randomIndexUsed = [];
    var counter = 0;
    var numberOfPosts = 5;

    while (counter < numberOfPosts)
    {
        var randomIndex;
        var postHREF;
        var postTitle;

        randomIndex = Math.floor(Math.random() * postsHREF.length);

        if (randomIndexUsed.indexOf(randomIndex) == "-1")
        {
            postHREF = postsHREF[randomIndex];
            postTitle = postsTitle[randomIndex];

            if (counter == (numberOfPosts - 1))
            {
                document.write('<p><a href="' + postHREF + '">' + postTitle + '</a></p>');
            }
            else
            {
                document.write('<p><a href="' + postHREF + '">' + postTitle + '</a></p><hr />');
            }

            randomIndexUsed.push(randomIndex);

            counter++;
        }
    }

</script>

Once the above Javascript and Liquid code is in place, run jekyll build, and re-upload the generated website to your webserver. With each page load or refresh, a random list of posts will be displayed.

If you found this post useful and would like to help support this site - and get something for yourself - sign up for any of the services listed below through the provided links.

The following links are part of affiliate programs, and I will receive a referral payment from any of the services you sign-up for.

  • Get Faster Shipping: About to order some stuff on Amazon but want to get more value out of the money you would normally pay for shipping? Sign-up for a free, 30-day trial of Amazon Prime to get free two-day shipping, access to thousands of movies and TV shows, and more.
  • Start Investing Now: Looking to start investing some of your saved income? Get started by opening an account with Webull, where upon sign-up and opening a brokerage account with an initial deposit of $100 or more you will receive free stock(s). The promotions are always changing, so be sure to click the link to see the latest.

Thanks for reading and take care.