< Back to Blog

Add Site Search to Your WebHaste Site (No Server Required)

Illustration showing site search window, with user hands grabbing content from a website

Most small websites eventually hit the same moment:

A visitor lands on your site, knows what they want, and starts hunting through menus. However, studies show that 30%-50% of visitors would prefer a keyword search to menus and links alone.

A simple search box provides that.

With WebHaste v0.2.0 and higher, you can add site search that looks through every page on your site - no server, no third-party service, and no complicated setup.


What you get

When you publish your site (or render it to a local folder), WebHaste automatically generates a file called:

It lives at your site root and contains a lightweight, searchable extract of each page:

You do not need to turn anything on to generate the data. If you publish, you get the index.

Then, if your template includes a search box, WebHaste wires it up automatically.


The best part: it runs entirely in the visitor’s browser

This is client-side search.

That means:

Your visitor’s browser downloads your search-index.json and searches it locally using a small library called Lunr.js (bundled with WebHaste).


If you use the official starter templates, search is already included

If you’re using one of the official starter projects:

…search is already wired in for the latest versions.

Look for the search box in the header.

(If you removed it, you can add it back - the feature is still there.)


If you’re building your own template, you only need a couple lines

To add search to a custom template, you do two things:

1) Add two scripts in your template head

Add these script tags in your template’s <head>:

2) Add a search input and a results container

Place these anywhere you want the search UI to appear:

That’s it.

WebHaste looks for those two element IDs and connects everything automatically.


No search box = no slowdown

If a template does not include those IDs, WebHaste simply never sends the search index to the visitor.

So you can leave search out of sites that do not need it (like a one-page landing page) without paying any performance cost.


Styling the search results (so it matches your site)

Search results are intentionally unstyled by default, so they can match whatever CSS framework you are using.

When results render, you’ll see markup like:

To style it, just add rules for those cs-* classes in your site’s CSS - the same way you’d style any other block or menu.


Keep pages out of search (or off your sitemap, or hidden from Google)

Sometimes you have pages you want to publish, but not advertise.

In WebHaste, click the gear icon next to any page to open Page Properties.

You’ll see three independent checkboxes:

Important: even if you check any of these, the page still publishes normally. These settings only control discovery.


What kind of search is this (and what is it not)?

This is a basic keyword search designed for typical WebHaste sites - from a handful of pages up to around a hundred.

It is great for:

It is not meant to be:

The upside is that it stays simple, fast, and private.


Upgrade and try it

If you’re on WebHaste v0.2.0+, you already have everything you need.


Download WebHaste (free)

If you want the simplicity of static sites with a CMS-like workflow, WebHaste is a great fit.

Download the free extension:  https://chromewebstore.google.com/detail/webhaste/ofblooflocfdegjjpgjfbefnjmjmbapa 

Learn more:  https://chromecms.com/