Si no has instalado Hugo en Windows, puedes verlo aquí).

Voy a explicarte con el tema Ananke, que es el que usa la web oficial de Hugo. Sin embargo, es lo mismo con cualquiera de la gran cantidad de temas disponibles (puedes verlos aquí).

Ten en mente la dirección de la carpeta en donde quieres hacer tus webs y escribe en PowerShell o en el CMD esa dirección (porque cuando abres PowerShell la dirección es tu usuario) y crea un nuevo sitio web con el nombre que quieras. En mi caso, crearé una carpeta llamada MisWebs y el nombre de mi web en Hugo será Mi1Web. Por lo tanto, ejecuto dos líneas de código:

cd "D:\Datos Usuario\Docuemtnos\MisWebs"

hugo new site Mi1Web

En la carpeta MisWebs se crea la carpeta Mi1Web que, a su vez, contiene varias carpetas más (casi todas, por ahora, vacías) y un archivo config.toml, que es el archivo principal de tu página web en Hugo. Ya tienes un proyecto en Hugo, pero sin tema.

En la web oficial de Hugo, en temas (Themes) busca Ananke (en el futuro pasarás mucho tiempo buscando el tema que mejor se ajuste a tus proyectos) o puedes verla aquí. En la página de cada tema, generalmente, tienes opciones para descargar, para entender cómo instalarla y para ver una demostración (el demo). Mira el demo, si quieres, porque en un minuto tendrás en tu computador local una web idéntica.

En el tema Ananke le das descargar y te dirigirá al repositorio de Anake en GitHub (que es una web en donde la gente guarda y comparte código: no puedo no decir que creo que es increíble vivir en una época en la que existe esta cultura de colaborar y compartir), ahí das clic en el botoncito verde “Code” y luego en descargar el ZIP. Se descarga un archivo comprimido que debes descomprimir (con WinZip o 7-Zip o cualquier programa confiable que encuentres en la cultura de compartir en internet). Es una carpeta que contiene varias carpetas. Arrástrala dentro de la carpeta “themes” que está en el proyecto que acabas de crear, que en mi caso es Mi1Web.

Sitio de Ejemplo

Ya tienes una web en Hugo con el tema Anake, pero sin contenido. En este paso puedes empezar a crear tu propio contenido o puedes copiar la página de ejemplo para que quedes con una igual a la del demo (que solo debes personalizar a tu gusto). La opción más fácil para mí es la segunda. Por lo tanto, nota que dentro del tema hay una carpeta que se llama ExampleSite. Copia todo lo que esté ahí, incluyendo el archivo config.toml, y pégalo fuera del tema, es decir, en Mi1Web. Debido a que en esa carpeta hay archivos con el mismo nombre (pero diferentes, porque están un poco vacíos), dile a Windows que quieres reemplazar los archivos existentes.

Dos aclaraciones:

  1. Asegúrate de que el nombre del tema es el mismo que aparece en una de las primeras líneas del archivo config.toml. En mi caso, abrí el archivo config.toml con el blog de notas y en la cuarta línea decía:
 theme = "gohugo-theme-ananke"

En cambio, la carpeta principal del tema se me descargó con el nombre ‘gohugo-theme-ananke-master’. Lo importante es que se llamen igual y lo más fácil es simplemente quitarle el ‘-master’ al nombre de la carpeta del tema y así ambos quedan con el nombre ‘gohugo-theme-ananke’.

  1. Debes eliminar la quinta línea del archivo config.toml porque hace que Hugo no encuentre el tema en la carpeta de temas. En realidad, no entiendo bien por qué (y sé que no pasa en otros temas: debí escoger otro para el tutorial).

La línea debe quedar vacía o con un numeral al principio, así:

#themesDir = "../.." 

Puedes eliminarla o escribir la dirección que te piden o escribir un símbolo de numeral (o almohadilla) al principio de la línea. Así aprovechas para aprender (y supongamos que yo aprovecho para enseñarlo) que los archivos con extensión .toml, al igual que muchos lenguajes de programación, no leen las líneas que empiezan con numeral y que las líneas que no se leen sirven para guarda código o hacer comentarios. Y ya que estamos hablando de numerales, debo decirte que los archivos .md, que por suerte veremos mucho en Hugo, usan una almohadilla para indicar que una línea es un título y dos almohadillas para un subtítulo. Esto evita escribir HTML y hace que todo sea más fácil.

Lanza el servidor

Regresa al PowerShell (o CMD), dirígete a tu proyecto (recuerda que quedamos en MisWebs, pero debemos subir a Mi1Web) y lanza tu proyecto:

cd “Mi1Web”

hugo server

En el recuadro anterior, la primera línea puede ser así de corta porque ya estábamos en MisWebs, pero puedes escribir la dirección completa (en caso de que hayas cerrado PowerShell).

La segunda línea lanza tu proyecto. Puedes verlo en el navegador (Chrome o Firefox o el que uses) en tu dirección local y el puerto 1313: http://localhost:1313.

Y listo, modifica esa web con tu contenido y tus fotos (cuidado con plagiar sus fotos o contenido porque ya bastante tenemos con que nos regalen su tema y sitio de ejemplo). El sitio de ejemplo te puede servir para aprender cómo se hace. Si solo quieres tener tu web lista, no es necesario que sepas cómo funciona, esa es la magia de Hugo. Ni siquiera tienes que saber HTML o CSS. Vas aprendiendo mientras vas creando.

Puedes ver cómo alojar gratis tu web en internet aquí.

Sobre Visual Studio Code

Modificar los archivos en el bloc de notas y abrir y cerrar carpetas no es tan chévere. Es mejor hacerlo en Visual Studio Code o cualquier editor de textos. Todo lo anterior lo puedes hacer desde Visual Studio Code. Abres Visual Studio Code y, como en Word o Excel, buscas la carpeta MisWebs o vas a la carpeta y la arrastras a la ventana de Visual Studio Code. De esta forma quedas a la izquierda con un árbol de tus archivos y carpetas: todo lo que modifiques ahí, se modifica en su ubicación real. Además, puedes ir a Terminal y dar clic en Nueva terminal. Quedas como con un PowerShell en la parte inferior.

Sobre Github

En lugar de descargar el archivo comprimido, puedes instalar Git en tu computador, crearte una cuenta de GitHub (que, al igual que Visual Studio Code, es una web de Microsoft) y clonar el repositorio. Además, GitHub es una excelente opción a la hora de desplegar y modificar tu web en internet. Sin embargo, en este tutorial tienes la opción de no usar GitHub. En mi opinión, no porque haya algún problema con GitHub, sino porque vamos poco a poco.

Puedes ver cómo alojar gratis tu web en internet, y sin GitHub, aquí). Gracias por leer.