How to Add Search to Your Ghost Blog

πŸ“’
Edit: Ghost now supports search natively. I've left this guide up for folks who want more advanced functionality, like searching the content of posts (not just titles, excerpts, authors, and tags).

I love using Ghost as a CMS, but it lacks a core piece of functionality out of the box: search!

I tried setting up GhostHunter, as Ghost's documentation suggests, but couldn't get it working. Flavio Copes also reports having trouble, and I'm indebted to them for sharing the Ghost Finder solution.

This tutorial assumes you're familiar with modifying your theme files and have a basic understanding of HTML:

1. Download the source files

To start, head to the Github repository and download Ghost Finder's source code. Unzip the file, rename the folder "ghost-finder," and add it to your theme's asset folder.

2. Add the script to your <head>

Open your theme's default.hbs file and add the following right below the </head> tag:

<script src="{{asset "ghost-finder/dist/ghost-finder.js"}}"></script>

3. Grab your API key

Head to Ghost's interface and click on Settings > Integrations.

Create a new integration, give it a name, then copy your content API key. You'll need it in the next step. Click save.

4. Create the search template

Though it's possible to simply embed the search box anywhere in your theme, I found it easier from a design perspective to add search as its own page. You can see an example of this by clicking on the magnifying glass in the upper right hand corner of this site.

To do so, create a copy of your page.hbs file, and replace the page's content with the following. Be sure to add your API key in the indicated space:

<div style="text-align: left;">
	<input id='search-input' type='text' placeholder='Search' />
	<div id='search-result'></div>
</div>

<script>
	new GhostFinder({
		input: '#search-input',
		showResult: '#search-result',
		contentApiKey: 'YOUR API KEY HERE',
	})
</script>

Then reupload the theme to your site.

5. Add the search page

Back in Ghost's interface, create a new page with /search as the slug. Once you publish it, you should be able to head to yourdomain.com/search and view a searchbox for your site there.

If all looks good, go ahead and add a link to the page so that visitors can find it.

Happy searching!

Subscribe

Reflections on creating systems to sustainably grow your impact on the world.
Email address
Subscribe