Creo que ya he comentado alguna vez como tengo montado el blog, ya que lo único por lo que pago es por el nombre de dominio. Este es un poco el stack que utilizo.

Para explicar tanto lío a quien no sepa como va esto os cuento. Todo está lleno de limitaciones. Para empezar en Gitlab solo se pueden guardar estáticos, que luego se sirven. no tengo acceso a nada del servidor así que no puedo usar una BBDD Mysql ni nada por el estilo, ni nada que se genere dinámicamente, como pueda ser un Wordpress o cualquier otra cosa. Esto me lleva a Hugo.

Hugo es un generador de páginas estáticas. Yo escribo los posts en formato org en Emacs, hago un commit y un push a Gitlab y ahí con la magia de los pipelines Hugo genera todas las páginas y las publica.

Así que sin una base de datos no tengo ningún tipo de buscador. Hay alternativas para hugo que a través de javascript generan un buscador sobre datos almacenados en el navegador o en ficheros estáticos que hacen de índice, pero no me apetecía complicarme, así que he hecho como hacíamos hace muchos años ya, usar un motor de búsqueda externo. En mi caso duckduckgo.

DDG te da la opción de generar un cuadro de búsqueda para que lo añadas a tu web y él busca en su índice todo lo que tenga de tu web. Es una cosa bastante cómoda, lo único que los posts tardan en ser "buscables", pero para un blog personal no lo veo un problema.

Creando la caja de búsqueda

Para empezar entramos en https://duckduckgo.com/search_box donde iremos configurando como queremos que se vea esta caja, no es que tenga muchas opciones, pero si queremos dedicarle tiempo podremos modificar el estilo a través de CSS.

Podemos añadir mas parámetros de búsqueda. Aquí tenemos una lista de todos los que acepta.

El código generado sería el siguiente

<iframe src="https://duckduckgo.com/search.html?width=300&site=moidev.com&prefill=Buscar" style="overflow:hidden;margin:0;padding:0;width:358px;height:40px;" frameborder="0"></iframe>

Y mi buscador se verá así:

<iframe src="https://duckduckgo.com/search.html?width=300&site=moidev.com&prefill=Buscar" style="overflow:hidden;margin:0;padding:0;width:358px;height:40px;" frameborder="0"></iframe>

Sobreescribiendo el tema

Una vez tenemos el código tendremos que ponerlo en la parte del blog donde queramos que se muestre, no voy a entrar muy en detalle ya que depende del tema que estemos usando en Hugo.

Lo primero que debemos haces es buscar la plantilla que queremos modificar dentro del tema, una vez localizada deberemos copiarla, directorios incluidos y con el mismo nombre dentro de layouts de nuestro blog.

Ahora añadiremos el código de DDG en la plantilla copiada y deberíamos poder verlo en el resultado, faltaría buscar donde colocarlo y modificar un poco los estilos.

Es muy feo. Lo se

Por ahora voy a dejarlo así de feo porque quiero buscar un tema que muestre bien las etiquétas y las categorías, así que por ahora me vale tal y como viene, como herramienta de búsqueda.