Fork me on GitHub
25 July 2015

GitHub pages provide no means for search and you can’t use Jekyll plugins, yet a site needs a search. So here’s a way to provide a Bing searchbox to a Jekyll generated website. Of course a Google, Yahoo! or whatever searchbox in some other form of website is just as easy.

First add the following HTML to a suitable location in your default.html layout.

<div class="searchbox">
  <form method="get" action="http://www.bing.com/search">
    <input id="searchinput" type="text" placeholder="Search..." name="q" value="" /> 
    <input type="hidden" name="q1" value="site:{{site.production_url}}" />
  </form>
</div>

Then add some CSS to your style.css file, in my case I used the following:

.searchbox {
  float:right;
  width: 50%;
  padding: 3px;
  border:0;
  outline: none;
  vertical-align: bottom;
}

#searchinput {
  width:100%;
}

And your done.

Related Posts

blog comments powered by Disqus