¿Qué es Hugo? Hugo es un SSG (Static Site Generator) un generador de sitios estáticos super rápido y seguro. Está escrito en el lenguaje de programación Go (conocido también como Golang) y se está posicionando como un framework super rápido, divertido y moderno. Hugo puede presumir de ser la herramienta más rápida de su tipo y posee las velocidades promedio de creación de sitios web de menos de un segundo. Hugo usa archivos TOML y YAML para la configuración, por lo que si ya has trabajado antes con contenedores debes tener un mínimo de familiaridad con el lenguaje 🤗. A y antes que lo olvide Hugo también usa Markdown sobre todo para la creación de contenido de las páginas que se van a generar. Vamos entonces con el proceso de instalación de Hugo. Te sorprenderá lo simple que es. Una vez que tengas los conceptos básicos de Hugo, puedes intentar integrar un pipeline de CI/CD. ¿Cómo instalar Hugo? Instalar Hugo es muy fácil, solo varía un poco dependiendo del sistema operativo. Necesitamos instalar Hugo para diseñar, probar y generar un sitio web de Hugo. Según la documentación oficial hay muchas formas de instalarlo. A continuación te mostraré las opciones más sencillas y simples. Instalar Hugo en Mac Puedes instalar Hugo usando Homebrew. Abra su terminal macOS. Instale el administrador de paquetes Homebrew. Instalar Hugo brew install hugo Instalar Hugo en Windows Necesitará un administrador de paquetes, podría usar el administrador de paquetes Scoop. Abra Windows PowerShell, que ya debería ser parte de su sistema operativo Windows. Si aún no tiene instalado Scoop, le recomiendo seguir los pasos indicados en la página oficial de Scoop y volver una vez instalado. Ahora instalemos hugo scoop install hugo Instalar Hugo en Ubuntu Puedes encontrar Hugo en los repositorios estándar, por lo que instalarlo es super sencillo, tan simple como abrir una ventana de terminal y ejecutar el comando: sudo apt-get install hugo -y Ojito que también necesitarás tener GIT instalado en tu máquina, así que ejecutamos el siguiente el comando: sudo apt-get install git -y Por supuesto, podrías instalar ambos a la vez con el comando: sudo apt-get install hugo git -y Cómo crear una página web estática con Hugo Ahora comienza la diversión 🎈. Para crear un nuevo proyecto de Hugo, usarás el comando hugo new site. Hugo generará toda la estructura base y elementos que necesita tu sitio. Luego utilizarás GIT para inicializar la carpeta raíz y luego instalar un tema para el sitio. Luego ejecutas un servidor local para trabajar el sitio localmente. Ahora viene lo bonito, modificar el contenido del sitio al gusto de tus necesidades. Una vez que el sitio es exactamente como lo deseas, entonces construirás el sitio. Una vez que has construido el sitio, puedes enviarlo a su host 🎉. En este punto, probablemente se esté diciendo a sí mismo: “Pero puedo crear un sitio así con HTML y otros lenguajes compatibles con la web con la misma facilidad" 🙄. Por supuesto que puede. Considere a Hugo como un marco para construir sitios web. Con eso en mente, todo lo que tiene que hacer es agregar el contenido (no el código) y ya está en funcionamiento. Entonces, usar esta herramienta puede ser más eficiente. Ahora sí, vayamos al detalle con el proceso: Paso 1: Crear nuevo proyecto Primero usamos a Hugo para generar la estructura base para el nuevo sitio. Para eso vamos a ejecutar el siguiente comando: hugo new site nuevo-sitio Esto debería completarse en un abrir y cerrar de ojos ya que Hugo es increíblemente rápido como iremos viendo. Ahora tendrá un nuevo directorio el proyecto de tu nuevo sitio. Ahora ingrese a ese directorio con el comando: cd nuevo-sitio Si ejecuta el comando ls (o dir en windows), verá seis carpetas (archetypes, content, data, layouts, static, themes) y un archivo (config.toml). Paso 2: Instalar un tema A continuación vamos a usar Git para agregar un tema a nuestro nuevo sitio. Antes de hacer esto, nos dirigimos al repositorio de Hugo Themes y elegirás un tema de tu agrado. En este tutorial usaré el tema de Hugo Coder. Primero, necesitamos inicializar la carpeta raíz con el comando: git init A continuación, agregaremos el tema como un submódulo de Git con el comando: git submodule add https://github.com/luizdepra/hugo-coder.git themes/hugo-coder Cada tema de Hugo incluye un sitio web en funcionamiento y completo, por lo que para poder utilizarlo, debes copiar todo el contenido de la carpeta del tema Hugo Coder en el directorio raíz del nuevo sitio. Para hacer esto, cambia al directorio recién clonado, si estás en Ubuntu podríamos hacerlo a través de comandos: cd themes/hugo-coder A continuación, copia todo el contenido en el directorio raíz con el comando: cp -rf * ../../ Cambia de nuevo al directorio raíz con el comando: cd ../../ Si ejecutas el comando ls, ahora deberías poder ver todo el contenido del tema que se encuentra en el directorio raíz. Y finalmente, necesitamos copiar el archivo config.toml de Hugo Coder en el directorio raíz con el comando: cp exampleSite/config.toml . Paso 3: Arrancar el sitio localmente Ya vamos llegando al final, ahora vamos a iniciar nuestro sitio web en la máquina local. Para usar el servidor integrado de Hugo ejecuta el siguiente comando desde el directorio raíz: hugo server -D Abre un navegador web y dirígete a http://localhost:1313 y debería ver tu nuevo sitio presentado con el tema de Hugo Coder listo para configurar. También deberías ver, en la salida del comando, qué tan rápido se construyó el sitio. En mi caso, se creó en 257 ms. Eso es rápido. Actualmente, el sitio es una copia de trabajo, servida desde la memoria RAM de la máquina local. El servidor de Hugo se ejecuta en modo demonio y está observando el archivo config.toml en busca de cambios. Abra una segunda terminal y cambie al directorio raíz del sitio. Si estás en Windows puedes usar un editor de código como Visual Studio o en Ubuntu podrías abrir el archivo TOML del sitio con el comando: nano config.toml Cambie la baseURL al dominio o la dirección IP de su servidor y cambie cualquier otra parte que desee: Una vez que hayas modificado el archivo de configuración, guarda los cambios del archivo y notarás que Hugo detectará los cambios y actualizará el sitio para reflejarlos: Obviamente, algunos de los temas incluirán más contenido de muestra para usar como guía. Pero una vez que hayas descargado y explorado suficientes temas, puedes incluso comenzar a crear tus propios temas. Sin embargo, lo importante es que cuando hagas cambios en un tema (mientras Hugo se ejecuta en modo demonio local), los cambios se reflejarán en tiempo real. Cómo crear contenido nuevo Copia ahora el directorio exampleSite/content en el directorio raíz, si estás en Ubuntu usa el siguiente comando: cp -rf exampleSite/content/* ./content Generalmente creas contenido nuevo con un comando, o puedes crear el archivo Markdown en la carpeta /content directamente. Cada publicación o página tendrá su propio archivo Markdown asociado y el nombre se corresponderá con la url: hugo new content/posts/blog-post-1.md Ahora puedes editar el contenido de tu nuevo archivo, como este es un ejemplo puedes jugar a agregar el contenido que desees. Hugo convertirá automáticamente sus archivos .md en archivos html cuando se lo solicite el navegador. Este ejemplo utiliza Markdown, un lenguaje de texto sin formato simple, como formato para su contenido. Guarda los cambios y Hugo detectará automáticamente el cambio de la publicación. Una vez que tengas tu sitio web exactamente como lo deseas, puedes detener el servidor de desarrollo con la combinación de teclas [Ctrl] + c y ahora pasar a generar el sitio con el comando (ejecutar desde el directorio raíz): hugo Tu página web se construirá y se creará muy rápidamente una nueva carpeta /public dentro de la raíz del documento. Cargue esa carpeta en su servidor de alojamiento y listo. Conclusión Y esa es la pura esencia de crear una página web estática con Hugo. Una vez que domines esto, puedes comenzar a soñar con formas de integrarlo en su Pipeline CI/CD 😎. O simplemente puedes usarlo como una herramienta para generar muy rápidamente sitios web estáticos, basados en plantillas de tu propia creación. De cualquier manera, Hugo es una herramienta poderosa para tener en su kit de herramientas de desarrollador indudablemente.