How to add search to a static site
Give visitors real site search without a backend, a database, or a paid search service - it runs in the browser, from an index built from your content.
Search is the other feature that trips up static and file-based sites. Traditional search needs a server querying a database - which a static host does not have. So people reach for a hosted search service like Algolia, adding a dependency, a cost, and another company holding a copy of their content.
There is a simpler way that needs no backend at all: build a search index from your pages and query it in the browser.
How client-side search works
- Build an index. When the site is generated, the content of each page (titles, headings, text) is collected into a compact index file.
- Ship it to the browser. The search page loads that index.
- Query locally. As the visitor types, the search runs in their browser against the index - instant results, no server round-trip, no external service.
Because the index is just a file and the querying is client-side, there is nothing to host, nothing to pay for, and no third party in the loop.
What you get
- Real search across your whole site, with results that link straight to the matching page.
- No backend or database - it is a static index plus a little JavaScript.
- No search SaaS - no per-query fees, no external branding, no handing your content to another service.
- Fast - results appear as the visitor types.
The trade-offs, honestly
Client-side search suits small-to-medium sites best - the whole index loads in the browser, so a site with tens of thousands of pages would want a server-side approach instead. For a blog, docs, a brochure site or a directory, in-browser search is ideal.
Add it
lazysite includes site search built exactly this way - an index generated from your content, queried in the browser, with results linking to the page.
- See everything it does.
- Read about building dynamic sites without a backend.
- Or get started.