This is an English translation of a Japanese blog. Some content may not be fully translated.
Hugo

Implementing Hugo Site Search with Google Custom Search Engine

Prerequisites

  • Custom search engine configuration must be completed

image-20210626223508573

Edit config.toml

To add it to the menu bar, add the following:

[[Menus.main]]
  Name = "search"
  URL = "/search/"

Add index.html under content/search

---
title: "Search"
---

<form action="https://cse.google.com/cse">
  <div class="searchBox">
    <input type="hidden" name="cx" value="1ef1df26a465b967e" />
    <input type="hidden" name="ie" value="UTF-8" />
    <input type="search" name="q" placeholder="Google Custom Search" size="30" autocomplete="off" />
    <input type="submit" value="Search" />
  </div>
</form>

Result

The menu bar and search box are now ready.

image-20210626223725020

The URL format is as follows, which allows searching from a command-line launcher:

https://cse.google.com/cse?cx=<search-engine-id>=UTF-8&q=<search-string>
Suggest an edit on GitHub