Adding DuckDuckGo Search to Your Website

Since my website is now powered by Hugo, the website just a bunch of static files. While that’s great for speed, one downside of being completely static is that there’s no dynamic searching capabilities built-in (such as with Wordpress).

A popular option is to add a DuckDuckGo search box to your website, which is great because your users get to take advantage of their great searching algorithms to search your website.

The primary downside to this approach, however, is that despite some limited styling options, the search box will likely look out of place on your website. Thankfully, there’s a very simple solution to this problem: create your own search box that directs the user to a DuckDuckGo search page.

DuckDuckGo Index

First and foremost, a DuckDuckGo search box on your website does no good if your website isn’t indexed. There’s no page to submit your website directly to them, but there are indirect ways. It has been quite a while, but if I remember correctly, I submitted my website to Yandex and that ended up getting picked up by DuckDuckGo within a few days.

JavaScript Snippet

Here’s the little function that will do all the heavy lifting. You can add it to the bottom of your <body> tag, or put it in a separate file.

<script type="text/javascript">
    function duckSearch() {
        var searchField = document.getElementById("searchField");
        if (searchField && searchField.value) {
            var query = escape("site:jonbeebe.net " + searchField.value);
            window.location.href = "https://duckduckgo.com/?q=" + query;
        }
    }
</script>

On the line that starts with var query = ..., you’ll want to replace “jonbeebe.net” with your domain name, otherwise you’ll be adding a site search for my website to yours.

What this function does is grab the input element with an id of “searchField”, and redirect the user to a secure DuckDuckGo search page, filtered to only include results from your website.

This obviously won’t work if the user has JavaScript disabled. If you want, you could fall back to the official DuckDuckGo search box with a <noscript> tag for those users. I’m pretty sure that works without JavaScript enabled, but I haven’t tested it myself. I’ll probably do this for my website in the future but it isn’t a priority for me right now.

Here’s an example of what the search form might look like (it’s what mine looks like):

<form onsubmit="duckSearch()" action="javascript:void(0)">
    <input id="searchField" type="text" value="" placeholder="Search...">
</form>

This part is flexible, and it depends on your specific website. I chose to not have a “search” button and just have the user submit the form using Enter/Return. You’ll also want to style it with CSS to match your website design.

What you need keep is the first line, and to make sure the <input> element’s id matches the one that is looked up in the duckSearch() function.

Once all that is in place, and your website is indexed by DuckDuckGo, your visitors will be able to search your website with a powerful search engine, and the search box will look exactly like you want it to. You can also substitute the DuckDuckGo search query URL with Google’s (or Bing, or whatever else supports site searches) if you prefer.

The only downside is that the search results page won’t be on your website, but I don’t think that’s an issue. After all, most of the links on the search page will take the user right back to your website. Even extremely high-profile blogs such as Daring Fireball kick the user to an external DuckDuckGo search page, so I take that as positive validation of the concept.

HostGator $3.96

$3.96 for web hosting – used by jonbeebe.net. Get started today.