Add Search to Hugo Static Site in 5 Minutes with No Dependencies

Having search on your site is a big plus for the user experience (and for finding that piece of content I remember writing but can’t find!). My site isn’t big enough that it’s worth spending much effort setting up a real search solution like Algolia , Meilisearch , or even LunrJS .

Instead, I got inspiration from the past - let a search engine do the work for me, like so many sites in the 2000s. This is the 80/20 version of adding search to your site - a good enough option with minimal effort.

What are we adding 🔗︎

Search engines provide the option to search within a single website with site:<domain>. We will use that as our base - then sync an input box with a clickable link containing user text. On click, it takes them to the search engine page with the search filled for them:

Total additions to your codebase - 3.

1. An input box, styled to your liking.
2. A link tag.
3. And a short script.

Show me an example 🔗︎

This site is built with an older version of Boostrap, but the core element is the <script> from this handy dandy Stack Overflow post , then attach it to your input box.

Search in under 5 minutes 😎 🔗︎

You just added search to your website in no time, give yourself a pat on the back! Is it the most amazing search in the world? No, not really - but it does the job. Most developer blogs only have a couple Hello World! posts anyway, so Algolia might just be a tiny, tiny, bit overkill. Now take that time you saved and get back to scrolling Hacker News.