Skip to main content
Pagefind

Pagefind #

Warning: This post hasn't been updated for over a year. The information may be out of date.

Pagefind is a powerful searching extension for static sites that is fast, relatively easy to implement, and supports multilingual sites out of the box.

I have been trying it out over my blog, and maybe someday I will use it on this website too (loikein/hugo-book Issue #6).

Config #

Quick test page #

To quickly add a page in your Hugo site that shows the Pagefind UI, do: (the front matter is to make Hugo recognise it as content page; code from Getting Started with Pagefind | Pagefind)

my-site/content/search.html html
---
title: "Search"
---
<link href="/pagefind/pagefind-ui.css" rel="stylesheet">
<script src="/pagefind/pagefind-ui.js"></script>
<div id="search"></div>
<script>
    window.addEventListener('DOMContentLoaded', (event) => {
        new PagefindUI({
          element: "#search",
          showSubResults: true,
          // showImages: false,
          resetStyles: false,
          excerptLength: 30,
        });
    });
</script>

Limit elements being indexed #

Doc: Configuring what content is indexed | Pagefind

You probably want something like this:

my-site/themes/my-theme/layouts/_default/baseof.html html
<main id="content" data-pagefind-body>

And this:

my-site/themes/my-theme/layouts/_default/taxonomy.html html
<div class="posts-list" data-pagefind-ignore>

pagefind.yaml #

This thing seems very bizarre and still under-documented to me. Not using it yet.

Docs (kinda):

Do not create an empty pagefind.yaml or put random things in it. It will cause errors.

Custom UI #

TBA

Refs:

Use #

Deployment #

Example with Hugo:

my-site/netlify.toml toml
[build]
publish = "public"
command = "hugo --gc --minify && npx -y pagefind@latest --site 'public'"

[context.production.environment]
NODE_VERSION = "18"

Local Hugo server #

Ref: Pagefind is quite a find for site search | BryceWray.com

The pagefind --serve flag is probably not to be used with a local Hugo live server, but to serve the building result website (public).

Step 0: Add the result files to .gitignore

my-site> sh
echo "public" >> .gitignore
echo "static/pagefind" >> .gitignore

Step 1: Build the website locally

my-site> sh
hugo

Step 2: Build the Pagefind search result

my-site> sh
npx -y pagefind@latest --site "public" --output-subdir "../static/pagefind"

Step 3: Start Hugo live server

my-site> sh
hugo server --buildDrafts --disableFastRender