💡 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.
- An input box, styled to your liking.
- A link tag.
- 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.