Adding Algolia search to an Eleventy site with Netlify

August 29, 2021

I was looking for a way to incorporate search into the documentation site for Provi's design system, Fizz, which is built on Eleventy and hosted on Netlify. After lots of Googling and frustrating starts and stops with various solutions, I discovered Algolia's search plugin for Netlify.

With it, I was able to set up a pretty robust search feature with autocomplete in a matter of minutes. (Aside from the hour it took to solve one issue which I'll tell you how to fix below!)

Okay, so this isn't specific to Eleventy. Algolia's Netlify plugin will work for any site hosted on Netlify. But since pretty much all my sites are built with Eleventy and I've heard a lot of people in the community wanting a search solution, this was the best/easiest thing I could find!

Steps

  1. Sign up for an Algolia account. The free plan provides a generous 10k searches/month, which should be plenty for most small sites.

  2. Check out Algolia's Quick Start guide for their Netlify plugin.

  3. Follow the instructions to sign into Algolia with Netlify.

  4. Install the site you want to crawl.

  5. Index your site by triggering a deploy either via commit or manually in the Netlify app. The Algolia crawler will re-index your site automatically on each build.

  6. Add the front end bundle to your layout, replacing the search API key with the one found in your dashboard (linked on the frontend bundle page). You can also check the docs for additional options you can add, like changing the placeholder on the search input: placeholder: 'Search Fizz',

  7. Add an empty HTML element that matches the selector value in your frontend bundle's config options. The default is <div id="search"></div>

  8. Fire up the site locally and test it out!

Searching 'butt' on the Fizz documentation site
Tee hee!

Notes

<link rel="canonical" href="{{site.url}}{{page.url}}">

Some other options I looked at

Phil Hawksworth has a great article, Adding Search to a Jamstack Site, which is a relatively simple solution for adding search to an Eleventy site. For my particular use case, I wanted to be able to search within code examples as well as provide some context about the page rather than just the title. But if you're not on Netlify, this might work for you.

I landed on Algolia largely thanks to this episode of Learn with Jason with Sarah Dayan. It was a little more technical than what I'm comfortable with, but it led me to stumble upon the Netlify plugin solution.

Final thoughts

I'm really thrilled with how quickly I was able to put this together. Algolia offers a pretty good amount of customization, which I imagine is even better on a paid plan. For now, all I need to do is do a little customization to the CSS and it's pretty much good to go.

I'm Mike Aparicio, Senior Design Systems Engineer at Provi. I'm interested in helping companies large and small improve collaboration between design and engineering through the use of design systems. I specialize in creating custom CSS frameworks that empower engineering teams to get from concept to production quickly, while writing little to no CSS themselves. I write about web design and development, video games, pop culture, and other things I find interesting. I live in the Chicago area with my wife, three sons, and two dogs.

You can find me on Twitter and most other places as @peruvianidol.

Get in touch