Академический Документы
Профессиональный Документы
Культура Документы
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.
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
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
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
6 directories, 3 files
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
+++
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
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
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:
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"
+++
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.
11
De aquí en adelante yo ejemplificaré algunas opciones con un tema en particular:
bootstrap.
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"]
+++
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.
o
hugo new about/about.md
+++
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"
14
editamos su contenido:
+++
date = "2016-02-18T17:45:16-03:00"
#draft = true
title = "Licencia"
+++
15
Hugo themes
Simple-a
16
Robust
Base16
Ghostwriter
17
Vienna
Hyde-x
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/
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
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 .
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 = ""
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
+++
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>
24
Haz Divertida la Creación de
Sitios Web con Hugo
by Tom Whitbread
2 Febrero 2017 Difficulty:Beginner Length:Medium Languages: Español
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.
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.
27
Una vez que Hugo es instalado podemos probar la instalación ejecutando hugo
help en la terminal o hugo version
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.
+++
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
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.
Su uso es así:
hugo-gallery <Ruta de Acceso de Origen> <Sección de
Destino> <Título> [URLBase]
Por ejemplo:
$ hugo-gallery static/images/welding-photos welding
"Photos of my insane welding skills"
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"
+++
37
+++
date = "2017-04-07T01:04:36+02:00"
draft = true
title = "hola mundo"
+++
Hola mundo **esto** es un ejemplo.
Hola mundo
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.
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.
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.
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"
+++
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.
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
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.
+++
date = "2017-04-09T15:35:01+02:00"
draft = true
title = "noticia1"
+++
En formato markdown
![Esto es una imagen](../imagen.png)
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
![Esto es una imagen](/imagen.png)
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
![Esto es una imagen](/img/imagen.png)
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.
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 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>
46
{{ $variable := "Hola mundo" }}
Para pasar argumentos a una función, se ponen los argumentos separados por
espacios:
{{ add 1 2}}
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 }}
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 }}
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 }}
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) }}
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}}
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" . }}
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"}}
51
languageCode = "es"
title = "Ejemplo de nuevo sitio"
[params]
ejemplo = "Ejemplo de valor definido"
+++
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 }}
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