Alternativa a WordPress - HUGO static web site generator

Después de buscar y probar varias alternativas a wordpress, encontré este tipo de generadores que crean el sitio en local y lo subes como archivos estáticos, con lo que se puede conseguir grandes resultados en escalabilidad y performance, y una manera de explorar es hacer mi web.

Me decidí a usar Hubo, y en este post comparto mis conocimientos adquiridos sobre el tema.

Hugo es un framework que permite crear websites a base de contenido estático (HTML, JavaScript, CSS, …), es decir, no se sustenta en el uso de servidores de aplicaciones o bases de datos. Lo contrario de lo que ocurre con los sistemas de gestión de contenidos o CMS habituales los cuales suelen estar basados en contenido dinámico: WordPress, Drupal, Joomla! etc.

Es decir el generado se encuentra en nuestro ordenador y genera todas las paginas estáticas que es lo que se sube al servidor, con lo cual conseguimos sitio estático, de carga rápida y super seguros. Otra de las ventajas, en mi opinión es que el contenido se genera a partir de Mackdown.

Al generar sitios estáticos no necesitamos mucha infraestructura para subir nuestra web y correrla, es más, incluso nos bastaría con una github page.

Esta es su pagina oficial https://gohugo.io/

Aquí un tutorial que a mi me ha servido para iniciarme

https://blog.adrianistan.eu/tutorial-hugo-espanol-generador-sitios-estaticos

https://desarrolloweb.com/canales/hugo

Templates

https://themes.gohugo.io/

Como no puede ser de otra manera he encontrado este docker que carga todo el entorno dentro de un contenedor para no tener que instalar nada en nuestro equipo. para correr el entorno:

    docker run --rm -it -u 1000:1000 -p 1313:1313 -v $(pwd)/web:/src   klakegg/hugo:0.82.0-alpine   shell

Corremos en contenedor y introducimos los comandos de hugo dentro del contenedor.

Para crear nueva aplicación.

hugo new site_miapp

ir la dirección de themes de hugo o buscar un themes en github

Para explorar un tema con exampleSite, entrar a la carteta dentro de theme.

hugo server --themesDir ../..

Y vemos en el navegador como se ve la plantilla que hemos elegido

http://localhost:1313/

Crear y editar la web

Arrancar hugo dentro de docker

docker run --rm -it -u 1000:1000 -p 1313:1313 -v $(pwd)/web:/src   klakegg/hugo:0.82.0-alpine   shell

Para ver la web

 hugo server

Para compilar el código antes de publicar

 hugo --minify

Estructura de carpetas

La plantilla se encuentra en la carpeta themes

Para sobreescribir las paginas, crear las mismos carpetas y archivos de la plantilla y cambiar su código

ejemplo el partial de clientes:

data/clients/ .. están los archivos que contienen los datos nombre y enlace y url static/img/clients …. están la imágenes que se muestran

Crear secciones dinámicas tipo blog ejemplo mis sección textos-ingles-español

en layout creamos una sección de text_spa_eng, copiar los archivos de /theme/../layout/_default

• list.html # es el archivo que define las características de la lista
• simple.html # define la estructura de cada post

Shortcodes

para crear nuevas funcionalidades en los post o en los archivos marckdown creeremos elementos tipo shortcodes.

ejemplo insertar una archivo de audio creamos en la carpeta layouts/shortcode/ audio.html

<figure {{ with .Get "class" }}class="{{ . }}"{{ end }}>
  <audio controls preload="{{ .Get "preload" | default "metadata" }}">
    {{ with .Get "src" }}<source src="{{ . | relURL }}" type="audio/mpeg">{{ end }}
  </audio>
  {{ with .Get "caption" }}<figcaption>{{ . }}</figcaption>{{ end }}
</figure>

para inserta el elemento en el archivo marckdown

Compilar el código y subirlo a internet

cuando tenemos los cambios compilamos la pagina con la instrucción

hugo --minify

Nos crea todos los archivos en la carpeta public y ya los podemos subir al servidor.

Cuando estoy escribiendo esto se me ocurre que todo esto lo puede hacer una github action, pero esto lo dejos para un proximo post.