Ket

Hugo: Generador de sitios web

estáticos
- Mauricio Ledesma Miñambres -
Publicado por Percaff_TI99 | 27 Febrero 2016
Los sitios web estáticos pueden ser una gran ventaja cuando se trata de ahorrar
recursos que en otra medida serían desperdiciados si nuestro propósito es montar
un sitio austero, cuya principal finalidad estaría enfocada en la lectura por sobre la
prestación de servicios —donde es primordial contar con herramientas como una
base de datos, servidor web y PHP por ejemplo—.
Estos generadores de sitios estáticos son algunas de las alternativas a sitios web
dinámicos:
• Jekyll
• Octopress
• Pelican
• Middleman
• Hexo
• Hugo
• Nanoc
• Metalsmith
• Nikola
• Hyde
• Otros

Puedes encontrar muy buenos artículos sobre Pelican aquí, y orientado a Jekyll en el
sito sudo. Además puedes informarte sobre las ventajas y desventajas de utilizar
sitios web estáticos.

1
Particularmente voy a enfocarme en Hugo, un generador de sitios estáticos —una
simple página web HTML y CSS— que me gustó mucho por su simpleza, facilidad de
uso y un gasto mínimo de recursos.

Hugo está escrito en el lenguaje Go y sus principales características son:

• Flexibilidad: trabaja con muchos formatos, ideal para blogs, docs, portfolios
etc. Puedes declarar tus propios tipos de contenido, definir tus propios
metadatos en YAML, TOML o JSON. Utilizar índices para agrupar el contenido.
Esto se hace con prácticamente ninguna configuración
• Fácil instalación: Hugo es tan solo un paquete que se descarga y ejecuta
• No requiere privilegios de administrador, intérpretes o librerías externas y
base de datos
• Los sitios web creados con Hugo pueden ser implementados en S3, GitHub,
Dropbox o cualquier sitio de alojamiento
• Hugo está escrito para la velocidad y el rendimiento. Puede construir un sitio
completo en milisegundos
• Diseño responsivo

Otras características interesantes:

• Soporte nativo para contenido escrito en Markdown

2
 • URLs completamente personalizables
• Hugo Importación: portar un sitio Jekyll a Hugo mediante el comando hugo
import jekyll
• Resaltado de sintaxis proporcionado por Pygments
• Soporte integrado con:
• Sistema de comentarios Disqus
• Google Analytics
• Creación automática de RSS
• Soporte para plantillas HTML Go, Amber y Ace
• Integración de:
• Twitter
• GitHub
• Bitbucket
• Flickr
• Likendin
• Email
• Otros

Descarga
Hugo está disponible en diferentes formatos (.deb, .tar.gz, .zip). Descarga el
adecuado a tu distribución y arquitectura:

Instalación
Formato .deb
Abrimos un terminal en la ubicación dónde descargamos el paquete
hugo_0.15_amd64.deb —en el ejemplo— y ejecutamos:
sudo dpkg -i hugo_0.15_amd64.deb

También puedes utilizar el instalador gráfico Gdebi si lo tienes instalado en tu distro.

3
Formato tar.gz
En el caso de optar por esta opción una vez descargado lo descomprimimos —utiliza
la herramienta gráfica si lo prefieres—:
tar -xvzf hugo_0.15_linux_amd64.tar.gz

Nos habrá creado una carpeta con el ejecutable hugo_0.15_linux_amd64 el cual

copiaremos a la carpeta /usr/local/bin/:
cd hugo_0.15_linux_amd64
sudo cp hugo_0.15_linux_amd64 /usr/local/bin/hugo

De esta manera ya podemos invocar el ejecutable hugo desde cualquier ruta en

nuestro sistema.

Creando nuestro sitio web

Abrimos un terminal y creamos una carpeta para nuestro entorno de trabajo
correspondiente al sitio que vamos a crear —yo utilizaré misitio para ejemplificar—:
mkdir misitio
cd misitio
hugo new site .

Observar que hay un punto al final de la instrucción, esto significa que hugo creará
toda la estructura del sitio dentro de la carpeta que nos encontremos, en este caso
misitio. También podría crearse la carpeta misitio con el siguiente comando:
hugo new site misitio/
...
...

Listo. Ya tenemos creada la estructura para nuestro sitio web estático, cuando
ingresemos a nuestra carpeta de trabajo nos encontraremos con:
├── archetypes
├── config.toml
├── content
├── data
├── layouts
└── static

4
5 directories, 2 files

Si entramos a cada una de las carpetas listadas veremos que están vacías, solamente
el fichero de configuración principal (config.toml) cuenta información relevante. Más
adelante veremos como ir configurando de manera sencilla nuestro sitio web. Por
ahora nuestro fichero config.toml contiene lo siguiente:
baseurl = "http://replace-this-with-your-hugo-site.com/"
languageCode = "en-us"
title = "My New Hugo Site"

Crear contenido
Vamos a crear un simple post, este debe estar en formato Markdown —aquí tienes
información al respecto—:
hugo new post/primer_post.md

Ahora nuestra estructura es la siguiente:

├── archetypes
├── config.toml
├── content
│ └── post
│ └── primer_post.md
├── data
├── layouts
└── static

6 directories, 3 files

También podría crear una pagina “Acerca de”:

hugo new about.md

el resultado:
content/
├── about.md
└── post
└── primer_post.md

1 directory, 2 files

5
Veremos que en el primer caso hemos creado la carpeta post con el contenido, en el
segundo caso simplemente el contenido. Ambos son almacenados en la carpeta
content. Es importante entender como trabaja hugo en la estructura de directorios.
Cada vez que usemos la opción new siempre almacenará los datos creados en la
carpeta content, depende de nosotros si deseamos o no un directorio especifico
dentro de esta. Por ejemplo:
hugo new sources/mis_fuentes.md

el resultado:
content/
├── about.md
├── post
│ └── primer_post.md
└── sources
└── mis_fuentes.md

Sin embargo siempre que iniciemos el servidor por defecto mostrará en el

navegador lo que contenga la carpeta content/post, en este caso sería:
primer_post.md.
Es momento de escribir contenido, con cualquier editor que tengamos a mano
abrimos el fichero.md que hayamos creado y veremos que a priori contiene
metadatos de los cuales Hugo admite tres formatos:
• TOML, identificado por “+++”
• YAML, identificado por “- – -“
• JSON, un solo objeto que está rodeado de “{‘and’}”, cada uno en su propia
línea.
Información propia de Toml para definir sus metadatos:
+++
date = "2016-02-10T13:49:56-03:00"
draft = true
title = "primer_post"

+++

Donde:

6
date: Información de AA/MM/DD y Hora en que se creó el fichero.
draft: Modo borrador, mientras persista habilitada la opción true no se verá en la
salida del navegador.
title: El título de nuestro post. Por defecto toma el nombre con que hemos creado el
fichero.
A este punto nos queda escribir o pegar contenido por debajo de la línea “+++”. En
este ejemplo comienzo con un encabezado y algo de texto:
+++
date = "2016-02-10T13:49:56-03:00"
draft = true
title = "primer_post"

+++

## Lorem ipsum

Lorem ipsum ad his scripta blandit partiendo, eum

fastidii accumsan euripidis in,
eum liber hendrerit an. Qui ut wisi vocibus suscipiantur,
quo dicit ridens
inciderint id. Quo mundi lobortis reformidans eu, legimus
senserit definiebas an
eos. Eu sit tincidunt incorrupte definitionem, vis mutat
affert percipit cu, eirmod
consectetuer signiferumque eu per. In usu latine equidem
dolores. Quo no falli
viris intellegam, ut fugit veritus placerat per.
...
...

Solo resta correr el servidor, sin embargo antes debemos instalar un tema para
visualizar en el navegador, Hugo no trae de forma predeterminada un tema en
especial.

