How to Use Lunr.js for Searching in a Jekyll Blog
özkan pakdil

özkan pakdil @ozkanpakdil

About: Software Engineer

Location:
UK, Glasgow
Joined:
Dec 28, 2019

How to Use Lunr.js for Searching in a Jekyll Blog

Publish Date: Nov 8 '24
0 0

I have been using Google Programmable Search Engine to test search functionality on my blog, but I found that it doesn’t work quite as I expected. First, I tried Bing and DuckDuckGo as alternatives, but none of them performed as desired. DuckDuckGo’s API is nice, but it lacks a ‘site:’ filter, which prevented it from working as needed.

Here are the steps to set up a Jekyll search system using Lunr.js for GitHub Pages(github.io):

  1. Create js/search.js and add this code
  2. Add search.md to the root of your project.
  3. Add an HTML form where you like
<li class="nav-item my-auto">
    <div class="header-search">
        <form class="header-search-form" action="/search.html" method="get">
            <input type="text" id="search-box" name="query">
            <input type="submit" value="search">
        </form>
    </div>
</li>

Enter fullscreen mode Exit fullscreen mode

Check here for example.

If you have a page listing elsewhere and would like to remove it, refer to this conditional statement.

Comments 0 total

    Add comment