Fat Buddha Designs

Affordable, Creative, Hand-Crafted Websites

Adding Pagefind Search To Eleventy

Person searching with a magnifying glass

Published:

Reading Time: (approx) 2 min

Tags that this post has been filed under.

The main content about Adding Pagefind Search To Eleventy

Adding Pagefind was much simpler than I had anticipated and the results are very good.

First head over to the Pagefind website and follow the installation instructions; for me, who uses Eleventy it was simply a case of using npm i pagefind in the terminal to get everything added.

Next up, I modified my package.json ‘scripts’ section to ensure that the build included the npx for Pagefind, I did find that I had to add ‘&&’ to ensure that the commands ran sequentially rather than ‘&’ which runs them in parallel, otherwise there are no html files available to index if it runs concurrently and you will get an error message.

The Pagefind indexing will add a folder to the ‘__site’ output folder, this can be changed to whatever your preferred output folder is in the ‘build’ script.

For me the process works brilliantly as I have this website hosted on Netlify and so any ‘build’ results in a new indexing by Pagefind.

package.json

"scripts": {
  "start": "npm run dev",
  "dev": "concurrently \"npm run clean\" \"npm run eleventy:dev\" ",
  "build": "concurrently \"npm run clean\" \"npm run eleventy:prod\" && npx pagefind --source _site ",
  "eleventy:dev": "cross-env ELEVENTY_ENV=development eleventy --serve --incremental",
  "eleventy:prod": "cross-env ELEVENTY_ENV=production eleventy",
  "clean": "del-cli _site",
},

After this it’s a case of adding a few lines of code to my ‘eleventy.config.js’ file

eleventy.config.js

const { execSync } = require('child_process');

module.exports = function (config) {

  // Pathfind Process
  config.on('eleventy.after', async () => {
    execSync(`npx pagefind --source _site --glob \"**/*.html\"`, { encoding: 'utf-8' })
  });

The next step is to create a search page. I prefer nunjucks as my template language, so below is my code. I also created a new navigation menu item as this stage to allow users to easily find the search page.

---
layout: base
permalink: '/search/'
title: Search
description: "You can now search the content of articles and pages of the Fat Buddha Designs website, we hope you find what you are looking for."
keywords:
  - Search
---

<section data-pagefind-ignore>
  <h1>Adding Pagefind Search To Eleventy</h1>
  <script src="/_pagefind/pagefind-ui.js" type="text/javascript"></script>
  <div id="search" class="search"></div>
  <script>
    window.addEventListener('DOMContentLoaded', (event) => {
        new PagefindUI({
          element: "#search",
          showImages: false,
          translations: {
          placeholder: "Search this website",
          zero_results: "We couldn't find any search results for '[SEARCH_TERM]'"
        }
      });
    });
</script>
</section>

The last part of the process was very simple as I use a base layout for my builds.

So in the base layout I added ‘data-pagefind-body’ to the main content section (I didn’t want to search the header, navigation or footer sections), this asks Pagefind to index all of the main content sections.

But I then added ‘data-pagefind-ignore’ to any part of the main content I didn’t want included in the search, this included the search page itself (see above code snippet) and then a few other pages such as my contact, sitemap and success pages.

<main data-pagefind-body>
  <p>Stuff you want searched.</p>
</main>
<section data-pagefind-ignore>
  <p>Stuff you don't want searched.</p>
</section>

Conclusion

Pagefind is the simplest and easiest method of integrating a search function into Eleventy that I have found, the setup is super quick and the results are quick and reliable.

Journal Index

Previous Article: SCSS Processing With Eleventy

Next Article: AI Is Changing The Way We Write