Add search to Hugo with Page find

Patrick Rachford
1 min readJan 4, 2023

--

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.

--

--