Build Websites with Hugo

Creating the Search Interface

Right now, when you visit http://localhost/search in your browser, you see the title. The search.md file you created renders output in both JSON and HTML formats, but you only created a JSON layout. The default single page layout is currently applied, but you didn’t define any content in the search.md file. Let’s get the search form to appear on the page.

Create the file themes/basic/layouts/_default/search.html and add the following code, which defines the main block, displays the title, and defines a text box, button, and area for search results:

search/portfolio/themes/basic/layouts/_default/search.html

{{ define "main" }}

  <h2>{{ .Title }}</h2>

  <input type="search" id="searchField">
 <button id= ...