Add search to your Ghost blog with lunr.js and GhostHunter

Posted in ghost, search

I have been using the Ghost platform as my main blog engine for over a year now. There have been ups and downs and in general I have enjoyed the features that it offers. However, like many people found along the way, there are features missing, some of them quite important (see 'search'). I admit that Ghost is still a platform in progress and new features are being added with every release, but it seems that in their effort to provide a simple blog engine, they oversimplified things.

Up until now I have been using Tapir to provide search results to my site. I could have used google search but I didn't want to change too many things, i.e add a new page etc. Tapir is currently broken! I don't know if this a result of misconfiguration or ssl (which you should be using as well), but the bottom line is that a blog without search is useless.

I am currently in the process of creating a custom blog based on the MiniBlog engine that Mads Kristensen has developed, but in the meantime I wanted to fix the search in Ghost! Recently, one of the commenters in the blog suggested that I should look into lunr.js so I decided that as soon as I got some time, it would be my priority.

It turns out that there is a nice Javascript library called ghosthunter which is based on lunr.js and in effect provides a very easy full-text search implementation for Ghost (and not only). It actually took me less than 5 mins to replace the Tapir search with GhostHunter. Since I suspect that this may interest some of you out there, until a proper search solution is provided by Ghost, I will show you how to add GhostHunter to your Ghost blog.

Add GhostHunter to Ghost

Why GhostHunter is awesome:

  • No registration, keys or anything else required
  • Everything runs locally
  • You only need a js file and a couple of html controls

Sounds easy? Well, it is! Let's get to it

Step 1. Download the ghosthunter file

Head to GitHub and download the ghosthunter js file. You have a choice between the full and minified versions.

Step 2. Add the ghosthunter js file in your theme

Navigate to the path that contains your theme's js files. It should look similar to this root\content\themes\<yourtheme>\assets\js, where <yourtheme> is the name of your current Ghost theme. For reference, I use a slightly modified Casper theme. Place your ghosthunter.min.js file in that path.

Step 3. Add a reference to ghosthunter

Now we need to reference the ghosthunter.min.js file in the default.hbs file, located at the root of your theme. Open the file and add the following line of code after {{ghost_foot}}:

<script src="/assets/js/ghosthunter.min.js"></script>

Step 4. Add the search feature to your home page

Next, open your theme's main JavaScript file, named either index.js or main.js and add the initialization code within the $(document).ready() function as per the example below:

/**
 * Main JS file for Casper behaviours
 */

/*globals jQuery, document */
(function ($) {
    "use strict";

    $(document).ready(function(){

        $(".post-content").fitVids();  
        $("#search").ghostHunter({
  			results: "#search-results"
		});      
    });

}(jQuery));

Step 5. Add the necessary HTML elements

Edit the HTML inside the default.hbs or index.hbs page in order to add the search textbox and decide where and how you want to display the search results. In my case, I decided to put the search box right below the header and the results are displayed right below it as per the example:

<form class="site-search">  
       <input id="search" type="search" class="search-box">
</form>  
<div id="search-results" class="search-results"></div>  
<br/>

That's all. Following these 5 simple steps, you can implement full-text search on your blog within 5 minutes.

Feel free to let me know if you have any issues with the implementation and whether you found a better way to add search to your site.

Please note that ghosthunter or lunr.js are not limited to Ghost only. You can use them on any website to provide full-text search. Let me know if you want me to write a post about it :)

Add search to your Ghost blog with tapir

P.S Make sure you follow me on Twitter @christosmatskas for more up-to-date news, articles and tips.

  • Share this post on