Creando mi primera página con HUGO

Tenía la necesidad de crear una página de presentación sencilla y estaba cansado de WordPress por muchos motivos. Después de analizar las opciones que tenía, y viniendo de hacer un curso de GO en en que mencionaban HUGO, decidí apostar por esta herramienta para crear páginas estáticas que parece ser tan rápida.

Antes que nada aclarar que el ordenador de desarrollo que utilizo es un Ubuntu. Para la instalació fui a la página de github de HUGO. En la descripción de la última release (en estos momentos es la 0.16) viene el enlace de descarga del .deb, aunque tb lo puedes instalar ejecutando el siguiente comando

sudo apt-get install hugo

Ya tienes todo lo que necesitas para crear tu primera página con HUGO. El comando que tendrás que ejecutar para la creación del proyecto es:

hugo new site <path-del-proyecto-a-crear>

Una vez dentro verás la estructura de carpetas que HUGO a creado para ti. El archivo más importante de momento es el config.toml. Como su nombre indica es el archivo de configuración. Para mi propósito de crear un “coming soon” sencillo es el único que he tenido que modificar. Pero antes que nada, una cosa básica: el theme. En este enlace tenéis algunos themes de HUGO disponibles. Yo he escogido el Hugo indentity theme.

Para instalar el theme crearemos una carpeta llamada themes en la raíz del proyecto si es que no existe ya, y dentro de ella clonaremos (git clone) el repo del theme. En el repositorio de Github del theme encontramos también un ejemplo de como debe ser el config.toml, así que lo copio el contenido del ejemplo y lo pego en el de mi proyecto. Para ver si funciona vamos a levantar un servidor (con live reload incluído) ejecutando el comando

hugo server -w

Para visualizar el resultado cargamos en nuestro navegador la urlhttp://localhost:1313. Pero ¿cómo ha funcionado? HUGO básicamente tiene un sistema de etiquetas dentro del código html del theme, esas etiquetas son los valores que tendremos que rellenar en el archivo de configuración.

{{ .Site.Params.name }}

Una vez que ya lo tengamos todo listo, llegamos al momento de hacer un deploy a nuestro servidor. La promesa es que lo podemos usar en cualquier tipo de servidor, y es cierto, ya que lo que genera son .html estáticos. Pero, ¿dónde los ha generado? De momento en ningún lugar. Para generar los archivo estáticos hay que ejecutar el comando hugo, generando así una carpeta llamada public en la raíz del proyecto. Puedes llevar esa carpeta a tu server de la manera en la que te sientas más códomo. Yo lo he hecho usando git, pero también se podría hacer por FTP.

Leave a Comment