Instalando Hugo Framework

Para probar nuevas cosas instalé el Framework de Hugo, al igual que jekyll (lo que utilizo en esta página) Hugo es un generador de sitios webs estaticos.

Hugo cuenta con uan increíble velocidad, flexibilidad y es de código abierto.

Instalación

Chocolatey (Windows)

Utilizando el administrador de paquetes Chocolatey en Windows podemos instalar Hugo con una simple línea:

choco install hugo -confirm

Si instalamos node.js nos instalará chocolatey automaticamente

Para más métodos de instalación visitar la página oficial

Creando un Nuevo Sitio

Nos dirigimos al directorio donde queremos crear nuestro proyecto y en la terminal ingresamos

hugo new site {nombre-del-sitio}

Para este ejemplo estaré creando una segunda página para mi documentación bajo el nombre de documentacion:

Esto creará nuestro directorio documentacion al cual ingresaremos con

cd documentacion

Añadiendo Temas

Descargamos el tema de GitHub y lo añadimos al directorio de themes:

# Para inicializar el directorio
git init 

# Para descargar la carpeta independiente
git clone https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke

# Para descargar la carpeta como un submodulo
git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke

Luego añadimos el tema a nuestro archivo config.toml

echo "theme = 'ananke'" >> .\config.toml

En este ejemplo estoy utilizando la plantilla ananke, cada plantilla cuenta con su propio directorio con archivo de configuración de ejemplo en themes\{tema}\exampleSite\config.toml

Añadiendo Contenido

Podemos añadir contenido manualmente creando un archivo en la carpeta content/<CATEGORY>/<FILE>/<FORMAT> y añadir el metadata individualmente, o podemos utilizar el comando new que nos genera el metadata automaticamente:

hugo new posts/mi-primer-post.md

Editando Contenido

Para editar nuestro contenido podemos utilizar el editor de nuestra preferencia, en esta ocasión estaré utilizando Visual Code ejecutando code . desde el directorio.

Los borradores no serán publicados, actualiza la cabecera a draft: false Más info aquí

Iniciando el Servidor

Ejecutaremos el comando permitiendo la visualización de los borradores:

hugo server -D -p {numero-de-puerto}

Ingresamos a nuestro sitio en http://localhost:{numero-de-puerto}/

Ahora podremos añadir, editar y eliminar nuestros contenidos, un simple refresco de la página debería actualizar los cambios.

En caso de no actualizarse detendremos el servidor con Ctrl+C y lo volveremos a ejecutar.

Personalizando el Tema

Configuración del sitio

Abrimos el archivo config.toml con un editor de texto:

baseURL = 'http://example.org/'
languageCode = 'en-us'
title = 'My New Hugo Site'
theme = 'ananke'

• Reemplazamos el campo en title por nuestro título para la página.
• Si vamos a subir la página a un dominio modificamos el campo en baseURL a la URL de nuestro dominio y para evitar problemas con el protocolo utilizamos //midominio.com/
• En este caso cambimo el campo de languageCode = 'en-us' a languageCode = 'es-es' para tenerlo en español.

Debemos recordar que cada tema tiene su propio config.toml de ejemplo para la configuración

Generando la Página Estática

Es solo correr este comando:

hugo -D

La salida será en el directorio ./public/ por defecto