Instalar temas
Para obtener las últimas versiones abrimos un terminal y ejecutamos:
git clone --depth 1 --recursive
https://github.com/spf13/hugoThemes.git themes

7
También podríamos instalar un solo tema o un par nada más. Para ello vamos a crear
la carpeta themes —esta no viene por defecto— en la raíz del directorio que
creamos —misitio en este caso— y luego usamos Git. Por ejemplo, para instalar
hugo-uno:
mkdir themes
cd themes
git clone https://github.com/coryshaw/hugo-uno.git

Ejecutar Hugo
Hugo viene con su propio servidor de alto rendimiento. Solamente escribir hugo
server y este buscará un puerto disponible para ejecutar el servidor con nuestro
contenido:
hugo server --theme=hugo-uno --buildDrafts

– – theme: Especifico el tema a usar, no importa si hay uno o dos, Hugo no lo

recogerá a menos que se lo indiquemos en la línea de comandos o lo configuremos
en el fichero config.toml como veremos más adelante.
– – buildDrafts: Esta opción le dice a Hugo que vuelque el contenido, ya que por
defecto está en modo “borrador” y no se verá en el navegador. También se puede
prescindir de esta opción.
Ejecuta hugo server -h para ver todas las opciones disponibles.

El resultado final:
0 of 1 draft rendered
0 future content
1 pages created
0 paginator pages created
0 tags created
0 categories created
in 170 ms
Watching for changes in /home/usuario/work/misitio/
{data,content,layouts,static,themes}
Serving pages from memory
Web Server is available at http://localhost:1313/ (bind
address 127.0.0.1)
Press Ctrl+C to stop

8
Luego copiamos/pegamos http://localhost:1313/ en la barra de direcciones de
nuestro navegador habitual para tener nuestro sitio web estático corriendo:

Descargar tema: hugo-uno

http://gutl.jovenclub.cu/wp-content/uploads/2016/02/hugo-uno.zip

Configuraciones extras
Como se puede apreciar en las imágenes no representará nuestro sitio web si
dejamos las configuraciones predeterminadas. En primer lugar vamos a cambiar el
nombre del sitio y otros detalles significativos.
Abrimos con un editor de texto el fichero config.toml y editamos lo siguiente —
utiliza tus datos del sitio—:
vim config.toml

reemplazamos:

9
baseurl = "http://replace-this-with-your-hugo-site.com/"
languageCode = "en-us"
title = "My New Hugo Site"

por:
baseurl = "http://replace-this-with-your-hugo-site.com/"
languageCode = "es-ar"
title = "GUTL"
theme = "hugo-uno"

y en el fichero content/post/primer_post.md:
+++
date = "2016-02-10T13:49:56-03:00"
#draft = true
title = "Primer post"

+++

En el primer caso aparte de cambiar el nombre del sitio también especifiqué un

