Cómo crear sitios web estáticos con Hugo y Go para subirlos a Github

Gracias por tomar parte de tu tiempo en leer este tutorial. Hoy he aprendido a crear sitios web estáticos con Hugo y Go para subirlos a GitHub y compartiré con Platzi lo que he aprendido.

Muy bien, en este punto asumo que sabes manejar lo básico de Git, tienes una cuenta en GitHub y que sabes lo básico de Linux y Go. Lo primero que debes tener en cuenta es que lo que vayamos a crear con Hugo en GitHub Pages quedarán como sub-carpetas.

Lo primero que haremos será crear una GitHub Pages, para ello crearemos un repositorio como cualquiera en GitHub, con la distinción que el nombre debe ser

El resto de las opciones puedes dejarlas como están. Pero es muy importante que tengas en el repositorio el README.md, si me haces caso te ahorrarás muchas horas revisando qué salió mal jejeje. Aunque igual puedes usar algunos de los temas que ofrece GitHub Pages.

Ahora el siguiente paso es crear el repositorio con el cual subiremos nuestro proyecto con Hugo, vamos a llamarle blog. Me marca error porque ya tengo un repositorio con ese mismo nombre.

Todo lo que hagamos a partir de aquí va a ser con la terminal de Linux, pero no te preocupes que te estaré guiando. Nos ubicamos en la carpeta que escogeremos para nuestro trabajo y clonamos el repositorio que acabamos de crear.

git clone"urlDelRepsitorio ya sea por SSH o Https"

Entramos en la carpeta con

cdblog

Instalamos Hugo, en el caso de ArchLinux lo instalé con

sudo pacman -S hugo

Ahora viene la parte divertida 😄. Creamos el sitio con Hugo.

hugo new site --force .

Si haces un ls en la terminal podrás notar que hay archivos nuevos, entramos a la carpeta themes

cd themes

Y buscamos en Hugo Theme el tema que nos guste más, a mi me ha gustado mucho el de After Dark. En la descripción está las instrucciones, si no aparece el enlace del repositorio sencillamente copiamos el enlace del botón Download

Y en la terminal clonamos el repositorio del tema que más os haya gustado (Recuerda que estamos en la carpeta themes).

git clonehttps://github.com/comfusion/after-dark.git

Procederemos a modificar el archivo de configuración principal config.toml

cd .. && vim config.toml

Como referencia tienes el repositorio de GeekLaunch/example-hugo-site. Debes recordar que según hayas escogido el tema pueden diferir ciertas cosas. Sin nada de personalización, mi archivo queda así:

1baseURL = "https://osmandi.github.io/blog/"2languageCode = "en-us"3title = "Hola :D"4themesDir = "themes"5publishDir = "docs"6theme = "after-dark"

Volvemos a la carpeta del blog y este paso es de mucha importancia para cuando hagas deploy a GitHub. Pasé muchas horas buscando la falla. Pero la encontré 😃.

cd ..
hugo

Con hugo se creará la carpeta docs y en ella se guardará el FrontEnd que es el que GitHub va a reconocer. Si todo ha ido bien el siguiente comando nos creará un servidor local al cual accederemos con el navegador, normalmente es http://localhost:1313/blog. El blog es por el nombre del repositorio.

hugo server

Ya estamos casi listos 😃. Ahora vamos a crear ¡nuestro primer post!

hugo new post/Hola-Platzi-Con-Hugo.md

Editamos el post.

vim content/post/Hola-Platzi-Con-Hugo.md

Para evitar errores, quitarle que sea borrador con draft = false

1---2 title: "Hola Plazi Con Hugo"3date: 2017-09-29T22:16:20-04:004 draft: false5---67 Hola platzeros, este es mi primer tutorial dentro de la plataforma. He pasado gran parte del día aprendiendo a hacer esto. :)                                                                                                                                    

Levantamos el servidor para ver si todo va bien.

hugo
hugo server

Hay temas que requieren una configuración adicional ya que los post no se ven bien. El mio se ve así, pero así se debía ver 😛.

¡Ahora haremos deploy a GitHub!

gitadd .
git commit --m "Vigesimo segundo intento"
gitpush -u origin master

En la parte de configuración del repositorio debes seleccionar esta opción, sino no va a funcionar (2da cosa en la que tardé horas 😅)

¡Listo! Mi página es https://osmandi.github.io/blog/

Cuéntame qué te pareció y comparte tu página creada con Hugo.

Ha sido un placer 😃

Nota impotante Debes correr hugo después de cada cambio ya sea un post o en los temas para que GitHub lo reconozca (también duré algo de tiempo en entender esta parte 😅 )

Yo empece por BackEnd con Java y Go. Y Hugo me parece una excelente herramienta para que mi FrontEnd se un poco presentable.

Referencias
Cómo hacer sitios web estáticos con Hugo y Go - Platzi
How to: Blog w/ Hugo and Github Pages Part 1
How to: Blog w/ Hugo and Github Pages Part 2
How to make a website and put it online 2017 tutorial (Hugo, Linux)