You may have seen Doug’s post on how to add Swiftype to Octopress. I originally followed it to get things working too. But I wanted a slightly different experience and here are my notes for that.
Setting up Swiftype
Do the following on Swiftype.com
- Create an account at Swiftype.com
- If you haven’t already, create an engine for your site.
- Click the Install tab.
- Choose “Different Page” for the search results appearance
- Choose a URL for where the search results will display. I chose http://www.tunnelsup.com/search/index.html
.searchfor the search field input selector.
#st-results-containerfor the results container.
- Disable autocomplete.
Now go over to Overview tab and look for your “Engine Key”. We’ll need that later.
Create the Search results page
Do something like
rake new_page["search"] and I think that will make a search/index.markdown file.
Here’s the contents of my entire index.markdown page (except the yaml at the top).
I have no idea what’s happening in this script so I’m sorry I can’t explain it.
Create the search box in the navbar
navigation.html you can add a search box. Here’s what mine looks like:
The names here are important because Swiftype will reference the class of this form while our jquery coming up next is going to refrence the form value.
Now comes the part that feels hacky to me. If you have a better solution please let me know in the comments. Since jquery is already loaded by default we’ll take advantage of it slightly here.
after_footer.html add the following:
This will trigger when someone hits enter on the search box. When that takes place it will redirect the user to the search results page with a specially crafted URL. For some reason Swiftype needs this URL in order to process the search request. Then we restrict the form from being submitted by doing the preventDefault() function.
The results should be the same as what you see on my search results page on this website.