Pagefind for Static Websites

Posted on December 6, 2024

Tagged TIL, 11ty, pagefind : Search Like a Dynamic Site

As I move towards actually producing a website with 11ty, I knew I needed to add a search function. The ol’ Google search yielded a solution from Robb Knight, from whom I plan to steal many, many ideas.

Pagefind was very easy for me to implement, even though I know almost nothing about JavaScript. I don’t know how Pagefind makes money, but I’m going to research and funnel a few pesos their way.

After building an 11ty site, you then run a separate command to build a Pagefind index. There is a way to trigger the build automatically by modifying the 11ty configuration file, but it didn’t work for me immediately and I don’t find the extra step onerous considering most of my builds don’t require updated search results. The index is generated in your site folder designated for upload, typically “_site”. After uploading everything in _site, the live JavaScript returns search results as you would expect. Since the site is statically generated, there is no need to update the index until you add content and rebuild the site.

I need to work on styling the search and the results as I like the looks of the Pico CSS search form better. But when I use the Pico search form without modifying, the results show up on the right side of the search form???. Obviously, I want search results under the search box and I am doing something stupid. So for now, I’m just using the CSS provided with Pagefind, which means I’m not getting good results with a dark theme. The (Pagefind documentation outlines how to address this, but I would rather style all with Pico CSS so the dark theme will work like the rest of the page).

I thought it was crazy how quickly I was able to get something functioning. I’ll probably spend more time styling it than I did implementing the basis.