Super Easy Search For Jekyll Powered Sites

03 Mar 2009

Site search is one of the most important missing features when moving your blog off of a blog engine to a static site. I’m using Jekyll to churn out the pages for this site, but wanted back my missing search.

This post brought to you courtesy of the Google Search AJAX API…

As it turns out, I need only to drop in the AJAX powered Google search and it just works. Here’s how.

  1. First, head on over to Google Code and get an API key.
  2. Then, make yourself an include file named google_ajax_search.html (create the _includes directory in the root of your Jekyll project if you don’t have one).
  3. Next, add this code to the file you just created and substitute your api key and url:
    <script src="http://www.google.com/jsapi?key=your_api_key" type="text/javascript"></script>
<script language="Javascript" type="text/javascript">
  
  google.load("search", "1");
  
  function OnLoad() {
    // Create a search control
    var searchControl = new google.search.SearchControl();
    
    // Add in a WebSearch
    var webSearch = new google.search.WebSearch();
    
    // Restrict our search to pages from this site
    webSearch.setSiteRestriction('your site url');
    
    // Add the searcher to the SearchControl
    searchControl.addSearcher(webSearch);
    
    // tell the searcher to draw itself and tell it where to attach
    searchControl.draw(document.getElementById("search"));
  }
  google.setOnLoadCallback(OnLoad);
  
</script>
  4. Now, create a div in your layout, with id=“search” where you’d like the search box to appear.
  5. Lastly, include your google_ajax_search in the <head> of your layout.