How to Add Search to Ghost Using ghostHunter

GhostHunter is a search library for Ghost CMS, which makes it easier to add search capabilities to a Ghost blog. It uses Ghost API and lunr.js search engine under the hood.

What is lunr.js?

lunr.js is a client-side search engine i.e. it runs in the browser and performs search on the data stored in your browser’s local storage.

When to use ghostHunter

ghostHunter is suitable for use on a small blog with a limited number of posts. If you have a large blog with hundreds of blog posts, then it is not the best solution.

ghostHunter fetches and stores data of all your blog posts in the browser. If you have a large blog then your site’s loading speed will be impacted by this search library. Also, browsers have a limit to which they can store data per website beyond which it will not store data.

Steps to add ghostHunter

Follow these steps to implement ghostHunter search to your blog:

Step 1: Download the latest ghostHunter files

From the ghostHunter Git repo download dist/jquery.ghosthunter.js file.  If you don’t want to use jQuery version then you can download the  jquery.ghosthunter-use-require.js.

Add this file to your assets folder and include it in your default.hbs file as shown below. Make sure it is included after jQuery.

<script type="text/javascript" src="{{asset "jquery.ghosthunter.js"}}"></script>

Step 2: Create a new custom integration

On your Ghost dashboard, go to Integrations and add a new custom integration. We’ll name it ghostHunter.

Step 3: Add Code Injection script

Now visit the Code Injection page (Settings > Code Injection) on your Ghost dashboard and add the following code snippet to the Site Header.

<script>
  	var ghosthunter_key = 'PASTE-CONTENT-API-KEY-FROM-INTEGRATION';
      //optional: set your custom ghost_root url, default is `"/ghost/api/v2"`
  	var ghost_root_url = "/ghost/api/v4"
</script>

Step 4: Add search bar

Add the HTML markup for the search input field and search results in your theme handlebars file where you want to display the search. You can use the following HTML markup and style it according to your preference.

{{!-- GhostHunter Search --}}
<div class="ghost-hunter-search">
    <form>
        <input id="ghost-hunter-search-input" class="gh-search-bar" type="search" placeholder="Type to search" />
    </form>
    <section class="gh-search-results" id="ghost-hunter-search-results"></section>
</div>

Step 5: Initialize ghostHunter

Initialize the ghostHunter by adding this script in your default.hbs file after jquery.ghosthunter.js script.

<script>
    $("#ghost-hunter-search-input").ghostHunter({
        results: "#ghost-hunter-search-results",
        onKeyUp: true,
    });
</script>

That’s it, we've added search to the Ghost blog. You can customize the search with various options that ghostHunter provides.

<script>
	var ghosthunter_key = 'PASTE-CONTENT-API-KEY-FROM-INTEGRATION';
  	var ghost_root_url = "/ghost/api/v4"
</script>

<div class="ghost-hunter-search">
    <form>
        <input id="ghost-hunter-search-input" class="gh-search-bar" type="search" placeholder="Type to search" />
    </form>
    <section class="gh-search-results" id="ghost-hunter-search-results"></section>
</div>

<script type="text/javascript" src="{{asset "jquery.ghosthunter.js"}}"></script>
<script>
    $("#ghost-hunter-search-input").ghostHunter({
        results: "#ghost-hunter-search-results",
        onKeyUp: true,
    });
</script>