Search is the feature people assume a static site can’t have. A search box needs something to answer it, and a static site is, by definition, a pile of files with nothing behind them to do the answering.
The way round is to move the answering. Either someone else’s server does it, or the reader’s own browser does. For a personal blog the second is now so good that the question is mostly settled. It is worth understanding all three options, though, because they cost different things.
Option 1: Let a search engine do it
The oldest trick is a form that sends the reader to a search engine with your site’s address added to the query. It takes five lines of HTML and no script.
<form action="https://duckduckgo.com/" method="get">
<input type="hidden" name="sites" value="example.com">
<input type="search" name="q">
</form>
It works. It also takes your reader off your site, shows them results in someone else’s design, and only finds pages the search engine has got round to indexing. A post you published this morning won’t be there.
Option 2: A hosted search service
Search companies will index your site and give you a search box that queries their servers. Results are fast and can be clever: typo-tolerant, ranked, filtered.
The costs are an account, usually a script from the service on your pages, and the fact that every search your readers type is sent to a third party. For a documentation site with thousands of pages it is a reasonable trade. For a blog it is a lot of machinery.
Option 3: An index in the reader’s browser
This is the one that changed things. When your site is built, a search index is built with it: a file listing your pages and the words in them. A small script on your search page downloads the index and looks through it in the reader’s browser.
No server is involved, so there is nothing to host, nothing to pay for and nothing to break. The search happens on the reader’s device, so what they type goes nowhere.
Two open-source projects are the usual choices if you are building this yourself.
| What it is | |
|---|---|
| Pagefind | A tool you run after your site generator. It reads the finished HTML, writes an index into the site, and the browser fetches only the pieces of the index it needs for each search. That keeps it quick even on large sites. |
| Lunr | A small search library for the browser. You build the index yourself and hand it over. It is simple and well understood, though it hasn’t had a new release since 2020. |
Both are MIT-licensed, and both mean adding a step to how your site is built.
What “in the browser” costs
It isn’t free of trade-offs.
It needs JavaScript. A reader with scripts switched off gets no search. A well-made search page still works as a plain form for them, or at least says so.
The index has to be downloaded. For a few hundred posts, an index of titles and text is small, comparable to one photo. For tens of thousands of pages it needs to be split up, which is what Pagefind does.
It is a script on your site. If you have been careful to publish pages that run no scripts at all, search is the feature that asks you to make an exception. It is worth being deliberate about: put the script on the search page only, make sure it loads nothing from anywhere else, and check that it only reads your own index.
What makes it good
Whichever tool you use, the same few things separate a search that helps from one that frustrates.
- Search as they type. With the index already in the browser, there is no reason to wait for Enter.
- Ignore accents and capitals. Someone typing “cafe” wants to find “Café”.
- Search titles and text, and show which matched. A title match should rank above a passing mention.
- Leave out what isn’t public. Drafts and unlisted pages must never be in the index, because the index is a file anyone can download.
- Keep the search page out of search engines. A page of search results is not something anyone wants to land on from Google.
That fourth point deserves a second look. The index is public. Everything in it is, in effect, published. Build it only from what you have already chosen to publish.
Where Selfish fits
Selfish is a native app for iPhone, iPad and Mac that builds a static site and publishes it to hosting you control. Sites it builds run no scripts, so search is something you choose, not something you get.
Add search to your site’s menu and Selfish builds a search page, the index and one small script.
- It finds posts and pages as readers type, accents and capitals aside.
- The script runs on the search page alone, reads only your own site’s index, and loads nothing from anywhere else.
- Drafts and unlisted posts are never in the index.
- The search page asks search engines not to list it.
- It is the only script Selfish ever adds to a site. The app says so before you add it, and its privacy report names it on every publish. Remove search from the menu and every page is script-free again.
There is no build step to maintain, because the index is rebuilt with the site each time you publish. Selfish is on the App Store as a one-time purchase, at a £3.99 introductory price, rising to £9.99 in December. Pages, menu and home page shows where the setting is.