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:

site:kevinquinn.fun <user-input-text-here>

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.

<div class="input-group">
<input id='search-input' type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<a id='generated-link' target="_blank" class="btn btn-default" href="https://duckduckgo.com/">Go!</a>
</span>
</div>
<script type="text/javascript">
var link= document.getElementById('generated-link');
var input= document.getElementById('search-input');
input.onchange=input.onkeyup= function() {
link.search= '?q=site%3Akevinquinn.fun+'+encodeURIComponent(input.value);
};
</script>

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.