¿Cómo añadir un tema y configurarlo?
En primer lugar, se debe instalar Hugo. A continuación se muestra las opciones de instalación para Windows.
Chocolatey:
Si cuenta con el gestor de paquetes Chocolatey, puede instalar Hugo con la siguiente línea de comando:
choco install hugo -confirm
O si usará archivos Sass/SCSS requiere la versión extendida:
choco install hugo-extended -confirm
Scoop
Si cuenta con el gestor de paquetes Scoop, puede instalar Hugo con la siguiente línea de comando:
scoop install hugo
O si usará archivos Sass/SCSS requiere la versión extendida:
scoop install hugo-extended
Si no tiene Windows, puede revisar la página oficial de Hugo para las respectivas instalaciones: Instalar Hugo
Ahora si, volviendo a los temas:
Estos permiten crear un sitio web con un aspecto atractivo y de manera más sencilla. El sitio web de Hugo cuenta con una sección completamente dedicada a temas, con muchas alternativas interesantes y adaptables a todo tipo de proyecto. Ingresar temas Hugo!!!
El presente repositorio cuenta con un tema, el cuál es una plantilla base que puede usar en su archivo raiz. Esta plantilla se encuentra dentro de la carpeta llamada vertical_nav cuya ruta es themes/vertical_nav
Para agregar un tema hay dos métodos:
-
Descargar el tema en un zip
Ya elegido el tema, se descarga en un achivo zip, luego se descomprime y coloca la carpeta con todo el contenido del tema en una subcarpeta del proyecto raíz llamada “themes/”.
-
Línea de comandos
Con Git se puede agregar el tema más rápido y consiguiendo un flujo de trabajo más mantenible de cara a las actualizaciones del tema.
-
Método submodule
Estando en la carpeta raíz del proyecto, se ejecuta lo siguiente:
git submodule add <ssh/https url github> themes/<nombre nuevo tema>Este método no se recomienda ya que copia la subcarpeta al repositorio vacía, copiando solo el archivo localmente.
-
Método clone
Estando en la carpeta raíz del proyecto, se ejecuta lo siguiente:
git clone --depth 1 <ssh/https url github> themes/<nombre nuevo tema>Luego borrar el directorio .git
rm -Recurse -Force themes/<nombre nuevo tema>/.git
-
Ya agregado el tema, en el proyecto raiz se debe hacer una configuración para especificar el uso del tema. Esto se realiza dentro del archivo config.toml y se debe agregar las siguientes lineas de código:
---
baseURL = "<URL deseada>"
languageCode = "en-us" #idioma
title = "<Titulo>"
theme = "<Nombre asignado al tema clonado>"
---
Para crear un nuevo Post se debe ejecutar el siguiente comando en el directorio raíz:
hugo new content/<nombre>.md
Observará un nuevo archivo markdown con el nombre que se asignó donde se deben agregar las siguientes lineas en el encabezado, en el caso de no contenerlas:
---
title: "<Nombre deseado>"
date: 2021-04-22T00:22:40-05:00 #Actualizar fecha
draft: false
type: "<Tipo de plantilla a usar para visualizar el contenido del markdown>"
#Puede ser _default, without-menu para el tema vertical-nav
layout: "<Plantilla html específica a usar para visualizar el contenido del markdown>"
#Revisar themes/vertical-nav/layouts, el cual cuenta con diferentes opciones
---
Teniendo en cuenta que si el draft esta en “false” la página se va a actualizar automaticamente sin la necesidad de ejecutar códigos de hugo para construir la página.
Ya para ejecutar la página y poder visualizarla junto con el tema seleccionado, se ejecuta el siguiente comando:
hugo server -D
Para configuraciones adicionales consultar la página de Hugo