No Algolia? No Problem! Add Search to Your Astro Site with Pagefind

Table of Contents

So you’ve built a site using Astro but can’t figure out how to add search functionality to the site without services like Algolia. Fear not in this tutorial we’ll add a full text search to any Astro website. It is simple and fast.

We’ll use the Pagefind library to implement the search feature in our astro website. You’ll need a working astro website. For this tutorial we’ll install and use the astro blog starter template.

Installing packages
#

We’ll install only one library for this tutorial.

npm i astro-pagefind

Update configuration
#

Import the package in the astro.config.mjs

...
import pagefind from "astro-pagefind";
...

Also add pagefind in the integrations.

...
export default defineConfig({
  site: "https://example.com",
  integrations: [
    ...
    pagefind(),
    ...
  ],
});
...

Add the UI element
#

We’ll add the search bar to the blog page.

Edit src/pages/blog/index.astro and add the following code.

---
...
import Search from "astro-pagefind/components/Search";
...
---

...
<div style="margin-bottom: 2rem;">
  <Search id="search" className="pagefind-ui" uiOptions={{ showImages: false }} />
</div>
...

Now, you’ll be able to see the search bar in the blog page.

Generating the search index
#

If you try to search you won’t be abe to see any results now because the search does not work in the development mode. To make it the search work development mode we need to build the site once. Then we can use the search in the development mode also.