Temas o layouts base

Utilización de layouts o platillas html para visualizar el contenido

✅ Objetivo:

Tema, plantilla o layout para el sitio web

Ahora que tenemos nuestro sitio web, lo primero que tenemos que hacer es asociar una plantilla o theme a nuestro sitio para poder visualizar su contenido. Para referirnos a la plantilla usaremos el término theme o layout

Esto va a dar un aspecto concreto y ya podríamos ver nuestro sitio web funcionando. Para ver las plantillas disponibles disponibles en el sitio web de hugo

Vamos a ir proponiendo una plantilla y la usaremos de ejemplo para el resto de las explicaciones

Para la práctica final, podrás usar esta misma plantilla o bien usar otra según te guste más. Usaremos la plantilla relean. Aquí puede ver la página de referencia

La página que estás viendo, está trabajada con la plantilla docsy

Instalar una plantilla

Hugo ofrece varias opciones para usar temas. Normalmente cada tema es compatible con ella:

Añadir el tema como un Módulo de Hugo

Es la forma más simple y moderna. Hugo descarga los archivos del tema desde el repositorio de Docsy en la versión que elijas, y es fácil mantener el tema actualizado. El sitio de ejemplo de Docsy usa esta opción.

Añadir el tema como un submódulo de Git

Permite usar los archivos del tema desde su propio repositorio, pero es más complicado de mantener que los módulos de Hugo. Se utilizaba en versiones antiguas del sitio de ejemplo de Docsy, pero sigue siendo compatible.

Clonar los archivos del tema

Si prefieres no depender de un repositorio externo, puedes clonar los archivos del tema directamente en tu proyecto. Esto es útil si deseas personalizar el tema o tu despliegue requiere que el tema esté dentro de tu repositorio.

Clonar los archivos

  • Es interesante para tener los ficheros originales por si queremos hacer cambios o adaptaciones, aunque no sea la forma de cargar la plantill (recomendado hacerlo con módulos)

Las plantillas deben de ubicarse en el directorio themes 

cd themes
git clone https://github.com/McShelby/hugo-theme-relearn.git relearn

También puedes descargar directamente la carpeta y descomprimirla

Ahora toca modificar el fichero de configuración config.toml , especificando la ubicación del thema, en este caso el directorio relearn

theme =['relearn']

Ahora ya podemos ver un despliegue del sitio web. Para ello invocamos al comando cli siguiente:

hugo server &

Nos abrirá un puerto en el navegador según nos muestre la salida en el terminal con el puerto abierto y veremos nuestro proyecto

Página inicial

Dependiendo del tema, habrá un contenido u otro.

En este tema en concreto, vemos que la página inicial sale sin ningún contenido, esperano que vayamos aportando nos muestra el contenido

Si quisiéramos cambiar el contenido de la página, en lugar de cambiar el fichero, lo que haríamos es copiar el fichero en la carpeta layout del directorio del proyecto. volveremos a esto más adelante.

Añadir módulo de hugo

Usamos el comando para crear go.mod, donde se especifica el módulo a añadir

hugo mod init localhost

Localhost sería el servidor dónde vamos a ubicar el despliegue de nuestro proyecto

Añadimos el módulo en nuestro fichero de configuración hugo.toml


[modulo]
  [[module.imports]]
          path = 'github.com/McShelby/hugo-theme-relearn'

Ahora ordemaos y descargamos el módulo haciéndolo disponible en nuestro proyecto

hugo mod tidy

Ya podemos levatar el servidor para verlo

hugo server

Anadir un submódulo

  • Especialmente útil si vamos a desarrollar y desplegar nuestro proyecto en Git.*

*Iniciamos nuestro proyecto en git

git init

Añadimos el submódulo del tema

git submodule add --depth 1 https://github.com/McShelby/hugo-theme-relearn.git themes/hugo-theme-relearn

Y ahora lo especificamos en el fichero de configuración hugo.toml.

theme = 'hugo-theme-relearn'

Práctica