Multilingual Search with Lunr in Jekyll

Why Client-Side Multilingual Search Matters

Search is a critical feature of any knowledge base or blog. In multilingual setups, it's not enough to simply list content by tag or category—users want to search in their language. However, most search engines or plugins don't support client-side indexing and filtering for multilingual content out of the box.

This article shows you how to use Lunr.js to build a fast, client-side search feature that respects language boundaries in a Jekyll-based multilingual site.

How Lunr Works in Jekyll

Lunr is a JavaScript-based full-text search engine for the browser. In Jekyll, you typically build a search index during the build process, then load that JSON file on the frontend.

We’ll go further by generating multiple indexes—one for each language—and dynamically selecting the correct one based on the current language context.

Folder and Language Structure

Assume a structure like this:

├── _resources
│   ├── en
│   └── es
├── search
│   ├── index.html
│   ├── en.json
│   └── es.json

Each language-specific JSON file contains the index for its respective content.

Step 1: Add Front Matter Metadata

Ensure each post contains:

lang: en
title: Example Title
summary: Short excerpt of the post
tags: [jekyll,search]

Step 2: Create the Language-Aware Search Indexes

Add this code to your Jekyll site, for example in /search/en.json:

{% raw %}
[
  {% assign lang_posts = site.resources | where: "lang", "en" %}
  {% for post in lang_posts %}
  {
    "title": "{{ post.title | escape }}",
    "url": "{{ post.url | relative_url }}",
    "summary": "{{ post.summary | strip_html | escape }}",
    "content": {{ post.content | strip_html | strip_newlines | jsonify }},
    "tags": "{{ post.tags | join: ',' }}"
  }{% unless forloop.last %},{% endunless %}
  {% endfor %}
]
{% endraw %}

Repeat this process for es.json or other languages by changing the language filter.

Step 3: HTML Search Page Template

Create a generic /search/index.html page that reads the language and loads the correct JSON:

Step 4: Styling Your Search Interface

#searchBox {
  width: 100%;
  padding: 0.75em;
  font-size: 1rem;
  margin-bottom: 1em;
}
#searchResults {
  list-style: none;
  padding: 0;
}
#searchResults li {
  padding: 0.5em 0;
  border-bottom: 1px solid #ddd;
}

Step 5: Language Detection and SEO

Make sure to add hreflang tags in your layout or head:

Also, make sure the search links in the site point to the correct version:

Search (EN)
Buscar (ES)

Advantages of This Setup

• Works offline (static)
• Respects language context
• Does not rely on third-party services
• Fast indexing with no page reload

Limitations and Solutions

• Large index files: Compress with gzip if using your own server
• No fuzzy search: Consider adding a Lunr plugin for better tokenization
• SEO indexing: Prevent search page from being indexed if it's content-light

Future Improvements

• Support partial-word matching
• Highlight matched terms in preview
• Paginate search results for longer content

Conclusion

Jekyll and Lunr make it possible to offer full-text, language-specific search for static sites hosted on GitHub Pages. By splitting indexes by language and loading the correct JSON file at runtime, you create a scalable and accessible search experience for multilingual audiences—all without backend complexity.

Pada artikel selanjutnya, kita akan membahas bagaimana membuat dynamic table of contents multibahasa yang mendeteksi struktur heading dan menyesuaikan konteks bahasa secara otomatis.