Making a searchbox

I made this in January as I sought to make a search page for my Hugo site. I have made a search page for this site, using a jetpack widget, although with the new theme, a search bar is now offered on every post and index page.

I found another use case to make a search bar.

I made a search with a mandatory additional keywords on my Rise of Empire page; this is to avoid typing the RoE qualifier each time. I got the form & script code from Chat GPT and then spent ages working out the CSS to work with this theme’s predefined CSS. I have bookmarked the pages that helped me in diigo.

Here is the code; I needed the style statement on the input element to avoid having the search button on the next line.

      <form action="https://www.google.com/search" method="get" target="_blank">
        <input type="text" name="q" id="search-input" 
               style="width:50%; display:inline-block;margin-left: 8px;" />
        <button type="submit">Search</button>
      </form>
  
      <script>
      document.getElementById("search-input").value = 
          '  "Rise of Empires: Ice & Fire"';
      </script>

Hugo is not great at this, as I wanted on on my 404 page; I found a template I liked, which had a serach box embedded. I use this page to build one. It works quite nicely but there is a smallbug, and the site https://dfl.ddns.net doesn’t seem to have any entries in the google index and so I dropped the search box.