Uno de los frameworks, para desarrollar y generar sitios web estáticos, más conocidos del mercado, es Hugo. Entre otras características, Hugo se posiciona como una herramienta rápida y flexible que quiere hacer del “desarrollo web, una actividad divertida”.
En este artículo repasaremos algunas características de Hugo, y veremos cómo puedes instalar un tema en Hugo y empezar a aplicar estilos a tu nuevo sitio web.
Antes de seguir, te recomiendo leer:
¿Qué es Hugo?
Hugo es un generador rápido de sitios web estáticos, escrito en Go. Hugo es un framework de propósito general que crea páginas cuando creas o actualizas su contenido.
Esto permite que tus usuarios tengan una experiencia de visualización óptima de tu sitio web. Además mejora la experiencia de escritura para los autores de tu sitio web.
Tal cómo otros generadores, de sitios web estáticos, parecidos Hugo es rápido y seguro y te permite alojar tu sitio web en cualquier proveedor moderno o más clásico. Netlify, Heroku, DreamHost, Amazon S3 o Github Pages serían algunos de los ejemplos.
Características principales de Hugo
- Tiempos de complicación rápidos
- Multiplataforma (macOS, Linux, Windows)
- Cambios sobre la marcha con LiveReload
- Sistema de maquetación potente
- URLs personalizables
- Soporte para taxonomías (con categorías y etiquetas)
- Tablas de contenido automáticas
- Creación de menú dinámico
- Compatibilidad con Native Markdown y Emacs Org-Mode
- Compatibilidad con metadatos TOML, YAML y JSON
- Página de inicio personalizable
- Varios tipos de contenido
- Soporte integrado de comentarios de Disqus
¿Cómo instalar un tema?
¡Esta es la razón por la cual has empezado a leer este artículo! Por tanto, miremos juntos cómo puedes instalar una plantilla en Hugo y empezar a personalizarla.
En este caso vamos a utilizar macOS. Si quieres saber cómo hacerlo en otros sistemas operativos, puedes verlo en el sitio web oficial de Hugo.
Vale la pena saber que en mi máquina ya tengo instalado:
Una vez lo tengas también, puedes seguir los siguientes pasos:
Instalar Hugo
brew install hugo
Si la instalación ha ido bien, puedes verificarlo:
hugo version
Deberías ver algo como:
Crear un sitio web nuevo
hugo new site huguinho
Con el comando anterior tendrás un nuevo sitio web de Hugo en el directorio huguinho de tu directorio de proyectos.
Añadir el tema
Hugo posee diferentes temas que puedes elegir e instalar. En este artículo utilizaremos el tema Ananke, que es el que mejor me ha funcionado hasta la fecha.
Lo primero que tienes que hacer es bajar el tema desde GitHub y añadirlo a tu directorio themes:
cd huguinho
git init
git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke
Si no utilizas git, no sabes lo que te estás perdiendo, pero puedes bajar la última versión de este tema y añadirlo en el directorio “themes”.
Después, tendrás que añadir el tema a la configuración del sitio web. Como hemos visto antes, Hugo utiliza TOML, YAML y JSON en sus ficheros de configuración. En este caso utilizaremos toml: un tipo de fichero que no utilizo normalmente en mi dia a dia. ;)
echo theme = \"ananke\" >> config.toml
En principio, no verás ninguna notificación después de ejecutar este comando. Esto es una buena señal.
A partir de este momento ya hemos alcanzado el objetivo de este artículo: aprender a instalar nuevos temas y plantillas a Hugo. Pero puedes hacer mucho más, y esto es lo que haremos a continuación.
Añadir contenido?
Para añadir contenido, Hugo te permite crear manualmente archivos de contenido y proporcionar metadatos en ellos. Hugo también está preparado para que uses el comando new para hacer algunas cosas por ti. Puedes agregar título y fecha, por ejemplo:
hugo new posts/mi-primer-post.md
Edita el contenido del fichero que acabas de crear con tu editor preferido.
---
title: "Mi Primer Post"
date: 2021-12-02T10:00:00+01:00
draft: true
---
Ahora ya puedes iniciar un servidor de Hugo, y ver el contenido y las páginas de tu nuevo sitio web. La documentación oficial de Hugo recomienda que lo hagas con los drafts (-D) habilitados:
hugo server -D
Personalizar la plantilla
Si quieres modificar y personalizar tu nuevo sitio web, puedes empezar por cambiar el fichero config.toml en tu editor preferido, cambiando los parámetros necesarios:
baseURL = "https://www.itdo.com/"
languageCode = "es-es"
title = "ITDO Solutions"
theme = "ananke"
baseURL no es necesario en entornos de desarrollo local.
Crear páginas estáticas
Una vez hayas aplicado los estilos deseados, puedes crear páginas estáticas de forma fácil, llamando a:
hugo -D
El resultado estará en el directorio ./public por defecto. Si quieres, puedes definir otro destino para tus ficheros estáticos.
Conclusión
Cómo has podido ver, instalar una plantilla, y configurarla, en Hugo es relativamente fácil y rápido. Te animo a consultar siempre la documentación Hugo y de la plantilla que elijas si quieres usarlo en un proyecto real.
Si tienes alguna pregunta, ¡no dudes en contactarnos!
¿Utilizas Hugo en tus proyectos?¿Què tal la experiència?¡Coméntalo abajo!
Foto: @elleaon @freepik
Fuentes: