Blog

Holey Guacamole, I have search on my site and I don't need my own server!?

Yesterday, I discovered an amazing service called Swiftype that enables search for any site.

My site is entirely hosted on Github Pages which means I don't need to worry about maintaining a server. Unfortunately, that makes implementing features like search very difficult.

But not anymore!

Swiftype is integrated entirely on the client-side.

About 10 minutes after reading about them on Hacker News I had search working on my personal site.

The guys over at Swiftype really make it easy to integrate, but here's how I integrated it with Jekyll just as reference to those trying to do the same.

Step One: Sign-up for Swiftype

1. Head on over to swiftype.com and register.

2. Follow the steps outlined in the demo video below. Check out Step Two once you've got all the pages you want indexed in Swiftype.

Step Two: Setup the Main Layout

Since every page on my site uses the layout default.html, I put the bulk of the Swiftype code here.

1. To create my search box, I added the following form to my bootstrap navbar in default.html.

   1 <form>
   2 	<input type="text" id="st-search-input" class="st-search-input navbar-search"/>
   3 </form>
   

   Note: I added the additional class "navbar-search" for bootstrap styling.

2. I then added the Swiftype javascript.

   I chose to have Swiftype show results on a separate page, which means that I needed to do a check in default.html to load slightly different javascript when rendering for the results page.

    1 {% if page.url == '/results/index.html' %}
    2 
    3 <!-- Begin Results Swifttype -->
    4 <script type="text/javascript">
    5   var Swiftype = window.Swiftype || {};
    6   (function() {
    7     Swiftype.key = 'ENGINE_KEY';
    8     Swiftype.inputElement = '#st-search-input';
    9     Swiftype.resultContainingElement = '#st-results-container';
   10     Swiftype.attachElement = '#st-search-input';
   11     Swiftype.renderStyle = "inline";
   12 
   13     var script = document.createElement('script');
   14     script.type = 'text/javascript';
   15     script.async = true;
   16     script.src = "//swiftype.com/embed.js";
   17     var entry = document.getElementsByTagName('script')[0];
   18     entry.parentNode.insertBefore(script, entry);
   19   }());
   20 </script>
   21 <!-- End Results Swifttype -->
   22 
   23 {% else %}
   24 
   25 <!-- Begin Swifttype -->
   26 <script type="text/javascript">
   27   var Swiftype = window.Swiftype || {};
   28   (function() {
   29     Swiftype.key = 'ENGINE_KEY';
   30     Swiftype.inputElement = '#st-search-input';
   31     Swiftype.resultContainingElement = '#st-results-container';
   32     Swiftype.attachElement = '#st-search-input';
   33     Swiftype.renderStyle = "new_page";
   34     Swiftype.resultPageURL = "/results/";
   35 
   36     var script = document.createElement('script');
   37     script.type = 'text/javascript';
   38     script.async = true;
   39     script.src = "//swiftype.com/embed.js";
   40     var entry = document.getElementsByTagName('script')[0];
   41     entry.parentNode.insertBefore(script, entry);
   42   }());
   43 </script>
   44 <!-- End Swifttype -->
   45 
   46 {% endif %}
   

3. Be sure to replace ENGINE_KEY with your actual engine key. This can be found in the Swiftype console.

Step Three: Setup the Results Page

1. I created the following file for my results page.

   1 /results/index.html 
   

   You can change the name of this file to whatever you want. If you do so, be sure to update Swiftype.resultPageURL in the javascript you included in your main layout, aka, default.html.

   1 Swiftype.resultPageURL = "/results/";
   

   Also, make sure to change the string in the liquid if statement.

   1 {% if page.url == '/results/index.html' %}
   

2. Finally in /results/index.html, I created the container to load the results onto my results page.

   1 ---
   2 layout: default
   3 title: Results
   4 ---
   5 
   6 <div id="st-results-container"></div>
   

In Conclusion

I hope this post will make it easier to integrate Swiftype with Jekyll.

Seriously, if you've been waiting to integrate search into your site, now is the time. It doesn't get any easier than Swiftype.