Hero image credit: Photo by Andrea Piacquadio

Here’s a fun one I ran in to on my blog here. I discovered that the search function was working in my localhost testing, but when I published to the web, it wouldn’t return any results. It also presented no errors, so I had nothing immediately obvious to look at.

No Help Online

Searches of the Hugo support forums returned a couple of examples of people who were seeing the same issue. However, neither of those examples were of any help. In one thread, the issue was CORS related and they saw the error in the console. That wasn’t me. There were no errors in my console logs. In the other thread, the user hadn’t set their baseURL in their config. Checked mine, and it was set correctly. And that was it. I found no other results from GoogleBing. So no help there.

Debugging

Next step was to start debugging through the JavaScript search function to see what was happening there. That’s where my first clue came up. There was the following line:

const url = window.location.href.split('/search/')[0] + '/index.json'

For some reason, on the web server, it was resulting in a different format of result, where the trailing slash wasn’t being included in the value that gets generated. As a result, I would get a result on the web server like:

https://barretblake.dev/search?keyword=term/index.json

This would result in the fetch call only getting the search template text and not the JSON search results. But on localhost, the trailing slash after search was there. Odd.

I played around with a couple of changes to the function, to no avail. The next step was to look at the template file. The form in the HTML code makes a get to the search page, which is supposed to return JSON. It has the following code for the search box:

        <form class="mx-auto" method="get" action="{{ "search" | relLangURL }}">
          <input type="text" name="keyword" value="" placeholder="{{ i18n "search" }}" data-search="" id="search-box" />
        </form>

At this point, I wasn’t really sure what to try, so I added a trailing slash after the search token:

        <form class="mx-auto" method="get" action="{{ "search" | relLangURL }}/">

Why not? Publish to the web and boom, search suddenly starts working. Cool. Not exactly sure why that resolved it. I’m still fairly new to Hugo. But it works now, so I’ll take it.