Feb 25, 2022
ARTICLE
Adding Search to a Jamstack Site
From The Jamstack Book by Raymond Camden and Brian Rinaldi
Let’s learn how to add search functionality to a Jamstack site!
Take 40% off The Jamstack Book by entering fcccamden into the discount code box at checkout at manning.com.
After processing basic form input, search is probably one of the most important features for a Jamstack site. If your site has more than a few pages, giving users the ability to quickly find what they want becomes important. In this article we discuss two different options for search. Let’s begin with a “drop into place” solution once again from Google, Programmable Search Engine (https://programmablesearchengine.google.com/about/).
Google’s Programmable Search Engine was previously known as “Custom Search Engine”, and if you do some research, you may find articles referring to that or “CSE”. This is a service from Google that lets you define a “portion” of Google’s search engine to use within your own site.
To begin, click the “Get Started” button from the Programmable Search Engine site and login with your Google credentials. Once logged in, you’ll be dropped into the dashboard (figure 1):
Begin working with this service by clicking the “Add” button. The first prompt you’ll be presented with is the sites to search, and here’s where things get interesting. You can enter any site you want here. This is right — even if you’re building your own site at a domain X, you can enter domain Y (and more) for your search engine. Obviously, you probably want to use your own domain but Google lets you decide whatever makes sense. Also be sure to note (as seen in figure 2) that you can enter subdirectories as well.
As we said, you can enter anything you like here. If you’ve already deployed your own Jamstack site, even if to a temporary location, you can enter the URL. For the purpose of this article, and to give us a lot of content to use, we’ll use my blog at raymondcamden.com. For the name of the search engine, let’s use JamstackSearch1. This is purely arbitrary and it’s used to help differentiate one of your programmable search engines from another. In a real-world scenario, I’d typically use the same name as the site itself. After you’ve entered your values, click the “Create” button. You’ll see a success message (figure 3):
At this point note the three options. The first (Get code) gives you the code needed to add the search to your site, we’ll get to that in a second. The third option (Control Panel) is where you’ll configure options, we’ll demonstrate that too. The one in the middle (Pubic URL) is something else. As soon as you build a programmable search engine, Google provides a URL that lets you use your search engine right away. This is great if you want to test how well it’s working, how it ranks results, and so forth. You could also share this with your client as you’re building your site to allow them to see it as well.
For now, click on “Get code”. On the next script you’ll be presented with a short code snippet. Listing 1 demonstrates taking this code and dropping it into a simple HTML page. The same basic “shell” from the previous section was used.
Listing 1. A search test page (/chapter7/search/test1.html)
<!DOCTYPE html>
<html>
<head>
<title>A Regular Page</title>
<style>
body {
background-color: bisque;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
footer {
margin-top: 10px;
font-size: 10px;
}
</style>
</head>
<body>
<h1>Search</h1>
<script
async src="https://cse.google.com/cse.js?cx=9fda4c9699117d517"></script> #A
<div class="gcse-search"></div> #B
<footer>
<p>Copyright Whenever</p>
</footer>
</body>
</html>#A The beginning of the snippet from Google
#B The end of the snippet
As with Google Forms, you can drop in the snippet where it makes sense to you. Fire up a local web server and then run the page. You’ll see a basic form experience completely powered by Google (figure 4):
Go ahead and enter something in the search. Depending on what domain you enter, you should try something that makes sense. If you use my domain (raymondcamden.com), you can try “vue.js” as your input. Figure 5 demonstrates what you may see:
Right away you’ll notice that the UI is a bit… different from what you may expect. Instead of displaying the results on the page, a floating modal is used. If you don’t like that (I certainly don’t), we can tweak that and we’ll do it in a moment. The next thing you may notice, like in figure 5, is that every visible result is an advertisement. Yep, like the main Google.com, you’ll get ads in your result. Not shown in the figure above is that if you scroll past the four ads (yes, four, and your results may vary), you do get good results with snippets and images at times as well (figure 6):
Let’s start customizing the search engine. Back in the dashboard, click on “Look and feel”. Here you find multiple options for customizing how the search engine is displayed, but let’s start by changing the layout from “Overlay” to “Full width” (figure 7):
Not shown in figure 7 but handy to use is a live example of your search engine on the right-hand side of the dashboard. You can test it there if you want, or click save and test back in the simple HTML page. Your changes are immediately shown (figure 8).
Let’s make another tweak. If you click on one of the results, you’ll see that it opens in a new tab. Although this is certainly something you may want, let’s change that to load in the current tab instead. In the dashboard, go to “Search features”, then “Advanced”, then “Websearch settings”. In the “Link Target” field enter _self (figure 9).
As before, save, and reload your test HTML file and click on a result. It should load in the same tab.
Google’s Programmable Search Engine is even more customizable if you want to modify the HTML of the snippet. Their Developer Guide (https://developers.google.com/custom-search/docs/overview) goes into detail on what can be accomplished. You can also make use of an API that returns results in pure JSON, but this is a commercial feature only.
Now that we’ve considered a “plug and play” solution, you can try a more integrated option. Check it out on Manning’s browser-based liveBook platform here.
