More Articles

How to Easily Add Search Functionality to Eleventy Static Sites with Pagefind

Discover how to quickly integrate Pagefind, a lightweight and performant static search library, into your Eleventy static site for a seamless search experience.

Written on Jun 6, 2024 | About 1 min reading time

New tools in your inbox every Monday!

How to Easily Add Search Functionality to Eleventy Static Sites with Pagefind

Adding search functionality to static sites can be challenging, often requiring complex setups or relying on third-party services. Pagefind offers a simple, lightweight solution that seamlessly integrates with popular static site generators like Eleventy.

What is Pagefind?

Pagefind is a fully static search library designed to perform well on large sites while minimizing bandwidth usage and avoiding the need for hosted infrastructure. Its ease of use and impressive capabilities make it a go-to choice for developers building static sites.

Getting Started with Pagefind for Eleventy

Install Pagefind

Install the Pagefind package using npm:

npm install --save-dev pagefind

Build the Search Index

Add the data-pagefind-body attribute to the element containing your post content in your Eleventy templates:

<article data-pagefind-body>{{ content | safe }}</article>

Configure Eleventy to run the Pagefind CLI after your site has been built:

  const { execSync } = require('child_process')

  eleventyConfig.on('eleventy.after', () => {
    execSync(`npx pagefind --source dist --glob \"**/*.html\"`, { encoding: 'utf-8' })

Include the Pagefind stylesheet and optional dark mode styles. Add an element for the search box:

<link href="/_pagefind/pagefind-ui.css" rel="stylesheet">

  <div id="search"></div>

  <script src="/_pagefind/pagefind-ui.js" onload="new PagefindUI({ element: '#search' });"></script>

Elevate Your Static Site with Pagefind

With minimal effort, you've added powerful search functionality to your Eleventy site, ensuring visitors can easily find the content they're looking for. Pagefind's seamless integration and lightweight nature make it an excellent choice for static sites. Enhance your user experience without sacrificing performance or adding complex dependencies. For more information including filtering, sorting, and more complex indexing options visit Pagefind's docs at

June Featured Tools


A range of cursors which is totally free.



Easy to implement, 3D typography for the web. Works with every font.


We Recommend...

Top products featured for the article.

3D Icons by Iconshock

Beautiful 3D icons



Create a backend in less than 2 minutes. Start your project with a Postgres Database, Authentication, instant APIs, Realtime subscriptions and Storage.



Beautiful pay-what-you-want sans serif font family.


Smart Mockups

Create stunning product mockups easily and online.



See all Tools

A Little Extra Reading

Feel like reading more? Here are some extra articles to check out!

See all Articles