Posted Saturday, August 26, 2023

Adding search to a static site

I wrote a completely client-side search function to a static site.

I built a local news aggregator, ’Pegcity News, using the static site builder, 11ty. 11ty builds thousands of paginated pages of news articles that it grabs from various rss feeds so something like Lunr will not scale. Lunr loads an index that you have to build everytime you change your site. This index grows as you keep adding pages so this would add to page size and client-side memory.

So I built a search that doesn't need an index that need is time consuming to build and takes up a lot of memory. Instead I leveraged the fact that since the site is paginated, the pages themselves can be used as a crude database. The search code will gather all the page urls which are listed in a hidden list of site links. The code then iterates through each url and uses the fetch api to read the page into memory and searches for the user inputed search string. Is it fast? No, especially since there are thousands of pages but the script appends links to the search page as the loop runs so it's not total garbage.

Not the perfect solution but it works and is free. If you need something fast, Algolia is your best bet.