Moving from pagefind to Algolia

Astro’s main goal is to ship with “zero” JavaScript by default, which means there is no built-in search functionality out of the box. While Astro’s Starlight—the official documentation framework—ships with Pagefind integrated, standard Astro requires a more hands-on approach to search. Starlight includes many specialized features that aren’t part of the core Astro library.

From Pagefind to Algolia

I initially used Pagefind, which is a library for client-side (browser) search. This means the search index and the scripts are loaded directly in the visitor’s browser. A key thing to remember with Pagefind is that search doesn’t work in dev mode; the index is only generated during the final build process.

While Pagefind is meant to be simple, it can be tricky when paired with View Transitions (now ClientRouter). I had my share of “fun” getting the scripts to initialize correctly during page navigation, but I eventually got it working!

However, as someone who loves playing with new tech, I decided to give Algolia a try. Algolia is often considered the “gold standard” for search. The only historical drawback was the cost, but they have significantly increased their free tier recently, making it much more viable for personal projects. The initial setup was surprisingly quick, and with a little help from Gemini and Claude, the UI integration was seamless.

Modularizing the Codebase

I also used this update as an opportunity to clean up my dependencies. I moved my scripts out of the /public folder and into /src/scripts. By doing this, I can take full advantage of Astro’s build system.

Dynamic Open Graph (OG) Images with Satori

Another big change was how I handle Open Graph images. I am now creating dynamic images for each blog post. While some might say this is overkill for a personal blog, the learning process was worth it.

I used Satori to convert HTML/CSS into SVG. The real challenge was ensuring the resulting images weren’t squeezed or stretched across different social platforms. It took some fine-tuning of the layout logic to get the proportions just right.

Finally, I moved my mobile menu JavaScript into /src as well. It’s all part of the larger goal to keep the project structure clean and efficient.