John MacGaffey
How to Add Search to Your Ghost Blog
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!