Add Duckduckgo Search to a Hugo Generated Blog

Rob V

Here I describe how to add and customise the look of the duckduckgo.com search box to give search functionality to a hugo generated blog.

Hugo

hugo is a static website generator written in go. It’s easy to use, fast and customisable.

DuckDuckGo

DuckDuckGo has a funny name but it is a search engine that takes your privacy seriously.

DuckDuckGo The search engine that doesn’t track you.
What you search for is your own business and we’d like to keep it that way. That’s why we don’t collect any personal information and therefore, have none to share.

From here on in a may refer to DuckDuckGo as DDG.

DuckDuckGo’s Search Box allows us to add search functionality to our website without our server having to do anything.

Normally we would have a cgi script on our server that queries a database or greps our markdown files to search our website for the user. Using DDG’s search box the work is outsourced to DDG and their web site indexing. Not having any cgi running also greatly reduces any security risks they my introduce. The downside to this is the search results will be shown on DDG’s domain and not our own. An example of this in action can be seen by following this link

Despite this I will still use this for simplicity’s sake.

If you opened the previous link you will be taken to the DDG customisation page. Here you can tweak various options such as size, placeholder text, show logo etc. Even more options can be specified by using the URL parameters found here. This allows us to set region, safe search, units of measure, advertisements and more.

I have not set any of these search options but mentioned them as others may wish to.

Hugo DDG Search Box Partial

Create a file named search.html in your theme’s partials directory and enter the following code:

<form onsubmit="myFunction(searchboxid); return false;" >
  <input type="search" id="searchboxid" placeholder="Search" />
  <button type="submit" >Search</button>
</form>
<hr>

<script language="javascript">
  function myFunction(searchboxid) {
  if (window.location.hostname == "localhost") {
  console.log( "Running on localhost not a proper domain so cannot search via duckduckgo.com" );
  return;
  }
  var q = document.getElementById('searchboxid').value;
  q = encodeURIComponent( q );
  // var site = "rv1.tech";
  var site = "{{ .Site.BaseURL }}" ;
  var url  = "https://duckduckgo.com?q=" + q + "+site:" + site; 
  console.log( url );
  window.open(url, "_self");
  }
</script>

Now we can add the search box anywhere on our website. Add the following to the template file where you want the search box to be display. In my case aside.html, part of the blank theme I am using.

	<div>
    {{ partial "search.html" . }}
	</div>

You should now have a search box on your website which when used will take us to DuckDuckGo.com and show us some search results.

There may not be any search results returned by DuckDuckGo.com until they have indexed your web site.

Summary

There we have it, a search facility for our static website using DuckDuckGo.com as the search engine.

In my next post I will describe how to have DDG to index our site so results actually appear.


Tags:

Share:

comments powered by Disqus