Adding Site Search

Give visitors a search box that looks through every page on your site — no server, no third-party service, no extra setup beyond a couple of lines in your template.

Every time you Publish or Render to Local Folder, WebHaste generates a search-index.json file at your site's root — a lightweight, searchable extract of every page's title, description, and text content. It's created automatically for every site; you don't need to turn anything on to get the data itself.

Adding the search box

If you're using one of the official Bootstrap or Tailwind starter templates, search is already wired in — look for the search box in the header. If you're building your own template, add two script tags to your template's <head>:

<script src="/scripts/lunr.min.js"></script>
<script src="/scripts/search.js"></script>

and a search box wherever you'd like one to appear:

<input type="search" id="cs-search-input" placeholder="Search...">
<div id="cs-search-results"></div>

That's it — WebHaste looks for those two element IDs and wires everything up automatically. A template that doesn't include them simply never loads the search index, so there's no cost to leaving search out of a page or template that doesn't need it.

Styling the results

Results are unstyled by default, so they fit whatever CSS framework your site uses. A search renders as:

<ul class="cs-search-list"><li class="cs-search-item"> — one entry per matching page, each with a link and a short excerpt
<p class="cs-search-empty"> — shown instead when a search returns nothing

Style these the same way you'd style any other cs-* class from a block or menu — add rules for them in your site's own CSS file.

Keeping a page out of search (or off the sitemap, or hidden from Google)

Click the ⚙ icon next to any page to open Page Properties. Three checkboxes there control discovery, independent of each other and of Draft status — a page with any of them checked still publishes normally, it's just left out of the file(s) named:

Exclude from sitemap.xml — leaves the page out of your generated sitemap.
Exclude from site search — leaves the page out of search-index.json, so it won't show up in your own search box.
Hide from search engines (noindex) — adds a real <meta name="robots" content="noindex"> tag, telling Google and other search engines not to index the page. This is the only one of the three that actually affects how outside search engines treat the page — the other two only control WebHaste's own generated files.

What kind of search is this?

It's a basic, client-side keyword search — good for helping visitors find the right page on a typical WebHaste site (a handful of pages up to a hundred or so), not a full-text search engine with typo correction or advanced ranking. Search runs entirely in the visitor's browser using Lunr.js, a small library bundled with WebHaste — no external service involved, and no network request beyond fetching your own search-index.json.