Agregando búsquedas a un Static Site generado con Hugo con Algolia y LunrJS

Agregando búsquedas a un Static Site generado con Hugo con Algolia y LunrJS

Hugo es un perfecto generador de páginas estáticas, éste Blog por ejemplo, está realizado en Hugo. Éste post no explicará como realizar contenidos estáticos sinó, viene a explicar como indexar sus contenidos a una nueva generación de indexadores como Algolia.

Algolia Logo

Algolia es una potente API, entendida como motor de búsqueda, que proporciona recursos y herramientas para crear búsquedas rápidas y relevantes mediante “index”. A partir de un dashboard de control, simple y de muy fácil uso, podremos llevar a cabo nuestros objetivos.

En la siguiente imagen podemos ver el Dashboard de control de Algolia:

Algolia Dashboard

Y en la siguiente, el entorno de control del “index” creado para el buscador de nuestro site:

Algolia Dashboard Index

Los pasos para poder tener nuestro buscador mediante Algolia será simple, veamos los pasos:

  1. Instalar “LunrJS”.
  2. Crear nuestro fichero “index.json”
  3. Configuration setting (config.toml)
  4. Configuración del fichero “index.json”
  5. Generación del fichero “index.json”
  6. Cargar el contenido, manualmente, a Algolia

Vamos a ello…

Install Lunr with npm:

Mediante el gestor de paquetes npm instalaremos LunrJS:

npm install -g lunr

Configuration setting “config.toml”

Modificaremos nuestro fichero config.toml añadiendo la siguiente configuración:

[outputs]
home = [ "HTML", "RSS", "JSON"]

Configuración del fichero “index.json”

En /themes/layouts crearemos un nuevo fichero llamado index.json donde añadiremos el siguiente contenido:

[{{ range $index, $page := .Site.Pages }}
{{- if ne $page.Type "json" -}}
{{- if and $index (gt $index 0) -}},{{- end }}
{
    "uri": "{{ $page.Permalink }}",
    "title": "{{ htmlEscape $page.Title}}",
    "tags": [{{ range $tindex, $tag := $page.Params.tags }}{{ if $tindex }}, {{ end }}"{{ $tag| htmlEscape }}"{{ end }}],
    "description": "{{ htmlEscape .Description}}",
    "content": {{$page.Plain | jsonify}}
}
{{- end -}}
{{- end -}}]

Generación del fichero “index.json”

Una vez realizada la configuración más básica, deberemos entonces realizar una ejecución de la “compilación” del website para generar de forma automática el fichero “index.json” a partir de la configuración realizada anteriormente. Para ello, ejecutaremos el command hugo -t theme_name --verbose. Veremos entonces que el path “/public” donde se genera el website estático, tendremos un nuevo fichero llamado “index.json” con el contenido generado.

Cargar el contenido, manualmente, a Algolia

Una vez tengamos el fichero “index.json” generado con el contenido, podremos cargarlo en Algolia de forma manual, para luego, poder generar nuestro buscador que apuntará al “index” generado a partir de éste contenido cargado. Mediante el Dashboard de control, podremos subir un nuevo fichero “index.json” y, unos minutos después, tendremos el contenido del mismo totalmente indexado.

Algolia Dashboard

En un siguiente post, explicaremos como crear el buscador que conectará a la API de Algolia para devolver los resultados buscados.

Autor: Joakim Vivas

comments powered by Disqus