…or to any website.

I was looking for a way to integrate Google site search on my Hugo sites and wasn’t happy with most of what I found, like this which brings your users to Google.com.

Not finding any tutorials, I decided to do this on my own.

Go to https://programmablesearchengine.google.com/

Click Get Started.

Fill out the form and click Create. You’ll get some code like this:

Find the file within your Hugo theme where you want to add the code.

If you use the code as is, you’ll get a search box with results appearing underneath the search box, which might be good for some use cases. The Programable Search engine provides a few other layouts which you can get if you go back to the Programmable Search Engine, edit your search engine, and go to Look and Feel > Layout.

Personally, I like the Overlay and Two page layouts.

Just be sure to get the code for the new layout, as it changes depending on what you select.

Lastly, be sure to modify the search form and search results appearance thru the Look and Feel > Customize section or by editing your CSS.

What a quick and easy way to add search to a site and it doesn’t need a server to run!