Add full-text search to a static site, no server

Search feels like it needs a backend: a server to run the query, a database to search. On a static site you have neither. The trick is to do the indexing at build time and the searching in the browser, so you get real full-text search with nothing running on a server.

The idea

Split the job in two.

• At build time, walk your content and generate a search index, a compact structure that maps words to the pages that contain them.
• In the browser, load that index and a small search library, and query it locally as the user types.

There is no search API because the index lives on the client. Any static host can serve it.

Build the index

During your build, collect the fields worth searching, usually the title, a summary, tags, and the URL, for each page:

const index = posts.map((p) => ({
  title: p.title,
  summary: p.description,
  tags: p.tags,
  url: `/blog/${p.slug}`,
}));
// write index to public/search-index.json

Indexing titles and summaries rather than full article bodies keeps the file small while still catching most searches.

Search in the browser

Load the index once, then hand it to a small client-side search library and query it as the user types:

const res = await fetch("/search-index.json");
const data = await res.json();
// feed data into a lightweight search library, then:
const results = search(query); // runs in memory, instantly

Because everything is in memory after the first load, results appear as fast as the user can type.

Where the limits are

This approach is ideal for blogs and docs, up to a few hundred or low thousands of pages. Keep the index to titles and summaries to keep it light. If the index grows too large to download comfortably, split it, or graduate to a hosted search service, but most content sites never reach that point.

The appeal is that it keeps a static site static. No server to run, no API to secure, no query cost, just an index file and a little JavaScript delivering instant search on any host.