Mastodon

In Praise of Ghost's Native Search Feature

Posted by Matt Birchler
β€” 2 min read
In Praise of Ghost's Native Search Feature

I've been waiting years for Ghost to add search as a tool I can use on my site, and I had basically given up on it ever coming, but surprise, surprise, an update last week added this! Not only does this solve my problem, it solved it with a more complete solution that I expected, and made it impossibly simple to implement.

How to Add Search to Your Ghost Site

First off, make sure you're updated to Ghost 5.3 or newer.

After that, you literally just have to add data-ghost-search to any element on your site. When this is present, Ghost will do two things:

  1. Command+K will bring up the search box on top of your page.
  2. Clicking that element will bring up the search box.

Here's what the code looks like for my site:


<div class="gh-search" data-ghost-search>
  <img id="mag-glass" src="{{asset "images/mag-glass.svg"}}" />
  <span id="search-text">Search</span>
</div>

This code lives in the default.hbs file that loads on all pages, so I had to add this once, and now it appears on any page on my site.

Styling

The search box comes completely styled out of the box, so there is nothing you need to do here. Presumably you could add your own CSS if you want, but I haven't messed with that yet.

All you really have to do is style the element on your site that has the data-ghost-search tag.

P.S. The z-index on the search element that covers your site is 50, so make sure you're not setting anything on your page above 49.

Scope

The Ghost admin page has long had a search option to find old posts, but it's pretty limited; it only searches post titles. I assumed this would be similar, but it's actually much better.

Whatever the user types appears to search your site for:

  1. Titles
  2. Tags
  3. Body text

I have nearly 3,000 blog posts on this site, and it does take a second to complete the query, but it's pretty darn fast considering how much content it's filtering through.

Thank You, Ghost

This has been my biggest complaint with using Ghost after being on WordPress for years before. Today I'm happy that not only have I been able to add search back to the site, it's a far better solution than anything I've had before.