Pagefind

Qué es

Pagefind es una librería de búsqueda totalmente estática para sitios generados estáticamente. Indexa el HTML ya construido de tu web y genera un paquete de búsqueda que funciona en el navegador, sin necesidad de servidor ni de servicios externos. El indexador está escrito en Rust y la búsqueda en el cliente se apoya en WebAssembly y JavaScript. Es un proyecto open source creado originalmente en CloudCannon y mantenido de forma activa.

Para qué sirve

• Añadir un buscador a blogs, documentación o sitios generados con cualquier generador estático (Astro, Hugo, Eleventy, Jekyll, etc.).
• Buscar en sitios grandes (miles de páginas) cargando solo los fragmentos del índice necesarios, en lugar de descargarlo entero.
• Ofrecer resultados a nivel de sección dentro de una misma página, no solo a nivel de página completa.
• Filtrar y segmentar resultados mediante metadatos personalizados (autor, categoría, fecha…).
• Indexar también PDFs, ficheros JSON u otro contenido a través de sus librerías para Node.js y Python.

Cuándo usarlo

Es la opción ideal cuando tienes un sitio estático y quieres búsqueda sin depender de infraestructura propia ni de servicios de pago como Algolia. Encaja especialmente bien en proyectos de documentación y blogs desplegados en hosting estático (Netlify, Vercel, GitHub Pages). Si tu sitio es dinámico, necesitas búsquedas en tiempo real sobre datos cambiantes o resultados con relevancia muy afinada y analíticas, un servicio dedicado como Algolia o Meilisearch puede ajustarse mejor.

Ejemplo

Tras construir tu sitio, indexa la carpeta de salida (por ejemplo dist o public):

# Indexa el sitio y lo sirve para probarlo en local
npx -y pagefind --site dist --serve

Pagefind crea entonces los assets dentro de /pagefind/. Para mostrar el buscador con la UI por defecto, añade en tu página:

<link href="/pagefind/pagefind-ui.css" rel="stylesheet" />
<script src="/pagefind/pagefind-ui.js"></script>

<div id="search"></div>
<script>
  window.addEventListener('DOMContentLoaded', () => {
    new PagefindUI({ element: '#search' });
  });
</script>

En producción, ejecuta npx pagefind --site dist después de cada build (sin --serve).

Puntos clave

• Totalmente estático: no hay backend que mantener ni costes de servicio.
• Diseñado para escalar: una web de 10.000 páginas puede ser buscable con menos de 300 kB de descarga total gracias al índice fragmentado.
• Soporte multilingüe automático, sin configuración adicional.
• Componentes web y UI preconstruidos listos para usar, además de una API de JavaScript para integraciones a medida.
• Compatible con cualquier generador estático, ya que solo necesita el HTML final.

Ten en cuenta

• Trabaja sobre el HTML ya construido, así que debes ejecutar la indexación como paso posterior al build en cada despliegue.
• Es búsqueda del lado del cliente: el índice se sirve como ficheros estáticos, sin relevancia ajustable en servidor ni analíticas integradas.
• Para datos que cambian constantemente o búsquedas verdaderamente en tiempo real, un motor con servidor (Algolia, Meilisearch, Typesense) es más apropiado.
• El indexador requiere Node.js para el flujo habitual con npx.