Static sites cannot easily provide search facilities because there's no back-end framework, language, or database...
You can use third-party services such as Alogia, AddSearch, or Google's Programmable Search Engine. These provide a search API, but often have a cost and can take a while to index.
JavaScript-only options such as Lunr require you to pass all content in a specific format. Every page then has a full index of your site, so payloads can become large as your site grows.
Pagefind analyses your built site and creates WASM binary indexes. But it requires some HTML configuration, uses considerable JavaScript code, and causes Content Security Policy issues.
StaticSearch is a simpler option. It:
- can use npx so there's no installation
- quickly indexes built pages and adds them to your static site (like Pagefind)
- requires no special HTML markers
- respects robots.txt and meta tag settings
- generates pure JavaScript and JSON files
- is easy to add to your site using a native web component
- includes options for custom search facilities
- is vanilla JS compatible with all frameworks
- has a tiny payload (13Kb of JS and 4Kb of CSS at most)
- incrementally loads index data on demand and caches in the browser
- determines when new word indexes are available.
npm: https://www.npmjs.com/package/staticsearch
Github: https://github.com/craigbuckler/staticsearch
Full documentation: https://publican.dev/staticsearch/
All feedback is appreciated!