Esta publicación tiene como objetivo enseñar a como construir sitios web utilizando HUGO y como subirlo a un hosting.

Hugo es un generador de sitios web estáticos construidos con el lenguaje GO, fue creado en el año 2013. Con él se pueden generar sitios web en poco tiempo, versátiles y muy rapidos de hecho su lema es: “The world’s fastest framework for building websites”. Algunos casos notables en donde se construyeron sitios web con HUGO son:

• Kubernetes (https://kubernetes.io/)
• Netlify (https://www.netlify.com/)
• Smashingmagazine (https://www.smashingmagazine.com/)
• Cloudflare (https://developers.cloudflare.com/)
• Litecoin (https://litecoin.org/)

Para trabajar con Hugo necesitamos instalar los siguientes requerimientos:

1. Git (Software para control de versiones)
2. GO (Lenguaje de Programación)
3. Chocolatey (Manejador de paquetes de Windows. Utilice Windows 7)

HUGO también tiene instrucciones para instalarse en otros sistemas operativos, para más información visite este link: https://gohugo.io/getting-started/installing/#quick-install

1. Instalación de Git

Primeramente hay que descargarlo en el siguiente link:

https://git-scm.com/downloads.

Después de haber sido instalado abrimos Git Bash, para comprobar que nuestra instalación fue exitosa y no tuvo errores, ingresamos el siguiente comando que muestra la versión de git instalada.

1

git --version

2. Instalación de GO (Golang)

Se descarga de la página oficial:

https://golang.org/dl/

Luego de haber sido descargado pasamos al proceso de instalación. Cuando finalice su instalación hay agregar una variable en Enviroment Variables –> User Variables con el nombre de GOPATH y en la sección value la dirección de la carpeta donde se instalo. Ya con eso se podrá desde la consola ingresar los comandos de GO. Ingresamos el siguiente comando que debería mostrar la versión instalada:

1

go version

3. Instalación de Chocolatey

Procedemos a abrir powershell.exe como administrador, de lo contrario no se instalara.

Ahora toca ingresar el siguiente comando en la consola:

1

Set-ExecutionPolicy Bypass -Scope Process -Force; iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))

Luego de finalizar la instalación ingresamos el comando que nos mostrara la versión de Chocolatey:

1

choco  /?

Instalación de HUGO

Lo primero que debemos hacer es dirigirnos a la carpeta donde se va a instalar HUGO, abrimos la consola Git Bash en modo administrador e ingresamos el siguiente comando:

1

choco install hugo

Finalizado el proceso, podremos ver la versión de HUGO que se instalo:

1

hugo version

a. Crear un sitio web

Se crea con el comando:

1

hugo new site nombre_tu_preferencia

Ejemplo:

1

hugo new site gopherblog

Nos dirigimos a la carpeta del nuevo sitio web:

1

cd gopherblog

Iniciamos Git en el proyecto creado:

1

git init

b. Añadir Tema

Utilice el tema: hugo-sustain, este es el link del repositorio del tema que elegi:

https://github.com/nurlansu/hugo-sustain

Nota: Hugo posee distintos temas para distintos usos. Elige el que se adapta a tus necesidades: https://themes.gohugo.io/

Ahora toca clonar su repositorio y guardarlo en la carpeta themes de su proyecto.

1

git clone https://github.com/nurlansu/hugo-sustain.git themes/hugo-sustain

c. Modificación del Tema

En el archivo config.toml de su proyecto se puede modificar variables que son usadas en el tema.

Debemos empezar por agregar el nombre del tema que se eligió:

1

theme = 'hugo-sustain'

El formato de los permalink:

1

post = "/:year/:month/:day/:slug" 

Las variables params son donde podemos cambiar algunos aspectos de la página inicial del tema como el autor del proyecto, la descripción y el avatar. En la carpeta static, hay que crear una carpeta llamada img, se guardara una imagen que puede ser en formato png o jpg. El creador del tema que decidi utilizar recomienda que la imagen sea de una dimensión de 190 x 190 pixeles.

1
2
3
4

[params]
avatar = "profile.jpg"
author = "Jesus Gonzalez" 
description = "Describe your website"

Las variables params.social son las encargadas de capturar el nombre de usuario de las distintas redes sociales.

1
2
3
4
5
6
7
8

[params.social]
Github        = "username"
Email         = "email@example.com"
Twitter       = "username"
LinkedIn      = "username"
Stackoverflow = "username"
Medium        = "username"
Telegram      = "username"

Con la variable menu.main se puede agregar secciones a su tema. Ejemplo de como crear una sección:

1
2
3
4
5
6

## Main Menu
[[menu.main]]
name = "blog"
weight = 100
identifier = "blog"
url = "/blog/"

El archivo final debería tener el siguiente formato:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

baseURL = 'http://example.org/'
languageCode = "en-us"
title = "gopherblog"
theme = "hugo-sustain"

[permalinks]
post = "/:year/:month/:day/:slug"

[params]
avatar = "profile.jpg"
author = "Jesus Gonzalez"
description = "tutorial como construir con HUGO"

[params.social]
Github        = "username"
Email         = "email@example.com"
Twitter       = "username"
LinkedIn      = "username"
Stackoverflow = "username"
Medium        = "username"
Telegram      = "username"

## Main Menu
[[menu.main]]
name = "blog"
weight = 100
identifier = "blog"
url = "/blog/"

d. Creación del primer Post

Aprovechando los beneficios de HUGO se pueden crear posts de forma automatica ingresando un comando que genera un archivo donde tu podras ingresar el contenido a publicar. El archivo es en formato markdown

1

hugo new blog/primer_post.md

d. Inicio del servidor de HUGO

Para iniciar el servidor local se ingresa:

1

hugo server –D

Otro comando es:

1

hugo serve 

Este comando va a funcionar, pero los post creados no se van a mostrar porque se encuentran en estado: DRAFT = true, para que se visualicen es necesario eliminar una línea de los posts.

1

draft: true

e. Subir el proyecto a un Hosting

Para este tutorial se utilizo Github Pages.

Pasos para subir el proyecto

1. Un repositorio con el nombre de su proyecto. Ejemplo:

   hugo_blog

2. Un segundo repositorio con el nombre de usuario de su cuenta de github

   username.github.io

   (Recomendación: Este repositorio debe ser creado con su Readme.md).

3. En la consola git bash que se encuentra abierta en la carpeta de su proyecto agregamos el siguiente comando:

   1	git remote add origin git@github.com:username/hugo_blog.git

4. Ahora debes agregar sus archivos al área staging de git eso se realiza con los comandos:

   1 2	git add . git commit –m “first commit”

5. Luego debes subir al repositorio con el nombre del proyecto.

   1	git push –u origin master

6. Hay que clonar el otro repositorio.

   1	git submodule add -b master git@github.com:username/username.github.io.git public

7. Debes generar la carpeta public donde se almacenaran los archivos que son necesarios para el hosting

   1

   hugo

8. Para finalizar es necesario crear un Shell script con el nombre de deploy.sh que debe tener lo siguiente:

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

   #!/bin/sh # If a command fails then the deploy stops set -e printf "\033[0;32mDeploying updates to GitHub...\033[0m\n" # Build the project. hugo -t hugo-sustain # if using a theme, replace with `hugo -t <YOURTHEME>` # Go To Public folder cd public # Add changes to git. git add . # Commit changes. msg="rebuilding site $(date)" if [ -n "$*" ]; then msg="$*" fi git commit -m "$msg" # Push source and build repos. git push origin master

9. Antes de ejecutar el script debes cambiar en el archivo config.toml el valor de la variable baseURL con:

   https://username.github.io/

10. Ya cambiada esa línea puedes poner en ejecución el script.

    sh deploy.sh

Ahora su sitio debería estar disponible.

https://username.github.io

Conclusión

El tutorial fue creado para que las personas que nuncan han trabajado HUGO puedan desarrollar su sitio web en poco tiempo, sin tantas complicaciones y sepan como subirlo a un hosting.

Déjame saber que te pareció el artículo en mi twitter:

Twitter

Portafolio (Mi Portafolio fue creado con HUGO y con el tema hugo-sustain)