Add search to Hugo with Page find

An easy to way to implement search to your static site

If you want to add search functionality to your static website built with Hugo, Pagefind is a great option. It’s a client-side, fully static search library that can easily be integrated into your Hugo site.

One of the benefits of Pagefind is that it only requires a folder containing the built static files of your site. After indexing, it adds a static search bundle to your built files and exposes a JavaScript search API that can be used anywhere on your site.

To use Pagefind with Hugo, use a Dockerfile-publish file or equivalent. The following command line instructions will index Pagefind and start the Hugo server:

hugo
npm_config_yes=true npx pagefind --source "public" --bundle-dir ../static/_pagefind
hugo server

The second line (starting with npm_config_yes) is the command to index Pagefind.

You can also add it the following command to your package.json file.

 "search": "hugo && npm_config_yes=true npx pagefind --public \"public\""

For more information on how to use Pagefind, you can check out their installation documentation or read this blog post by Bryce Wray.

Pagefind is a simple and effective way to add search functionality to your static Hugo site. Give it a try and see how it can enhance the user experience on your site.