Simple site-search for Hugo, using Google

Want a simple search functionality for your Hugo site? Here’s the setup I used here.

It uses the Google search advanced query operators (which you can get if you go to Tools / Advanced Search) to add the site as a separate parameter.

  • as_q = the query you want
  • as_sitesearch = the site you want to search in

It opens up in a separate window, if you’re ok with that. Otherwise, just remove the target="_blank" part.

Added to /themes/your-theme-name/layouts/partials/header.html

<nav id="sub-nav">
  <div id="search-form-wrap">
    <form id="search_form" action="https://www.google.com/search" class="search" 
       method="get" target="_blank">
       <input type="text" name="as_q" placeholder="search..." />
       <input type="hidden" name="as_sitesearch" value="{{ .Site.BaseURL }}" />
       <input type="submit" value="&#x1F50D;" alt="Search this site" />
    </form>
  </div>
</nav>

… with a bit of styling in the CSS for the submit-button:

.search input[type="submit"] {
  border: 0; 
  background-color: #fff;
  padding-left: 7px;
}

.search input[type="submit"]:hover{
  cursor: pointer;
}

Comments / questions

There's currently no commenting functionality here. If you'd like to comment, please use Twitter and @me there. Thanks!

Tweet about this - and/or - search for latest comments / top comments

Related pages