# Making Your Jekyll Blog Searchable with HTML, JavaScript and Google

DevFeed: [Making Your Jekyll Blog Searchable with HTML, JavaScript and Google](<https://devfeed.tech/articles/making-your-jekyll-blog-searchable-with-html-javascript-and-google-28326.md>)

Original publisher: [Read original article](<http://fuzzyblog.io/blog/search/2019/11/22/making-your-jekyll-blog-searchable-with-html-javascript-and-google.html>)

Author: Fuzzygroup

Published: 2019-11-22T00:00:00Z

Content type: tutorial

Language: en

Sources: [Scott Johnson](<https://devfeed.tech/sources/scott-johnson.md>)

Topics: [Jekyll](<https://devfeed.tech/topics/jekyll.md>), [HTML](<https://devfeed.tech/topics/html.md>), [JavaScript](<https://devfeed.tech/topics/javascript.md>), [Web Development](<https://devfeed.tech/topics/web-development.md>)

Tags: [blog](<https://devfeed.tech/tags/blog.md>), [html](<https://devfeed.tech/tags/html.md>), [javascript](<https://devfeed.tech/tags/javascript.md>), [jekyll](<https://devfeed.tech/tags/jekyll.md>), [search](<https://devfeed.tech/tags/search.md>), [usability](<https://devfeed.tech/tags/usability.md>)

## AI overview

A tutorial shows how to add site search to a Jekyll blog using an HTML form and JavaScript that sends site-restricted queries to Google. It explains the required template changes and notes the approach is free and simple, but offers limited control over result presentation and may include Google ads.

## Source excerpt

So yesterday someone said this to me: You know the problem with your blog - you write so much and its not searchable. Poppycock. Balderdash. Fizzle Sticks. Ok. Maybe. Yes there's not search box at the top of my blog but anything on the Internet that has a distinct domain name is actually easily searchable just by using Google. For example, here's how you'd find anything I ever wrote about MySQL: site:fuzzyblog.io mysql If you copy and paste that into google then you're get a search of my site for anything I ever wrote about mysql. If we wanted to make this a "feature" of my blog then we would need to do the following: Create an HTML form which has a search box and a search button. We'd need some JavaScript to handle assembling the query and sending it to Google. We'd need to integrate it with Jekyll Step 1: A Basic HTML Form Here's a basic html form: <form id="search" action="https://www.google.com/search"> <input id="q" name="q" size=50> <button type="submit" form="form1" value="Search" onclick="do_search();">Search</button> </form> Step 2: JavaScript Here's the JavaScript: <script type="text/javascript"> function do_search() { var q = document.getElementById('q'); var searchQuery = "site:fuzzyblog.io " + q.value; document.location = "https://www.google.com/search?q=" + searchQuery; } </script> What this does is take the query in the search field and assign it to a variable. It then merges it with the "site:fuzzyblog.io" bit of Google syntax. And, yes, there might be an issue with multi word queries needing to be joined with the + character (that's how HTML rolls but Google is generally pretty flexible). I'd test this now and rewrite the query but I'm in an aluminum tube at 35,000 feet without any access to Google (or most developer documentation). The final step is to set document.location to the google url for the search. That forces the query to execute and positions the user on the Google results page. Step 3: Jekyll Integration In order to integrate this with