Enabling search for hugo blogs hosted on Azure Static Web Apps

- 2 minutes read - 372 words

I recently migrated this blog from Wordpress to an Azure Static Web App built using Hugo. While getting the basics setup with the Microsoft documentation and other blog posts was not too tricky, adding in a search functionality required some steps which I haven’t seen documented anywhere.

First some background, hugo works by taking your website as you define it pages, articles, etc. then converting it ahead of time to static HTML to be served when people visit the site. This is all handled via Github actions, which are small actions triggered off by certain activities such as pull, push etc. Whenever I push changes back to github the action is triggered and the whole site gets updated.

As for the search feature, getting it running locally was quick and easy, I found pagefind as a static web app search solution and followed their guide and it just worked. The tricky bit however was in getting the search index to be rebuilt automatically anytime I published a new blog post. So altering the github action seemed like a good place to start. The tricky bit is that pagefind has to be run after the site has been built (converted to HTML) and in order to build it we need hugo installed on the github action runner. For people more experienced with github actions that may seem obvious but that last paragraph was the result of a fair bit of troubleshooting and going down dead ends.

Installing hugo is quite simple, you just pull the file from github and install it, make sure you install the extended version however as a lot of features/themes require it. Once it is installed it is just a question of running the build and then index build steps before running the preexisting steps that you get when you setup a Azure Static Web App repo.

I’ve included a copy of the steps below, you just need to copy these and insert them into the steps of your existing Github action before the already existing deploy and build step.

- name: Set up Hugo
        run: |
          wget https://github.com/gohugoio/hugo/releases/download/v0.143.1/hugo_extended_0.143.1_linux-amd64.deb
          sudo dpkg -i hugo_extended_0.143.1_linux-amd64.deb

      - name: Build site
        run: hugo

      - name: Run pagefind
        run: npx -y pagefind --site public