Integrating PageFind with Hugo when hosting on Azure Static Web Apps
Last night on the The Changelog news postcast they mentioned PageFind a nifty library for adding search to static websites. The search provided out of the box from the theme I use for my blog was a bit average so I thought I’d have ago at integrating PageFind - there were a couple of gotchas that I needed to figure out.
Adding the search page into the Hugo site
This was the first gotcha I had to figure out, not being particularly well versed in the structure of Hugo, I spent a bit of time trying to figure out whether I needed to add a new layout to the theme I was using, this led me down a bit of a rabbit hole. In the end it turned out to be as simple as adding a new markdown file called
search.md into the
This will then be available at https://unravelled.dev/search. I also updated the menu navigation for my site, that was as simple as updating the
Indexing during build and deploy
The PageFind docs are really well written and provide clear guidance about how to use PageFind when running locally, and when building in situations when you have bare metal deployments - however my site is hosted on Azure Static Web Apps which meant I had to figure out how to get the Azure DevOps pipeline task to work nicely with Hugo and PageFind.
Indexing your site when running locally is as simple as
What I needed to do was get this command to run alongside the
Hugo build step in my pipeline.
My first attempt was updating the
AzureStaticWebApp@0 task as follows:
In theory this should have worked, however due to how the
AzureStaticWebApp@0 task works it did not. After much trial and error I worked out that I needed to split this into two steps, the first was to build the hugo site and run the PageFind indexing, then execute the
AzureStaticWebApp@0 task. My pipeline ended up as follows:
You can see the full pipeline defintion on GitHub.
With that PageFind is working nicely and available at https://unravelled.dev/search/.