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
-
Sign up for an Algolia account. The free plan provides a generous 10k searches/month, which should be plenty for most small sites.
-
Check out Algolia's Quick Start guide for their Netlify plugin.
-
Follow the instructions to sign into Algolia with Netlify.
-
Install the site you want to crawl.
-
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.
-
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', -
Add an empty HTML element that matches the
selectorvalue in your frontend bundle's config options. The default is<div id="search"></div> -
Fire up the site locally and test it out!
Notes
-
The frontend bundle includes a default CSS theme for the search, including responsive styles. It's not bad, but you can remove the link to the CSS and create your own, or copy that file and tweak it as needed.
-
I experienced an issue where the URL in the results was omitting the domain and using a double slash before the path, which resulted in broken links. It took me a good hour to troubleshoot, but adding a canonical URL to the
<head>fixed it.
<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.
