Explore More Passive Income Ideas

add search to jekyll without javascript frameworks

Why Use Native Search for Jekyll Most Jekyll blogs rely on static content, which makes traditional database-driven search impossible. However, you don’t need heavy JavaScript frameworks like Vue or React to implement search. By leveraging JSON, Liquid, and a bit of vanilla JavaScript, you can create a responsive search experience that works on any static host—even GitHub Pages. Core Concepts Here’s the approach we’ll take: Generate a JSON index of your posts during build time Load the JSON file with plain JavaScript Match user input against title and content Display matching posts as results dynamically Step 1: Create a Search Index in JSON Add a new file called search.json at the root of your project: --- layout: null --- [ {% raw %}{% for post in site.posts %} { "title": "{{ post.title | escape }}", "url": "{{ post.url | absolute_url }}", "date": "{{ post.date | date: '%Y-%m-%d' }}...

related posts without plugins in jekyll

Why Show Related Posts in a Static Blog

In traditional CMS platforms, related post sections are often generated dynamically using content similarity algorithms or tags. In Jekyll, where everything is static, we need a manual or Liquid-based approach to display related content. This section becomes essential for:

  • Keeping readers on your site longer
  • Improving internal linking structure
  • Enhancing topic authority in the eyes of search engines

Approach 1: Show Posts with Shared Categories

One simple method is to display posts that share a category with the current post. You can add this logic in your _layouts/post.html file or any custom layout used for blog posts:

<h3>Related Posts</h3>
<ul>
  {% for post in site.posts %}
    {% if post != page and post.categories | join: ',' contains page.categories[0] %}
      <li>
        <a href="{{ post.url }}">{{ post.title }}</a>
      </li>
    {% endif %}
  {% endfor %}
</ul>

This example uses the first category as a base for filtering related content. You can enhance it further by looping through all categories if needed.

Approach 2: Match by Tags Instead of Categories

If your site uses detailed tags, you can filter by common tags to provide more specific related posts:

<h3>You Might Also Like</h3>
<ul>
  {% for post in site.posts %}
    {% if post != page %}
      {% assign common = post.tags | array_intersect: page.tags %}
      {% if common.size > 0 %}
        <li><a href="{{ post.url }}">{{ post.title }}</a></li>
      {% endif %}
    {% endif %}
  {% endfor %}
</ul>

To use this method, you need to create a small helper filter plugin such as array_intersect or find a workaround using Liquid logic, though native support is limited.

Approach 3: Manual Related Posts per Article

For more curated recommendations, you can specify related posts manually in your front matter:

---
title: "improving performance in jekyll"
related_posts: ["/speed-up-jekyll/", "/optimize-assets/", "/use-cdn-jekyll/"]
---

Then in your layout:

{% if page.related_posts %}
  <h3>Related Articles</h3>
  <ul>
    {% for path in page.related_posts %}
      {% assign related = site.pages | where: "url", path | first %}
      {% if related %}
        <li><a href="{{ related.url }}">{{ related.title }}</a></li>
      {% endif %}
    {% endfor %}
  </ul>
{% endif %}

Approach 4: Use Excerpt Matching with Liquid

Although not perfect, you can try basic matching based on shared words in excerpts or titles. This is rarely used but can work if your content is well-structured with consistent keyword usage.

Design Tips for Related Post Sections

  • Use small thumbnails or featured images for visual interest
  • Limit to 3–5 related posts to avoid clutter
  • Place the section either after the post or in a sticky sidebar

SEO Benefits of Internal Linking

Besides enhancing user experience, related posts can strengthen your topical clusters. Search engines use internal links to understand page relationships, distribute link equity, and crawl more efficiently.

Conclusion

You don’t need plugins or databases to implement related posts in Jekyll. Whether you use tags, categories, or manual curation, the goal is to keep visitors engaged and guide them toward relevant content. These techniques also improve your site's internal linking, making your blog more SEO-friendly and user-centric.


Archives / All Content

© ScrollBuzzLab . All rights reserved.