× Search About Posts Code Music Links
Blank Try
experiment
lots
learn
more

New Search

Updated on
Last site update: 8 May 2024

I added a new Search page from a post on the Hugo forums.

It works with a javascript file working on a JSON file that is generated by Hugo. It seems good, fast and easy to set up.

Options

The options can be configured in the shortcode file (search.html)

  • The search begins as soon as at least 3 characters have been typed ( minlength ).
  • badwords contains a list of words to be ignored.
  • If you prefer to trigger the search via the submit button, you have to set autocomplete to “0”.
  • You can also call the search page via ?query=searchterm
  • The search results are sorted according to the number of hits for the search term, with searchfield_weight as a weighting. “5” means that the hit in the corresponding field is weighted with a factor of 5.
  • The search function searches through all Sections. If you want to show in the search results which section the result comes from, you can use section_trans to translate the internal section key.
  • It is also possible to link to an external search engine (in the example DuckDuckGo), if the internal search does not provide a satisfactory result in individual cases (add_searchlink)

More Options

  • The search function can search different sections separately. This must be set section_search to “1” and the corresponding checkboxes added to the search form (commented out in the example).
  • It is possible to specify several JSON arrays as the source for the search. This is especially useful if you want a single search function to search multiple websites. To indicate in the results which hits are local and which are from an external website, each item in the array of the external source can contain the value “extern”:“1”. This causes the string from extern_icon to be added to the search result after [TITLE]. Example: bienenkiste.de/suchen/?query=Königin 3
  • With very large JSON files, it may take a moment for the file to load. During this time is json_wait displayed. A spinner/loader icon can be inserted here - if available in the theme. As soon as the file is loaded json_ready is displayed.

Limitations

The first reply went over it’s limitations:

The downside of your solution is of course that it is keyword only and that the download size grows as your blog grows and the search will become slower over time, especially with limited data rates in non western countries.

But the response from emk was pretty reasonable:

I wanted to write a recipe for HUGO dummies that can be used without any programming or server admin knowledge.

I was also worried at first that it might be a bit slow. But I think for 90% of HUGO websites it will probably be enough and run super fast. The example https://bienenkiste.de/suchen/ searches almost 200 pages. The two JSON files together are ~650 KB in size. Many homepages are 10 times “heavier” today. And the javascript runs very very fast. The main problem with larger sites is that I have not provided pagination. But you can compensate this a little by increasing minlength.

Alternatives

Sounds goo up to around those 200 pagess. Other solutions include:

  1. Algolia which has a free forever tier which keeps 10,000 records and up to 10k searches per month. After that it’s $1 pcm per 1000 searches.