tema por defecto, y en el fichero.md deshabilité (#) la opción draft = true.
Alternativamente se puede utilizar draft = false, de esta forma evito usar las
opciones – – theme y – – buildDrafts al iniciar el servidor. Además modifiqué el titulo
del artículo para que se lea apropiadamente, generalmente usamos nombres cortos
para crear un fichero, pero el título del artículo es más descriptivo.
En el preciso momento en que guardemos los cambios Hugo actualizará la página sin
necesidad de reiniciar el servidor. Solamente necesitaremos esto último en algunos
casos cuando realicemos cambios en el fichero config.toml, usando Ctrl+C para
detenerlo y luego nuevamente hugo server para iniciarlo.

10
 Prestar especial atención que si utilizamos la opción – – buildDrafts, todo el tiempo que
estemos editando o agregando nuevo contenido y salvando los cambios se verá reflejado
en tiempo real en nuestro sitio web. A menos que estés trabajando en modo off-line, lo
mejor es cambiar a la opción draft = false una vez que decides aprobar tu contenido.

En esta imagen utilizando – – buildDrafts —en la línea de comandos— y draft = true

como opción habilitada, se nos avisa que el contenido esta en modo borrador.

Añadiendo algunas opciones más a mi sitio web

La mayoría de los temas vienen con casi todas las características que uno podría
esperar, sin embargo no todas están habilitadas por defecto, una buena práctica es
leer el fichero README.md del tema que vayamos a utilizar, este nos dice que
opciones trae disponible.

11
De aquí en adelante yo ejemplificaré algunas opciones con un tema en particular:
bootstrap.

Descargar tema: bootstrap

http://gutl.jovenclub.cu/wp-content/uploads/2016/02/bootstrap.zip

Etiquetas (Tags)
En en la sección de metadatos de nuestro fichero.md —p. ej., primer_post.md—
añadimos el siguiente contenido cuya sipnosis es la siguiente: tags =
["Tag1","Tag2", "Tag3"]
content/post/primer_post.md:
+++
date = "2016-02-15T20:12:07-03:00"
#draft = true
title = "Hugo: Generador de sitios web estáticos"
tags = ["Static sites", "Jekyll", "Pelican"]

+++

Con esa simple línea ya contamos con etiquetas (tags).

12
Personalizar la barra de navegación (Navbar)
En este caso se debe crear un fichero Menu.toml dentro de la carpeta data en la raíz
de nuestro sitio. Editamos dicho fichero con el siguiente contenido:
data/Menu.toml:
[about]
Name = "Acerca de"
IconClass = "fa-info-circle"
URL = "/about"

[posts]
Name = "Artículos"
Title = "Lista de artículos"
URL = "/post"

[tags]
Name = "Etiquetas"
Title = "Lista de etiquetas"
URL = "/tags"

13
URL = “/about” significa que buscará en content/about.md o
content/about/about.md en el caso de crear una carpeta específica. En esencia URL
= “/” apunta a content/ruta a.
Creamos el fichero que contendrá la información de nuestro sitio:
Recordar que siempre debemos usar el comando hugo en la raíz del sitio que hemos
creado.

hugo new about.md

o
hugo new about/about.md

editamos el contenido content/about.md:

+++
date = "2016-02-18T17:30:36-03:00"
#draft = true
title = "Acerca de este sitio"

+++

## Grupo de Usuarios de Tecnologías Libres

...
...
...

Pié de página
Creamos en la misma carpeta data un fichero FootMenu.toml con el siguiente
contenido —en mi caso—:
data/FootMenu.toml:
[license]
Name = "Licencia"
URL = "/license"

Creamos el fichero license.md

hugo new license.md

14
editamos su contenido:
+++
date = "2016-02-18T17:45:16-03:00"
#draft = true
title = "Licencia"

+++

The MIT License (MIT)

Copyright (c) 2015

Permission is hereby granted, free of charge, to any

person obtaining a copy of
this software and associated documentation files (the
"Software"), to deal in
the Software without restriction, including without
limitation the rights to
use, copy, modify, merge, publish, distribute,
sublicense, and/or sell copies of
the Software, and to permit persons to whom the Software
is furnished to do so,
subject to the following conditions:

Por último edité el archivo config.toml:

baseurl = "http://replace-this-with-your-hugo-site.com/"
languageCode = "es-ar"
title = "Grupo de Usuarios de Tecnologías Libres"
tag = "tags"
copyright = "GUTL | Grupo de Usuarios de Tecnologías
Libres © 2016"

Ahora tengo un sitio web simple con algunas funcionalidades extras:

15
Hugo themes

Simple-a

16
Robust

Base16

Ghostwriter

17
 Vienna

Hyde-x

Algunos temas —minimalistas en su mayoría— para descargar:

Hugo-temas-01.zip
http://gutl.jovenclub.cu/wp-content/uploads/2016/02/hugo-temas-01.zip
Hugo-temas-02.zip
http://gutl.jovenclub.cu/wp-content/uploads/2016/02/hugo-temas-02.zip
Hugo-temas-03.zip
http://gutl.jovenclub.cu/wp-content/uploads/2016/02/hugo-temas-03.zip
Yo he abordado los conceptos básicos sobre Hugo, puedes profundizar más sobre
esta gran herramienta leyendo la documentación completa —en inglés—. Desde un
terminal ingresas a la carpeta docs y ejecutas hugo server

Descargar docs.zip
http://gutl.jovenclub.cu/wp-content/uploads/2016/02/docs.zip

18
Fuente:
https://gohugo.io/
https://github.com/spf13/hugo/releases
https://github.com/spf13/hugoThemes
http://sudo.cubava.cu/

Tutorial de Hugo en español,

generador de sitios estáticos
26 May 2016
Los generadores de sitios estáticos son aplicaciones que dados unos ficheros
generan un sitio web completo, listo para ser desplegado en Apache o Nginx. El
generador es llamado bajo demanda del administrador por lo que, al contrario que
en un CMS completo, este programa solo genera las páginas una sola vez,
reduciendo considerablemente la carga de trabajo y el precio y aumentando en
velocidad y rendimiento.
Los generadores más populares son:
Nombre Lenguaje Plantillas Licencia Sitio web
Jekyll Ruby Liquid MIT http://jekyll.rb.com
Hexo JavaScript EJS y Swig MIT http://hexo.io
Go Template,
Hugo Go Apache http://gohugo.io
Acer y Amber
http://blog.getpelican
Pelican Python Jinja2 GPL
.com/

Además es también bastante conocido Octopress pero Octopress no es más que

Jekyll con una colección de utilidades extra, el núcleo del programa sigue siendo
Jekyll.
¿Por qué voy a elegir Hugo? Yo empecé con Jekyll y me gustó. Sin embargo Liquid no
me acabó de convencer nunca y miré otras alternativas. Hexo me pareció excelente
si lo que quieres hacer es un blog, funciona muy bien y es más rápido que Jekyll pero
Jekyll tenía la ventaja de que se podía usar no solo en blogs, sino en cualquier web
en general. Entonces oí hablar de Hugo. Hugo es el más rápido y el más flexible. No

19
está enfocado solo en blogs, soporta todo lo que le eches. Sin embargo me parece
que Hugo no es el más sencillo de configurar, así que aquí va el tutorial.

Instalando Hugo
Hugo está hecho en Go, quiere decir que está compilado y por tanto hay una versión
diferente para cada sistema operativo. Descarga la versión de tu sistema operativo
desde aquí. Si usas GNU/Linux es posible que tu distro haya empaquetado ya Hugo.
Búscalo.
Una vez lo tengamos instalado comprobamos que todo esté en orden:
hugo version

Por defecto Hugo no trae ningún tema. Si quieres instalarte uno y no crear uno de
cero puedes clonarlos desde Git. Si quieres probar los temas antes de instalarlos no
dejes de mirar Hugo Themes
git clone --recursive https://github.com/spf13/hugoThemes
~/themes

Si queremos tener coloreado de sintaxis podemos usar Pygments. Si tienes PIP

instalado es fácil.
sudo pip install Pygments

Además si quieres activar el autocompletado de Bash solo tienes que hacer

sudo hugo gen autocomplete
. /etc/bash_completion

Y con esto ya tenemos Hugo instalado correctamente. Ejecuta:

hugo new site MiSitioSupercalifragilisticoespialidoso

20
Organización en Hugo
En Hugo tenemos que tener muy en cuenta la organización de los ficheros. En primer
lugar van los themes. Como puedes comprobar la carpeta themes generada esta
vacía. Para ir probando los distintos temas puedes hacer un sencillo enlace simbólico
entre la carpeta con los temas descargada y esta.
rmdir themes
ln -s ../themes .

Veamos el resto de carpetas:

• archetypes. Arquetipos. Son plantillas para cuando añadimos un nuevo
elemento. Por ejemplo, podemos tener un arquetipo de post sobre un vídeo
de YouTube. Es posible crear un arquetipo que contenga configuración ya
específica (categorías, reproductor insertado, etc) y que cuando escribamos ya
lo tengamos medio hecho. A la hora de generar el sitio los arquetipos de
origen no son tenidos en cuenta.
• config.toml (o config.json o config.yaml). Este archivo contiene la
configuración del sitio.
• content. Aquí va el contenido central de la web. Dentro de content debes
crear tantas carpetas como secciones tengas (aunque se puede sobreescribir
vía configuración, es práctica recomendada). Cada sección tiene asignado un

21
 layout distinto. Dentro de la carpeta de cada sección la organización es libre,
los archivos suelen ser de Markdown, pero HTML puro también vale.
• layouts. ¿Cómo se organiza el contenido? Los layouts son la respuesta. Por
cada sección hay que crear mínimo dos layouts, uno para mostrar un
contenido solamente y otro para múltiples contenidos del mismo tipo (listas).
• data. Aquí puedes almacenar archivos en JSON, YAML o TOML a los que
puedes acceder desde Hugo. Estos archivos pueden contener cualquier tipo de
información, piensa en ellos como en una especie de base de datos.
• static. El contenido estático, imágenes, JavaScript, CSS, que no deba ser
procesado por Hugo debes ponerlo aquí.

Configuración
Dentro del fichero config.toml hay que editar unos cuantos valores.
baseurl = "mi-sitio.com" # La dirección base del sitio
languageCode = "es-es" # El idioma de la web
title = "" # El título de la web
theme = "bleak" # El tema que se va a aplicar al
contenido
googleAnalytics = "" # Código de seguimiento de Google
Analytics
disqusShortname = ""

[Params] # A estos parámetros se puede acceder de forma

directa con .Site.Params.NOMBRE
Author = "Adrián Arroyo"

También es configurable Blackfriday el motor de Markdown de Hugo, aunque las

opciones por defecto son más que suficientes.

Creando contenido
Crea un archivo dentro de content. Puede estar dentro de una sección si así lo
prefieres. En Hugo al igual que en Jekyll cada contenido tiene un front matter, es
decir, los metadatos se añaden al principio en un formato que no se va a renderizar.
Hugo soporta TOML, YAML y JSON. Si usamos TOML, los delimitadores del front
matter serán +++, si usamos YAML --- y si usamos JSON tenemos que poner un
objeto con las llaves, {}

22
+++
title = "El título de la entrada"
description = "Una pequeña descripción"
tags = ["hola","otra","etiqueta"]
date = "2016-05-23"
categories = ["Sobre el blog"]
draft = true
+++

Aquí va el contenido en Markdown o HTML que va a ser

renderizado.

Podemos crear variables nuevas a las que podremos acceder desde .Params. Otras
opciones predefinidas son type (que sobreescriben el valor de la sección), aliases
(que permite hacer redirecciones), weight (la prioridad cuando el contenido sea
ordenado) y slug (permite ajustar la URL del contenido).

Modificando el tema
Puedes modificar el tema usando la carpeta layouts. En el fondo un tema es una
colección de layouts y recursos estáticos que son combinados con el tuyo. Si ya usas
un tema y solo quieres realizar pequeñas modificaciones puedes editar el tema
directamente. Si quieres añadir nuevas secciones o crear un tema de 0 entra a la
carpeta layouts.
Hay varias subcarpetas dentro de layouts importantes:
• _default. Es la que se usa cuando no hay otro disponible. Normalmente los
temas sobreescriben esta carpeta. Si sobreescribes esta carpeta perderás el
tema.
• index.html. La página de entrada a la web
• partials. En este carpeta se pueden guardar trozos HTML reutilizables para ser
usados por los layouts.
• shortcodes. Son pequeños trozos de HTML reutilizables con parámetros de
entrada para ser usados por el contenido.
Dentro de cada layout (como en _default) tiene que haber mínimo dos archivos. Un
archivo single.html que se usará cuando solo se tenga que representar una unidad

23
de ese contenido y un archivo list.html que se usará cuando sea necesario mostrar
un conjunto de esos contenidos.
Estos archivos han de programarse usando el motor de plantillas de Go y la API de
Hugo. Un archivo single.html básico que muestra el título y el contenido tal cual
sería así.

{{ partial "header.html" . }}
{{ partial "subheader.html" . }}
<section id="main">
<h1 id="title">{{ .Title }}</h1>
<div>
<article id="content">
{{ .Content }}
</article>
</div>
</section>
{{ partial "footer.html" . }}

Dentro de las páginas list.html es práctica habitual definir una vista li.html como
un elemento individual. Esos elementos individuales se unen para formar la lista en
list.html.

Algunos extras
Los shortcodes son pequeños trozos de HTML que aceptan parámetros. Podemos
usarlos en el contenido. Piensa en ellos como Mixins de CSS o funciones de
JavaScript. Por ejemplo, para marcar un resaltado de sintaxis:

<section id="mira-este-super-codigo">
<p class="html-is-broken">Rompiendo el HTML</p>
</section>

O un enlace dentro de nuestra web: ```

```

24
 Haz Divertida la Creación de
Sitios Web con Hugo
by Tom Whitbread
2 Febrero 2017 Difficulty:Beginner Length:Medium Languages: Español

Sitios estáticos son populares por muchas razones-evitar excesivas soluciones y

mantener un proyecto sencillo sin bases de datos, dependencias o configuraciones
específicas del lado del servidor (no PHP, no MySQL/MSSQL, .NET, Python, Ruby, etc)
lo hace muy sencillo para desplegar y ser robusto contra numerosas posibles
vulnerabilidades; pues últimamente son sólo páginas HMTL siendo enviadas al
usuario.
En ésta guía te mostraré cómo configurar tu entorno de desarrollo con Hugo y crear
tu primer sitio web estático Hugo.

Un Flamante Planteamiento sobre Sitios Estáticos

El legendario acrónimo de diseño KISS-Mantenlo simple, Estúpido puede ser bien
aplicado aquí con Hugo y cómo él plantea el espacio del generador del sitio web
estático.
Creado en Go, Hugo es muy rápido para compilar tus páginas estáticas (le toma
fracciones de milisegundos compilar un sitio pequeño - y puede hacer miles de
páginas en segundos)
También Hugo proporciona herramientas esenciales al flujo de trabajo del sitio web
estático (incluyendo herramientas de desarrollo y migración), permtiendo a los
desarrolladores y diseñadores enfocarse en las partes divertidas - construir sitios
web y ser creativos. Sin necesidad de quedar atrapado en ninguno de esas
consideraciones de topología configuración/problemas de dependencias /
arquitectura.

¿Por Qué Sitios Web Estáticos?

Últimamente cuándo construimos sitios web basados en el contenido podemos
asumir algunas generalidades para todos los sitios y Hugo ofrece una estructura para

25
eso; dónde podemos tomar que los tipos de contenido sean posts, categorías,
calificaciones o productos y organizar los datos, dándoles una apariencia específica
vía plantilla y aplicar hojas de estilos - adentrándonos más podemos realmente
llevarlos a cualquier lugar que necesitemos dentro del espacio del sitio web estático
HTML/CSS/JS - y cuándo piensas en ello pragmáticamente -ese es realmente un
espacio muy grande permitiendo una enorme cantidad de terreno para la
creatividad.
jQuery correrá bien y no hay nada que te impida usar servicios de terceros (o los
tuyos) en tu página estática si los necesitas. Así que no te limites al pensar que no
puedes integrar otros repositorios/aplicaciones en tus sitios estáticos. ¡No es
realmente el caso y puedes usar cualquierta de los JS existentes!
Así que para unas cuántas páginas de un sitio web del tipo de un folleto de una
compañía, con un vínculo a formularios de de google para contacto (hugo todavía no
puede procesar formularios) o un enlace a un correo electrónico será ideal, y si
necesitas mostrar algunos datos también desde un canal puedes usar javascript para
manejar esa parte.

¿Cómo Puede Trabajar para Mi Negocio/Clientes?

Tomando por ejemplo una pequeña tienda / boutique o un trabajador
independiente, con unos cuántos productos o servicios que no requieren aún de una
solución de comercio electrónico - sólo alguna información de productos y un enlace
para contacto. Hugo puede hacerlo en una mañana. Y encontrar hosting va a ser
muy sencillo - es sólo html estático después de todo.
Así que realmente para dueños de negocios que podrían estar trabajando dentro o
afuera del espacio de la tecnología que únicamente requieren de sitios tipo tarjetas
de presentación - o con presupuestos muy limitados, o incluso en una escala
ligeramente mayor puede funcionar bien para la documentación del proyecto en
proyectos GNU por ejemplo o aún en una extensión para start ups o SMEs que sólo
necesitan una presencica para hoy - aquí es dónde Hugo puede ser utilizado
completamente para crear un sitio web de alta calidad.

26
¿Cuáles Son las Limitaciones de los Sitios Estáticos?
Lo que Hugo no puede hacer es contenido dinámico, por ejemplo formularios,
sistema de usuarios o búsqueda que requieran de bases de datos... y si eso es lo que
estás buscando entonces Hugo ciertamente no es lo que quieres. Pero para otras
veces, cuándo te encuentras diciendo - ¿No podemos tan sólo publicar una página
básica para ésto? Los generadores de sitios web estáticos en mi opinión son el mejor
lugar para acudir. También sé consciente que Hugo no es el único generador de sitios
web. Existen muchos y han estado en escena desde hace mucho, aquí está una lista
de los principales
Para crear blogs de contenido en vivo como sitios de noticias cubriendo eventos que
se están desarrollando, Hugo podría ser una magnífica solución para rápidamente
preparar una página para esa cobertura a ser vinculada desde tu sitio principal,
poniéndola online en minutos y significando que puedes continuar agregándole
material rápido y volver a desplegar los cambios de inmediato. Pero para crear todo
un sitio de noticias con búsqueda y muchos escritores, realmente no sería adecuado
utilizar Hugo.
Dónde Hugo también tiene puntos débiles es en el uso de herramientas más
avanzadas para su conducto de estáticos como EcmaScript6 y SASS - si quieres eso
necesitarás incluir Gulp o Grunt para hacer el trabajo, de otra manera sólo mediante
CSS y JS es con lo que estaría funcionando bien.
También formularios de contacto y búsqueda pueden ser logrados pero únicamente
usando métodos de terceros (por ejemplo Google) para alcanzar ésto.
Alternativamente nada te impedirá incrustar tu propia solución desde tu propio
servicio en ese punto.

Tu Entorno de Desarrollo en Casa

Hugo está escrito en Go y tiene soporte para muchas plataformas, para ver todos los
lanzamientos puedes ir aquí
Para usuaros de macOS con HOmeBrew, la instalación puede hacerse como sigue:
brew update && brew install hugo

Más información sobre la instalación para Mac OSX y Windows

27
Una vez que Hugo es instalado podemos probar la instalación ejecutando hugo
help en la terminal o hugo version

Creando Tu Primer Sitio Web Estático Con Hugo

Ahora que hemos instalado Hugo podemos comenzar a crear el sitio web. Ejecuta el
siguiente comando reemplazando 'your-sitename-here' con el nombre de tu
proyecto
$ hugo new site your-sitename-here
Ésto creará una estructura para que puedas ver tu sitio en tu finder

o en tu terminal vía el comando tree

Hugo ha creado 5 subdirectorios y 1 archivo, que usa para crear el sitio web final.
Aquí está lo que todos significan:
• archetypes: aquí definimos lo que es nuestro contenido, podemos establecer
etiquetas o categorías predeterminadas y definir tipos como un post, tutorial o
producto.
• config.toml: la configuración principal está aquí, podemos definir el título de
todos los sitios web, idioma, urls, etc
• content: las páginas de contenido del sitio están guardadas aquí, los
subdirectorios son usados para que las secciones ayuden a organizar el
contenido, crea un content/products para el contentido de tus
productos por ejemplo
• data: datos del sitio como configuraciones de localización van aquí

28
 • layouts: maquetados para la librería Go html/template que Hugo utiliza van
aquí
• static: cualquier archivo estático aquí será compilado al sitio web final, hay
total libertad, así que puedes servir cualquier archivo css, js, o de imagen por
ejemplo.
• themes: Crea nuevos temas o clona temas desde github a éste directorio para
usarlos en tu sitio.

"Hello World" en Hugo

Necesitamos agregar un post para ver el sitio que acabamos de crear, hagámoslo
usando el siguiente comando:
$ hugo new post/first-post.md
Ahora edita el archivo en content/post/first-post.md, contendrá algo similar a lo
sigiente por defecto:
+++
date = "2016-09-
26T13:19:03+07:00"
title = "first post"

+++
Front Matter
El contenido dentro +++ es la configuración TOML para el post. Ésta configuración es
llamada front matter. Te permite definir la configuración del post junto con su
contenido. Por defecto, cada post tendrá las propiedades de la configuración
mostradas arriba.
Agrega algún texto después de +++ así:
+++
date = "2016-09-
26T13:19:03+07:00"
title = "first post"

+++

Hello world!

29
Sirviendo Datos y Recarga Automática
Así podemos ver la funcionalidad de recarga automática que está integrada en Hugo,
hagamos algunos cambios al sitio y veamos lo que ocurre.
Primero inicia el servidor al ejecutar
$ hugo server
Ahora si realizas algunos cambios a tu archivo, verás que Hugo se actualiza
instantáneamente.
Tu sitio web estará disponible en http://localhost:1313 pero espera - aún solamente
podrás ver una página en blanco en éste punto, ¡porque no hemos definido un
tema!

Agrega un Tema
Hugo tiene una muy robusta y versátil librería de temas pues usa la librería
html/template de Go. Los temas son fáciles para trabajar, la instalación se hace
al simplemente clonando el repositorio de un tema en el directorio themes para tu
sitio de Hugo.
Hugo no propone un tema predeterminado, así que debes establecer uno.
Hay muchísimo temas de código abierto para elegir y que puedes ver aquí
httlps://themes.gohugo.io/
Agreguemos cargas de temas a nuestro sitio para que podamos experimentar con
todos ellos y ver cuál nos gusta. Hagámoslo al ejecutar lo siguiente en nuestro
directorio de hugo:
$ git clone --recursive https://github.com/spf13/hugoThemes.git
themes

Cloning into 'themes'...

remote: Counting objects: 880, done.
remote: Compressing objects: 100% (5/5), done.
remote: Total 880 (delta 1), reused 0 (delta 0), pack-reused 875
Receiving objects: 100% (880/880), 669.20 KiB | 288.00 KiB/s,
done.
Resolving deltas: 100% (506/506), done.
Checking connectivity... done.
Ahora verás un montón de temas siendo clonados a tu sitio. Hay muchos así que
tendrás tiempo para un descanso mientras hace la clonación...

30
Para usar un tema sólo inicia Hugo con el parámetro -t o --theme así
$ hugo -t ThemeName
O puedes agregar a tu config.tom :
theme: "ThemeName"
El ThemeName (Nombre del Tema) debe coincidir con el nombre del directorio
dentro de /themes .

Cuándo has elegido un nombre de tema del directorio, comienza tu servidor con
hugo server --theme=ThemeName y dirígete a http://localhost:1313

Aquí están algunos ejemplos de algunos de esos temas que clonamos, utilicé beg,
crisp y cactus, ¡observa que hay tantos para elegir!

31
32
Así que ahora has generado un sitio web con un post hello world, ¿qué más
podemos hacer?
Realizar un blog básico es realmente fácil y factible incluso en un sólo día con Hugo.
Primero necesitarás identificar un arquetipo para el post predeterminado, así que
crea un nuevo archivo en archetypes/defalult.md y agrega lo siguiente
como front matter
+++
tags = ["welding", "metal work"]
categories = ["posts"]
+++
Aquí establecemos algunas etiquetas predeterminadas, para un blog sobre
soldadura podemos estar seguros que queremos éstas etiquetas en todos nuestros
posts, y creamos una categoría llamada posts sólo para que tengamos una
predeterminada cuándo vayamos a crear un post.
Ahora agrega tu primer post vía la terminal así
$ hugo new post/tig-welding-a-bike-frame.md
Ésto creará un post con el arquetipo que definiste antes, ¡ahora puedes abrirlo en un
editor de texto y empezar a escribir en formato markdown!
Agreguemos algunos posts más.

33
 $ hugo new post/welding-a-roll-cage.md
De nuevo agrega contenido, sólo abre el archivo que Hugo creó y empieza a agregar
contenido al final del archivo después del front matter.

Creando una Galería de Fotos

Para crear una galería de fotos con Hugo usaremos la excelente herramienta hugo-
gallery disponible en Github.

Su uso es así:
hugo-gallery <Ruta de Acceso de Origen> <Sección de
Destino> <Título> [URLBase]

La herramienta hugo-gallery creará un nuevo directorio de posts que contenga

un archivo markdown para cada imagen en el directorio origen permitiendo una
rotación de imágenes ordenadas. Leerá todos los archivos del directorio Ruta de
Acceso de Origen y los guardará en el directorio estático del sitio de hugo.

Creará un nuevo directorio dentro del directorio content (contenido) basado en el

Título proporcionado por ejemplo content/welding

Por ejemplo:
$ hugo-gallery static/images/welding-photos welding
"Photos of my insane welding skills"

Visita localhost:1313/welding para ver el contenido.

Despliegue
Hugo tiene varias herramientas para despliegue como hugomac que es una
aplicación de barra de menú para OSX que permite al usuario fácilmente publicar en
los hosts de EC2. No se necesita línea de comandos.
También hudodeploy proporciona una configuración SFTP para el despliegue, o
podrías sólo usar el Automated deployments que viene con Hugo.

34
Conclusión
Los generadores de sitios estáticos han existido desde hace tiempo, y Hugo
realmente utliliza el conjunto de herramientas haciendo fácil y rápida la publicación
de sitios, o incluso la migración de un sitio existente desde wordpress a hugo. Hay
muchas herramientas para Hugo, incluyendo editores front-end, consúltalos aquí
https://gohugo.io/tools/
Estudiarlo con profundidad sería bueno para ver más módulos para que Hugo
ofrezca soporte a cosas como un formulario de contacto y soporte de galería, o posts
relacionados por ejemplo.
La hoja de ruta de Hugo tiene muchas ideas fantásticas como redimensionado
dinámico de imágenes, soporte para rsync e importación de imágenes desde
proveedores de alojamiento y alojamiento más fácil con AWS EC2 e integración con
github... así que si no estás usando Hugo ¡asegúrate de volver a revisar el proyecto
mientras se vaya desarrollando!

Hugo – Parte 1
Publicado el 7 abril, 2017 por acisif
Hugo es un sistema por línea de comandos para generar sitios web estáticos. Una
frase muy chula, pero… ¿qué significa realmente?
Imaginad que queréis escribir una página web, abriríais vuestro editor de texto
favorito y pondríais allí vuestro HTML. Si el sitio web tiene muchas páginas, tendríais
que escribir una a una con vuestro editor el HTML. Vale ya tienes tu sitio web con
cientos de páginas web y si ahora al jefe se le mete en la cabeza que hay que poner
un menú en cada página, tocaría editarlas una a una para poner el menú. ¿Y si se
añade una página web nueva que debe aparecer en el menú? Vuelta a editar las
cientos de páginas.
¿Qué eslo que hace Hugo? El mismo trabajo anterior hecho con Hugo consistiría en
escribir nuestros contenidos usando una serie de convenciones (como puede ser un
lenguaje de Markdown) y ejecutando un comando, se generarán las páginas web
que debemos subir a nuestro servidor. En el caso de que el jefe quiera introducir un

35
menú, usando los comandos adecuados, Hugo hará el trabajo. Fijaros que al final se
obtienen páginas web en HTML que no dependen de tener instalado en el servidor
PHP, Java o cual quier base de datos como MySQL. El rendimiento que alcanzará un
servidor, como puede ser NGinx, sirviendo dicho contenido estático, será realmente
elevado.
Actualmente tenemos gestores de contenido, como WordPress, que generan las
páginas web de forma dinámica y permiten modificarlas usando entornos WYSIWYG
de forma sencilla. Pero estos entornos suelen ser lentos y dependen de bases de
datos y una simple migración puede ser un calvario. Fijaros que WordPress, si no se
usan proxys o caches, va a generar la página web cada vez que vayamos a visitarla,
con la pérdida de rendimiento que ello significa. Cuando se desea tener un sitio web
con un alto nivel de visitas y un servidor con bajos recurso, tendremos que
olvidarnos de los gestores de contenido dinámicos y recurrir a soluciones como
Hugo.
Pero el rendimiento tiene su precio. Olvidaros de un entorno amigable estilo
WordPress, aquí todo se va a hacer usando editores de texto y línea de comandos.
Hugo es para machos muy machos de esos que tienen pelos en los sobacos.
Instalación
Para instalarlo en Ubuntu se usará:
sudo apt-get install hugo
Creando un nuevo sitio
Para crear nuestro nuevo sitio se usará:
hugo new site ejemplo
Se creará un directorio con la información básica del sitio. En este caso el sitio se
llamará ejemplo. Después veremos el signicado de cada uno de los directorios que
se crean.
Ahora se entra en la carpeta:
cd ejemplo

36
Indicando un tema
Hasta que no se instale un tema, hugo no mostrará contenido. Para instalar el tema
se usará la herramienta git. Primero instalamos git:
sudo apt-get install git
Después en https://github.com/dim0627/ elegimos un tema. Para descargar un
tema entramos en el tema con nuestro firefox y en el botón de “Clone or download”
de Github copiamos la dirección y se la pasamos a git. Por ejemplo, para instalar el
tema hugo_theme_robust nos indica que la dirección es
https://github.com/dim0627/hugo_theme_robust.git, por lo que le comando git
será:
git clone
https://github.com/dim0627/hugo_theme_robust.git
Es importante recordar el directorio del tema que hemos instalado, más adelante lo
necesitaremos.
Añadiendo una nueva entrada
Para añadir contenido se usará:
hugo new post/hola-mundo.md
Dentro de la carpeta content/post se creará el contenido “hola-mundo.md”. Que
contendrá algo similar a:
+++
date = "2017-04-07T01:04:36+02:00"
draft = true
title = "hola mundo"
+++

Date especifica la hora de creación de la entrada. Draft indica si el contenido es un

borrador y no se integrará en el sitio que se genere. Por último title es el título de la
entrada.
Usando un lenguaje de Markdown, se puede introducir el contenido de la entrada:

37
+++
date = "2017-04-07T01:04:36+02:00"
draft = true
title = "hola mundo"
+++
Hola mundo **esto** es un ejemplo.

Hola mundo

También podemos usar HTML si nos encontramos más cómodos.

Viendo los contenidos
Por ahora se ha creado un contenido de ejemplo en modo borrador. Para poder
consultar cómo está quedando nuestro sitio web, podremos usar:
hugo server --theme=hugo_theme_robust -D

El comando nos indicará una página web en la que podemos ver los contenidos
desde nuestro navegador. Normalmente http://localhost:1313/.
Ya podremos ver nuestro sitio web. Si se instalan más temas, se podrá ver como
queda el sitio con los diferentes temas.
Vamos ahora a cambiar el el estado de la entrada que se ha creado de borrador a
publicada:
+++
date = "2017-04-07T01:04:36+02:00"
draft = false
title = "hola mundo"

+++
Hola mundo **esto** es un ejemplo.

Para ver el sitio definitivo se usará:

hugo server --theme=hugo_theme_robust

38
Importante: Cada vez que se haga una modificación en un fichero, deberemos
ejecutar el comando anterior para ver cómo ha cambiado el sitio.

Configurando los parámetros del sitio

El archivo config.toml contiene algunos datos básicos del sitio web:

baseurl = "http://replace-this-with-your-hugo-site.com/"
languageCode = "en-us"
title = "My New Hugo Site"
Deberemos cambiar estos parámetros en función de lo que se desee servir. En
baseurl se indicará el nombre de nuestro dominio o la ruta al sitio donde van a estar
alojadas nuestras páginas web. LanguajeCode el es idioma de nuestro sitio, por
último title es el título del sitio. Por ejemplo:

baseurl = "http://localhost/ejemplo1/"
languageCode = "es"
title = "Ejemplo de nuevo sitio"
Generando el sitio definitivo
Ejecutando:
hugo --theme=hugo_theme_robust
Se creará el sitio web en la carpeta public. Ahora lo podremos subir a nuestro
servidor favorito.

Taxonomías en Hugo – Parte 2

Publicado el 8 abril, 2017 por acisif
En una entrada anterior vimos cómo hacer un sitio muy básico en Hugo. Vamos a ver
más características de este gestor de contenidos.
Hugo permite definir taxonomías. Las taxonomías de Hugo son similares a las
categorías de WordPress. La idea básica consiste en definir unas etiquetas que

39
podremos asignar a nuestras entradas. Cuando hagamos clic sobre una de estas
etiquetas, se nos mostrarán todas las entradas que tengan esta etiqueta.
Las taxonomías, según el tema que estemos usando, se mostrarán en los laterales de
la página para que el usuario pueda hacer clic en ellas.
Un ejemplo, supongamos que se desea crear un periódico, este periódico tendrá
“Noticias” (ésta será nuestra taxonomía). Dentro de la taxonomía Noticias se podrán
crear otras etiquetas (términos en el lenguaje de Hugo) como pueden ser Local,
Nacional, Deportes,… Hugo generará un menú en el que aparecerá lo siguiente:
Noticias
- Local
- Nacional
- Deportes

y cuando hagamos clic en alguna de ellas, aparecerán las noticias que tengan
asignadas esas etiquetas.
Para crear una nueva taxonomía, deberemos introducir en al archivo “config.toml” lo
siguiente:

baseurl = "http://localhost/ejemplo1/"
languageCode = "es"
title = "Ejemplo de nuevo sitio"
[taxonomies]
Noticia = "Noticias"

Es decir, se introduce la sección “[taxonomies]” y dentro de la sección el nombre de

la taxonomía, seguido de la taxonomía en plural:
Noticia = "Noticias"

Ahora para introducir una etiqueta, término, nos iremos a la entrada

correspondiente y al principio de ella se añadirá la taxonomía y las etiquetas, dentro
de la taxonomía a la que pertenece a la entrada. Por ejemplo, si se tiene la entrada,
localizada en “content/post/hola-mundo.md” y se añade lo siguiente:

+++
date = "2017-04-07T01:04:36+02:00"

40
draft = false
title = "hola mundo"
Noticias = ["Mundo", "Deportes", "El tiempo"]
+++
Hola mundo **esto** es un ejemplo.
Tendremos que esta entrada pertenecerá a la taxonomía “Noticias” (sí se pone en
plural) y dentro de esta taxonomía a las etiquetas “Mundo”, “Deportes” y “El
tiempo”.
Así de sencillo.

Contenidos en Hugo – Parte 3

Publicado el 9 abril, 2017 por acisif
En esta serie de artículos sobre el gestor de contenidos Hugo, vamos a centrarnos en
la creación de los contenidos.
Con el comando:
hugo new

Se pueden introducir nuevas entradas en nuestro sitio web. Por ejemplo:

hugo new eldiario/noticia1.md

Dentro del directorio content, se habrá creado una carpeta llamada “eldiario” y allí
dentro un archivo con la extensión “md”, “noticia1.md”.
Ahora con:
hugo new eldiario/noticia2.md

Dentro del directorio eldiario/noticia se habrá creado “noticia2.md”.

Si ahora con el comando:
hugo server --theme=hugo_theme_robust -Dv

Visitamos el sitio web creado, se puede comprobar que aparecen noticia1 y noticia2,
y a cada una se les ha asignado la etiqueta “eldiario” (que coincide con el nombre

41
del directorio). Si se hace clic sobre el nombre de la etiqueta, nos mostrará todas las
noticias que tengan asignada esta etiqueta (notica1 y noticia2).
Si las comparamos con las taxonomías, en las taxonomías se creaba un menú con las
etiquetas que se habían introducido. En el caso de las etiquetas no.
Vamos ahora a introducir una imagen en una de las entradas que hemos creado. Las
imágenes las podemos poner en 2 lugares:
• En la carpeta en la que se introduce la entrada.
• En la carpeta static.

Por ejemplo, creamos una entrada nueva:

hugo new noticia/noticia1.md
Se creará la carpeta “content/noticia” y dentro de ésta “noticia1.md”.
Ahora ponemos una imagen en “content/notica”, por ejemplo, “imagen1.png”. Si
queremos hacer que esta imagen aparezca en la noticia, en el texto de la noticia
deberemos poner:

+++
date = "2017-04-09T15:35:01+02:00"
draft = true
title = "noticia1"
+++
En formato markdown
En formato html:
<img src='../imagen.png' />
Si nos fijamos, la referencia a la imagen la hacemos a la carpeta anterior
“../imagen.png”.
Si ahora, la imagen la ponemos en la carpeta static, la referencia deberá ser:

+++
date = "2017-04-09T15:35:01+02:00"

42
draft = true
title = "noticia1"
+++
En formato markdown
En formato html:
<img src='/imagen.png' />
Es decir a “/imagen.png”, los contenidos de static se copian directamente a la raíz
del sitio web.
Por último, si en static creamos la carpeta “img” y ponemos la imagen en
“static/img”, deberemos poner:

+++
date = "2017-04-09T15:35:01+02:00"
draft = true
title = "noticia1"
+++
En formato markdown
En formato html:
<img src='/img/imagen.png' />
Es decir, en la raíz del sitio web se va crear la carpeta “/img” y dentro de ella se
copiará la imagen.
Algunos temas soportan imágenes en las cabeceras de las noticias, para ello usamos
el parámetro thumbnail en la cabecera del documento:
+++
date = "2017-04-09T15:35:01+02:00"
draft = true
title = "noticia1"
thumbnail = "/imagen.png"
+++

43
Esta es la noticia 1.
Por último, vamos a dar un repaso a los directorios que se crean cuando se ejecuta
el comando “hugo new site” para crear un sitio nuevo:
• archetypes: Cuando se crea un nuevo contenido con el comando “hugo new”,
se añaden al artículo algunas configuraciones por defecto, como el título o la
fecha. Aquí se pueden definir las configuraciones por defecto que se van a
colocar.
• config.toml: Es el archivo de configuración del sitio web. Usa el lenguaje
TOML, aunque se pueden usar otros como JSON o YAML. En él se definen
cosas como el nombre del sitio, el idioma, la URL.
• content: Aquí se almacenan los contenidos que el usuario almacena en el sitio.
• data: Se usa para almacenar la configuración que Hugo usa para generar el
sitio web.
• layouts: Indica la forma en la que los contenidos van a ser transformados en
un sitio estático.
• static: Lo podemos usar para almacenar todos los contenidos estáticos del
sitio, como imágenes, Javascript, CSS, imágenes,… El contenido se copiará a la
raíz del sitio.
• themes: Son los temas que definen la apariencia que va a tener el sitio web.
Se pueden crear e instalar varios temas y cambiar de uno a otro. Hay muchos
temas disponibles para ser descargados y modificados.

Temas y plantillas en Hugo – Parte 4

Publicado el 17 abril, 2017 por acisif

En esta serie de artículos sobre el gestor de contenidos Hugo, vamos a centrarnos en
los temas.
En el siguiente enlace podemos ver cientos de ejemplos de temas para Hugo:
http://themes.gohugo.io/

44
Para instalarlos sólo hay que descargarlos y copiarlos en la carpeta themes de
nuestro sitio. Aunque la mayoría de los temas los podemos instalar usando el
comando git.
Algunos temas nos van a requerir alguna distribución especial de los contenidos o
introducir alguna configuración especial en el sitio. Esto lo podemos ver en las
descripciones de los temas.
Los temas se crean a través de las plantillas (Templates) de Hugo. Básicamente una
plantilla es un fichero html y en el que vamos a encontrar algunas etiquetas
especiales del tipo “{{ algo }}”.
Por ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>{{ .Title }}</title>
</head>
<body>
<h1>{{ .Title }}</h1>
{{ .Content }}
</body>
</html>

Esto es una plantilla html del lenguaje Go. Para ver una introducción a este lenguaje
podemos consultar la documentación de Hugo sobre las plantillas:
https://gohugo.io/templates/go-templates/
En el ejemplo anterior, se puede ver que aparece la etiqueta “{{ .Title }}”, que
lógicamente se reemplaza por el título cuando el sitio se construye. También
tenemos la etiqueta “{{ .Content }}”, que se reemplazará por el contenido.

Temas y layouts
Hay dos carpetas que nos var interesar la carpeta themes y la carpeta layouts.
Generalmente layouts estará vacía y cuando se tenga que crear un sitio, se tomarán
los archivos de themes y se usará el tema que se haya seleccionado. Puede ocurrir
que deseemos que independientemente del tema a utilizar, se use una determinada
configuración para la página de inicio (por ejemplo), podemos entonces crear

45
nuestra página de inicio en layouts que se usará independientemente del tema que
se vaya a poner por defecto.

Plantillas principales de Hugo

Tenemos la plantillas:
• Single: Representa cómo se va a dibujar una entrada o un elemento simple de
contenidos
• List: Representa cómo se va a dibujar una lista de contenidos.
• Homepage: Es la página de inicio de nuestro sitio.

Empecemos por la página de inicio, la vamos a entrar en el directorio

“themes/nuestro-tema/index.html”. Probad a editarla y veréis cómo se modifica la
página de inicio de vuestro sitio.
Según el tema, también deberéis tocar ciertos parámetros de la configuración para
cambiar ciertos elementos del tema.
Pero antes de continuar vamos a ver las posibilidades de las plantillas de Go.

Plantillas de Go
Variables
Hugo usa las plantillas del lenguaje Go para procesar el texto html de forma muy
rápida. Como ya se ha dicho, las plantillas van entre los símbolos {{ }}. Así, por
ejemplo, para obtener el valor de una variable ya definida se pondría:
<!DOCTYPE html>
<html>
<body>
{{ variable }}
</body>
</html>

Las variables que define Hugo, se pueden encontrar en:

http://gohugo.io/templates/variables/
Para definir el valor de una variable también se puede usar el símbolo $ delante de
la variable:

46
{{ $variable := "Hola mundo" }}

Después se obtiene su valor:

{{ $variable }}

Hugo también permite usar funciones, las funciones predefinidas se pueden

encontrar en:
http://gohugo.io/templates/functions/
Para usar una función simplemente se la llama por su nombre:
{{ función }}

Para pasar argumentos a una función, se ponen los argumentos separados por
espacios:
{{ add 1 2}}

La función add suma dos valores, en este caso devolverá 3.

Iteraciones
Las plantillas de Hugo permiten iterar entre los elementos de una array. Para ello se
usará “range”. Por ejemplo, para listar todos los elementos de un array:
{{ range $elemento := array }}
{{ $elemento }}
{{ end }}

Vamos a verlo funcionar, se abre el archivo index.html, dentro de nuestra carpeta

themes/tema, e introducimos:
{{ range $pagina := .Data.Pages }}
Títulos de páginas: {{ $pagina.Title }}<br/>
{{ end }}

Ahora al generar el sitio veremos el contenido que se ha introducido al ejecutar

“range”.
Se puede también acceder por contexto:
{{ range array }}
{{ . }}
{{ end }}

47
En el ejemplo que estábamos manejando:
{{ range .Data.Pages }}
Títulos de páginas: {{ .Title }}<br/>
{{ end }}

Por último, se pueden usar mapas, para iterar en el mapa se puede usar la siguiente
construcción:
{{range $índice, $elemento := array}}
{{ $índice }}
{{ $elemento }}
{{ end }}

En nuestro ejemplo:
{{ range $index, $page := .Paginator.Pages }}
{{ $index }}
{{ $page.Title }} <br/>
{{ end }}

Condicionales
La estructura if está soportada por la plantillas de Go. Por ejemplo:
{{ if lt 2 3 }}
Cierto
{{ end }}

que significa si 2 es menor que 3 escribe “Cierto”.

Disponemos de los comparadores:
• eq Devuelve verdadero si arg1 == arg2
• ne Devuelve verdadero si arg1 != arg2
• lt Devuelve verdadero si arg1 < arg2
• le Devuelve verdadero si arg1 <= arg2
• gt Devuelve verdadero si arg1 > arg2
• ge Devuelve verdadero si arg1 >= arg2

Se puede usar and y or para añadir nuevas condiciones, pero hay que tener en
cuenta que en la plantillas de Go los argumentos van siempre detrás de la función:
{{ if and (lt 2 3) (gt 3 2) }}
Cierto
{{ end }}

48
Por supuesto, la estructura if-else también se puede usar:
{{ if lt 3 2 }}
False
{{ else }}
Cierto
{{ end }}

Else if:
{{ if lt 3 2 }}
False
{{ else if gt 3 2 }}
Cierto
{{ end }}

Se puede usar not para negar una condición:

{{ if not lt 3 2 }}
Cierto
{{ end }}

Contextos
A veces tenemos que hacer referencia a objetos dentro de otros objetos y hay que
escribir mucho código. Una forma de hacer esta tarea más cómoda es usando with.
En el siguiente ejemplo, cada vez que nos refiramos a . dentro de la estructura with,
nos estaremos refiriendo a “.Params.title”:
{{ with .Params.title }}
<h4>{{ . }}>
{{ end }}

Tuberías
Se tiene algo similar a las tuberías UNIX, por ejemplo, supongamos la siguiente
operación matemática:
{{ add 5 (add 3 2) }}

Se podría escribir de la siguiente forma:

{{ add 3 2 | add 5 }}

Como se puede ver el resultado de la suma 3+2 se pasa como último argumento de
la siguiente operación “add 5”.

49
Se pueden encadenar varias tubería:
{{ add 3 2 | add 5 | add 4}}

Uso del operador . en contextos

El operador {{ . }} siempre se refiere al contexto actual. Nos sirve para llamar a
variables y a varibles dentro de variables (“.Params.title”). Dentro de un bucle {{ . }}
se referirá al valor del elemento actual. Si es necesario acceder al contexto global, se
puede usar $., por ejemplo:
{{ range .Data.Pages }}
Títulos de páginas: {{ .Title }}
{{ $.Site.Title }} <br/>
{{ end }}

Includes
Se puede incluir un archivo dentro de otro. Por ejemplo, podríamos tener en una
archivo la cabecera que queremos que aparezca en todas las páginas web de nuestro
sitio. En otro archivo el pie de página. En cada página que escribamos, podemos
incluirlos usando:
{{ partial "cabecera" . }}

Texto de la página

{{ partial "pie" . }}

De forma automática Hugo incluirá el pie y la cabecera en la página. Si hacemos una

modificación en la cabecera, todas las páginas en las que hayamos incluido la
cabecera, recibirán la actualización.
Para incluir archivos podemos usar el comando partial:
{{ partial "archivo" contexto }}

El archivo debe estar localizado en el directorio layout/partials. El contexto se refiere

a las variables a las que tendrá acceso el archivo incluido, normalmente acceden a
“.”.
Tenemos otra forma de incluir archivos usando template:
{{ template "archivo" contexto }}

50
La diferencia se encuentra en que el archivo a incluir deberá estar en layout. La
documentación de Hugo recomienda usar partial.
Si exploráis los temas de Hugo vais a ver buenos ejemplos del uso de partial.
Existe otra forma de incluir plantillas, la función “.Render”. Para introducir
contenidos con “.Render” sólo hay que incluir el nombre de la plantilla a utilizar. Por
ejemplo, para ver la plantilla “summary.html”:
{{ .Render "summary"}}

Eliminando espacios en blanco

Imaginad que el comando “.Title” devuelva un título con espacios en blanco y saltos
de línea antes y después, por ejemplo:
<h1>{{ .Title }}</h1>

e imaginad que la salida final fuera:

<h1>
Ejemplo de título
</h1>

Esta salida no es elegante ni cómoda de leer a la hora de editar código.

Usando el operador {{- -}} se pueden eleminar estos espacios:
<h1>{{- .Title -}}</h1>

La salida final sería:

<h1>Ejemplo de título</h1>

Paso de parámetros a las plantillas

Hugo tiene predefinidas una serie de variables que pueden ser útiles:
http://gohugo.io/templates/variables/
A través de los archivos de configuración o a través de metadatos, se pueden pasar
parámetros, definidos por el usuario, a las plantillas. Supongamos que se define la
sección params en el archivo “config.toml”. Dentro de esta sección definimos las
variables que necesitamos, por ejemplo:
baseurl = "http://localhost:1313"

51
languageCode = "es"
title = "Ejemplo de nuevo sitio"

[params]
ejemplo = "Ejemplo de valor definido"

Dentro de uno de los archivos del tema podremos introducir:

{{ .Site.Params.Ejemplo }}

y allí obtendremos el valor de la variable.

De forma similar se pueden definir variables en la cabecera de las entradas. Por
ejemplo, si se tiene la entrada “hola-mundo.md”, se podría introducir la variable
“Fecha”:
+++
date = "2017-04-07T01:04:36+02:00"
title = "hola mundo"
Fecha = true

+++

Hola mundo **esto** es un ejemplo.

Ahora se podría ir a la parte del tema correspondiente y hacer que si Fecha es true,
se muestre la fecha de esta entrada:
{{ if .Params.Fecha }}
{{ .Date.Format .Site.Data.Formats.date }}
{{ end }}

Como se puede ver usando “.Params.parámetro” se puede acceder al valor de la

variable.

Para terminar
Hasta aquí esta breve introducción a los temas Hugo. Un par de recomendaciones:
La primera, ver la documentación oficial de Hugo:
https://gohugo.io/templates/go-templates/
Por otro lado es bueno bajarse un tema y explorarlo y modificarlo. Veremos que se
usan cosas como “.Render” que llama a alguna plantilla para mostrar los contenidos.

52
Para no volvernos locos buscando los archivos se recomenda usar los comandos de
UNIX grep y find:
Con grep buscaremos los archivos que contengan algún tipo de texto que nos
interese:
grep -Re 'texto a buscar'

Por otro lado find nos ayuda a buscar archivos por su nombre:
find . -name "nombre del archivo"

En el nombre del archivo se pueden introducir wildchars como son el * y la ? que nos
ayudan a buscar los archivos de forma más cómoda.

53