ARTICLE

Adding Search to a Jamstack Site

From The Jamstack Book by Raymond Camden and Brian Rinaldi

Figure 1. The Programmable Search dashboard
Figure 2. The initial screen for setting up a programmable search engine
Figure 3. Congratulations, you’ve built your own search engine (well, Google did to be honest)
<!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>
Figure 4. The default search experience provided by Google
Figure 5. Results from searching the programmable search engine
Figure 6. “Real” results may be found after the ads. Google needs the money you know…
Figure 7. Specifying a new layout for your search engine
Figure 8. The search engine with inline results
Figure 9. Modifying search results behavior via the dashboard

--

--

Follow Manning Publications on Medium for free content and exclusive discounts.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Manning Publications

Follow Manning Publications on Medium for free content and exclusive discounts.