How to Add a Search Feature to Your Static Site

Jae Johns
2 min readMar 28, 2017

--

This series of articles teaching you how to convert Github’s free hosting static site feature into a more dynamic website is almost complete.

Part of every great CMS platform is a search function. However with Github’s static site hosting it makes it difficult to have a search function. In fact you may think you need a more dynamic site to have that feature. The good news is that I’ve been teaching how to convert Github into a more dynamic-drive website, and that includes having the power of a search feature.

This lesson with be quite short.

Tipue Search.

That’s it.

Tipue search is a jquery plugin that gives your website this feature. Download this plugin at http://www.tipue.com/.

A more comprehensive installation guide can be viewed at their site documentation, but I’ll give a quick overview.

Quick Install

  1. Download plugin
  2. Add tipue search css link in document head
  3. Set up a form
  4. Have form action attribute link to search.html page
  5. Give form input an id of tipue_search_input.
  6. Style form anyway you choose
  7. Add all relevant tipue js in document head
  8. Add below javascript to initialize tipue feature

<script>

$(document).ready(function() {

$(‘#tipue_search_input’).tipuesearch();

});

</script>

That’s it! With this utility you can turn any simple website into a more dynamic functioning one only with this search feature.

Get more insights like this on my blog, jaejohns.com/blog

--

--

Jae Johns

Share my insights and experiences to help you become a successful creative and make a full time income doing it. More at jaejohns.com/blog