¿Qué es Hugo?#
Si estás buscando algo para gestionar un blog, documentación o simplemente una web donde puedas publicar tus cosas y te has dado cuenta de que WordPress es lento, inseguro y estás harto de actualizar plugins cada dos días para evitar que te entren los rusos o los chinos.
La solución es Hugo. Es un generador de sitios estáticos hecho en Go. Compila tu web entera en milisegundos. Pero antes debes saber que las páginas que generas se harán en Markdown o, si tienes miedo a usar un mínimo la terminal de Linux, entonces deja esto y usa Wix.
Aparte de Hugo, te voy a mostrar cómo instalar el tema Blowfish, el tema que yo uso actualmente.
Requisitos#
Te voy a enseñar a instalar Hugo en Linux y hostearlo en GitHub Pages, por lo que necesitas:
- Una cuenta de GitHub.
- Cómo vamos a usar GitHub, pues en tu máquina evidentemente debes tener Git.
- Un editor de código.
- Puedes usar Gedit, Visual Studio, Sublime Text, o incluso nano o vim si te sirve. Usa lo que sepas. Yo te recomiendo Visual Studio.
Instalación#
Con Snap Store#
Para instalar Hugo hay varias formas; la primera y la más fácil si tienes Snap es pegar el siguiente comando en tu terminal:
sudo snap install hugo --channel=extendedNecesitamos la versión Extended para soporte Sass/SCSS.
La forma general para Linux#
Si no tienes Snap, o no te apetece usarlo, puedes descargar el paquete .deb desde el repositorio oficial de Hugo.
Ve a GitHub Releases. Busca el archivo .deb que pone hugo_extended_X.XX.X_linux-amd64.deb. Importante que tenga la palabra extended.
Si estás en un máquina con arquitectura ARM (Si pones arch en tu terminal te dice que arquitectura tiene tu máquina) tienes que buscar hugo_extended_X.XX.X_linux-arm64.deb
Una vez que tengas el .debdescárgalo manualmente o con wget <link de descarga>.
Para hacer la instalación, sitúate en el directorio donde tengas el .deb y ejecuta:
sudo dpkg -i hugo_extended_*.debAhora, para comprobar que todo ha salido bien, cierra tu terminal actual y abre una nueva y ejecuta:
hugo versionDeberías ver algo como:
umar@crappycomputer:~$ hugo version
hugo v0.155.3-8a85c04d295+extended linux/amd64 (...)Con esto ya tienes Hugo en tu máquina.
Tu primera web#
Ahora que tienes Hugo, vamos a crear nuestra web, blog, portfolio, da igual para lo que sea. Aquí el comando clave es el siguiente, donde mi-blog será el nombre de la carpeta que creará Hugo para crear tu sitio.
hugo new site mi-blogPuedes crearlo en la ubicación que te de la gana, pero te recomeindo tenerlo ordenado para que luego cuando lo quieras editar sepas donde está. Este será tu repositorio local donde harás tus cambios antes de subirlos.
Ahora que lo tienes, entra e inicializa tu repo:
cd mi-blog
git initCrear y conectar el repositorio de GitHub#
Antes de continuar, necesitas crear un repositorio en GitHub y conectarlo con tu repo local.
Ve a GitHub y crea un repositorio nuevo.
Si quieres que tu sitio esté en tu-usuario.github.io, el nombre del repo tiene que ser exactamente tu-usuario.github.io. Si le pones otro nombre como mi-blog, la URL será tu-usuario.github.io/mi-blog.
Cuando crees el repo, NO marques las opciones de “Add a README file”, “.gitignore” o “license”. Déjalo vacío porque ya tienes el contenido local. Además, si no tienes GitHub Pro, el repo debe ser público.
Una vez creado el repo, copia la URL que te da GitHub (algo como https://github.com/tu-usuario/nombre-repo.git) y ejecuta:
git remote add origin https://github.com/tu-usuario/nombre-repo.gitInstalar el tema Blowfish#
Ahora vamos a instalar el tema Blowfish; es un tema con muchas posibilidades, y creo que para un primer sitio está muy bien, pero si tienes otra cosa en cabeza y quieres usar otro tema, puedes buscar el que más te guste en el repositorio de temas de Hugo.
Podríamos bajar el zip y añadirlo manualmente, pero usa el siguiente comando para tener la última versión de Blowfish:
git submodule add -b main https://github.com/nunocoracao/blowfish.git themes/blowfishBlowfish tiene una configuración compleja por las diferentes posibilidades que ofrece. No te recomiendo que empieces de cero escribiendo ficheros .toml o romperás algo seguro.
Copia los archivos de ejemplo de themes/blowfish/config/_default/ a tu carpeta config/_default/. Puede que tengas que crear las carpetas tú.
Luego edita hugo.toml, cambia la baseURL:
baseURL = "https://docs.umarmohammad.xyz/"
languageCode = "en"
theme = "blowfish"
title = "Umar Mohammad Docs"En mi configuración he puesto la URL https://docs.umarmohammad.xyz/ pero puede que tú no tengas tu propio dominio; entonces, como vas a usar GitHub Pages, debes poner usuario-github.github.io, así para acceder a tu sitio alguien en el navegador pondrá usuario-github.github.io.
usuario-github es tu usuario de GitHub, como el mio es mr-umar.
Si tienes tu propio dominio, también te enseñaré en los próximos pasos cómo configurar el DNS. De momento, como recomendación, no modifiques los ajustes del tema ni de Hugo; se te puede liar 😵.
Pruebas locales#
Ahora, antes de continuar, vamos a probar si nuestro repositorio local funciona. En el directorio de la web, ejecuta:
hugo serverAbre http://localhost:1313 en tu navegador; si funciona, felicidades. Si no, lee el log de errores en el terminal. Probablemente en este punto sea un error de configuración tonto al tocar el archivo hugo.toml.
Desplegando con GitHub Pages#
Vale, ahora viene la parte bonita para que cualquiera pueda acceder a tu sitio. Primero, desde la terminal, ponte en el directorio de tu sitio si no lo estabas ya y ejecuta:
# Añade todo al staging
git add .
# Commit
git commit -m "Primer commit de mi sitio con Hugo"
# Push al repo
git branch -M main
git push -u origin main
git push origin mainSi es la primera vez que haces push, puede que te pida autenticarte. Si te pide usuario y contraseña, usa un Personal Access Token, con la contraseña de tu cuenta de GitHub NO va a funcionar.
Ahora vete al repositorio en la web de GitHub → Settings → Pages. A continuación verás la opción Build and deployment y justo abajo Source con un desplegable; a nosotros nos interesa seleccionar la opción GitHub Actions.
Ahora, debajo del desplegable donde has seleccionado GitHub Actions, deberá aparecer browse all workflows; si le das clic, debes buscar hugo y darle a Enter y seleccionar Hugo dándole a Configure.
A continuación verás una página muy similar a la siguiente; aquí lo único que debes modificar es bajar hasta la línea 34, donde indica HUGO_VERSION y poner la versión que te has instalado más arriba en tu máquina local.
Si no haces este paso, muy probablemente después tengas problemas con los temas y ajustes que uses. Una vez hecho esto, debes pulsar en Commit changes.
Si vas a usar tu propio dominio en el repo, en Settings → Pages, debes ir hasta donde indique Custom domain y poner tu dominio. Además debes ir a los ajustes DNS de tu dominio y crear un registro CNAME que apunte a tu-usuario.github.io. 
Después de hacer estos ajustes, el siguiente paso que debes hacer es traer los cambios de GitHub Actions a tu repo local con el siguiente comando:
git pullAhora, este paso es importante: si vas a usar un dominio propio, debes ejecutar lo siguiente con tu dominio.
echo "dominio.com" > static/CNAME
git add .
git commit -m "Registro CNAME"
git push origin mainCon este paso solo debes esperar 2-3 minutos para que GitHub Actions levante tu web en tu dominio personalizado o en tu-usuario.github.io. Ahora ya puedes acceder a tu web.
Ahora, para crear el contenido, te recomiendo abrir la carpeta del repo local con VSCode e instalar la extensión Front Matter CMS, que simplificará tu vida.
Y también visita la documentación de Hugo y Blowfish para saber más.
