Tutorial de Hugo en español, generador de sitios estáticos

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.

hugo

Los generadores más populares son:

Nombre Lenguaje Plantillas Licencia Sitio web
Jekyll Ruby Liquid MIT http://jekyllrb.com
Hexo JavaScript EJS y Swig MIT http://hexo.io
Hugo Go Go Template, Acer y Amber Apache http://gohugo.io
Pelican Python Jinja2 GPL http://blog.getpelican.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 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:

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

Si queremos tener coloreado de sintaxis podemos usar Pygments. Si tienes PIP instalado es fácil.

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

Y con esto ya tenemos Hugo instalado correctamente. Ejecuta:

hugo-themes

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.

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 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.

[toml]
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”
[/toml]

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, {}

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 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í.

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:

O un enlace dentro de nuestra web:

Programando para Haiku – BApplication, BWindow y BButton – Parte I

Hoy voy a comenzar una serie de tutoriales donde explicaré la programación de una apliación en Haiku. Para ello vamos a usar C++ y la BeAPI. Siempre que tengais cualquier duda podéis visitar la documentación oficial: tanto la antigua de BeOS en el BeBook y la nueva de Haiku en Haiku API. Aun así hay APIs nuevas que todavía no aparecen documentadas. En ese caso hay que recurrir al código fuente.

Librerías en Haiku

Haiku (y BeOS) comparte con UNIX muchas características de bajo nivel. El tema de las librerías es uno de ellos. También han de empezar por lib y terminar por .so si son compartidas y .a si son estáticas. Para compilar también se usa GCC. Sin embargo hay una pequeña diferencia con el resto de sistemas UNIX. En UNIX normalmente disponemos de una librería del C, libc y una librería de funciones matemáticas, libm. En Haiku no existe libm, en cambio existen muchas más, libroot y libbe, para interactuar con el sistema de manera básica, libtracker, con funciones relacionadas con el explorador de archivos, libnetwork y libnetapi, con funciones de red, y muchas otras.

Además la API se divide en Kits, cada Kit se encarga de una tareas diferentes dentro del sistema operativo. AppKit, Game Kit, Interface Kit, Media Kit, Storage Kit, etc… Si queremos usar la funcionalidad de un kit tendremos que revisar que hemos añadido la librería correcta al compilador y que hemos añadido #include dentro del código que lo usemos.

Un hola mundo

Vamos a empezar por lo simple, una aplicación que muestre una ventana y ya.

Creamos un archivo de C++, será el punto de inicio de nuestra aplicación. Como sabéis, el punto de inicio de un programa de C o C++ es la función main.

Hemos creado un objeto llamado app del tipo AplicacionPrueba y después hemos ejecutado la aplicación. AplicacionPrueba tiene que ser del tipo BApplication. Es la clase básica de todas las aplicaciones Haiku/BeOS. BApplication provee de mensajería entre los distintos procesos del programa (hay que tener en cuenta que BeOS se diseñó pensando en el multiproceso). Vamos a ver como definimos AplicacionPrueba

Las Application necesitan un MIME type, al igual que se usa para indicar los tipos de archivo. No es necesario que sea real. Además hemos creado un objeto VentanaPrueba y la mostramos. VentanaPrueba es del tipo BWindow y es la ventana básica de Haiku, lo que vemos. Veamos la definición:

BWindow necesita un tamaño, que es indicado con BRect, un título, un estilo (por defecto es BTITLEDWINDOW, pero podemos tener ventanas sin bordes o modal) y opciones varias. En las opciones varias podemos especificar que al cerrar la ventana se cierre la aplicación (BQUITONWINDOWCLOSE), que el usuario no pueda cambiar su tamaño (BNOTRESIZABLE), que no se pueda minimizar (BNOTMINIMIZABLE) y otras opciones por el estilo.

Además dentro de la clase hemos definido dos funciones virtuales, es decir, que tienen implementación por defecto de la clase padre, BWindow, pero nosotros podemos modificar su comportamiento.

QuitRequested es llamada cuando algo pide el cierre de la ventana. El objeto global beappmessenger es del tipo BApplication, pero está definido en todos los puntos de nuestra aplicación sin que nosotros hagamos nada. Gracias a este objeto podemos enviar mensajes entre procesos. En este caso enviamos el mensaje a la aplicación de BQUITREQUESTED. Y luego llamamos a la función sin modificar.

MessageReceived es muy importante. Se encarga de procesar todos los mensajes que recibe la ventana. Para distinguir los mensajes (que son del tipo BMessage) tenemos que inspeccionar la propiedad what. Se trata de un valor de tipo uint32. Hay algunos ya definidos por el sistema como BQUITREQUESTED pero nosotros podemos definir más. Veremos más tarde como. De momento simplemente devolvemos el procesado de mensajes a BWindow padre.

Con esto ya podemos compilar.

Añadiendo BView, BButton y BGroupLayout

Ahora vamos a añadir cosas a nuestra ventana sosa. Ponemos una vista dentro de la ventana. Las vistas en Haiku son muy potentes pero eso lo trataré en otro momento. A esa vista le añadiremos un botón.

Aquí hemos hecho varias cosas. Por una parte he creado un layout horizontal. Es decir, dispongo el espacio de la ventana de manera horizontal, según se vayan añadiendo elementos lo harán a la derecha. Esto no estaba en BeOS y es particular de Haiku, pero recomiendo usar este sistema pues permite realizar un responsive design. Creamos una vista o panel. Bounds() indica que cubra todo el espacio disponible. El resto son propiedades de la vista más o menos estándar. Con SetViewColor le podemos poner un color de fondo, y con SetLayout le aplicamos el layout previamente creado.

Creamos un botón, que es del tipo BButton. BButton tiene muchos constructores si revisais la documentación pero este es muy cómodo si usamos el sistema de layouts. Simplemente indicamos el texto que va a mostrar y el mensaje que envía. En este caso NULL pues no vamos a poner ninguno.

sizer->AddView() lo usamos para añadir el botón al layaout y AddChild para añadir la vista a la ventana. Puedes compilar.

Añadiendo eventos. Mensajería con BMessage. Diálogo con BAlert.

Vamos ahora a crear un evento para el botón. Cuando pulsemos el botón mostrará un mensaje al usuario.

Los eventos se realizan por el sistema de mensajería basado en BMessage y BHandler. Para crear un BMessage necesitamos un ID, que es del tipo uint32. Eso es lo mínimo y con eso ya serviría para este caso.

Pero los mensajes pueden llevar información adicional de cualquier tipo. Por ejemplo si queremos añadir además una cadena de texto al mensaje usaremos AddString.

Podremos recuperar el valor en cualquier momento con FindString.

Ahora si vamos a MessageReceived podemos añadir código que gestione este tipo de mensaje.

Con un simple case gestionamos el mensaje. Para mostrar un diálogo simple se puede usar BAlert. Es muy simple, indicamos el título, el contenido del mensaje y el texto del botón que aparecerá. Y con Go lo mostramos.

Esta ha sido la primera parte del tutorial. Os ha gustado. Hay algo que no haya quedado claro. Comentádmelo.

Valladolid Hyperlapse

La gente de Novaer ha hecho un hyperlapse de Valladolid, la ciudad que me vio nacer y donde actualmente resido. Me ha gustado bastante y por eso os lo traigo, porque Valladolid no tiene fama de ser ciudad turística pero sigue siendo muy bonita. Quizá no tanto como Salamanca o Segovia, pero bonita igualmente.

El Universo Mecánico

Hoy voy a recomendaros una excelente serie documental sobre física. El Universo Mecánico.

eluniversomecanico

La serie se organiza en 52 episodios, todos ellos muy interesantes, con una misma estructura. El profesor de CalTech (doctor David L. Goodstein) desde su clase con alumnos hará una introducción al tema en cuestión. Puede que haga un experimento, cuente una historia o incluso lea un poema. Después un narrador nos explicará la teoría, apoyándose de ejemplos, ecuaciones en pantalla y gráficos 3D (revolucionarios para la época).

El Universo Mecánico no es una serie superificial, no incide mucho en las ecuaciones, pero los conceptos pueden ser algo avanzados, dependiendo del nivel que tenga el espectador. De todos modos, la serie cuenta con un par de capítulos instrumentales donde se explican los conceptos de vector, derivada e integral, que pueden servir al espectador que no domine estos conceptos matemáticos.

movingcircles

La serie no se deja prácticamente nada de la física, veremos desde partículas elementales hasta las ecuaciones de Maxwell pasando por óptica, temperatura, magnetismo, electricidad, gravitación, conservación del momento, ondas, movimiento armónico simple, …

Aprenderemos no solo fórmulas y ecuaciones con sentido (o sin él) sino que comprenderemos la genialidad intrínseca de cada teoría. Veremos que no hay verdades inamovibles, que nunca podemos olvidar la historia y que aunque al final del día esa magnífica ecuación nos sirva para mandar esa nave a la luna, lo subyacente, lo real en sí, no es eso. La realidad es la realidad y nosotros nos intentamos acercar a ella con modelos matemáticos. Y como muchas veces hemos visto que dos cosas bien distintas (aparentemente) en realidad son el mismo efecto de la realidad. ¿Qué es una fuerza? Solamente un concepto teórico, que no existe en la realidad, para explicar algo que sucede en nuestro universo.

Pero aprenderemos además que todo está relacionado con todo, el arte, la poesía, la política, la filosofía y la física no son más que divisiones, en cierto modo arbitrarias que hacemos los humanos dentro de una realidad que no tiene divisiones, que no “colecciona sellos”.

Para mí, una de las mejores series documentales de ciencia.

The Everything Building

The Everything Building es un juego que fue presentado al Ludum Dare 34. Ludum Dare es una game jam, la más popular quizá. Se trata de hacer un juego en 72 horas. Normalmente hay un tema para el juego y si te ciñes a él podrás optar a ganar en más categorías. El tema de esta vez fue “Two game controls” (dos controles). The Everything Building quedó segundo en la general aunque en la categoría de diversión ganó.

elevator

¡Probadlo! A mí me ha encantado, es un gran juego. Con solo dos controles (flecha arriba, flecha abajo) controlamos un ascensor. Tenemos que llevar a la gente de una planta a otra. Si hay demasiada gente espereando perdemos. Hasta ahí parece simple pero el tipo de personas que montan en el ascensor tiene efectos sobre el resto. Por ejemplo, existen las parejitas, con un corazón encima, que no van a revelar su planta hasta que no se encuentren con su pareja. Están los zombies que ahuyentan a la gente. Los perros ocupan poco espacio y entran 4 mientras que coches solo entran 1. Si llevas payasos con globos te será más fácil subir y más difícil bajar. Este comportamiento a la inversa si coges a un fortachón. Hay un personaje que puede cambiar el tipo de establecimiento de esa planta (que en definitiva es lo que genera los personajes especiales) y que nos puede servir para jugar táctico.

En el apartado técnico no hay ningún reproche, es ligero, tiene un diseño pixel art bellísimo, la música acompaña perfectamente y la jugabilidad está ajustada, ¡perderás en el mejor momento!

En definitiva, jugadlo, es de lo mejorcito que he visto en HTML5.

Mis felicitaciones a Olli Ethuaho, Kimmo Keskinen, Sakari Leppä, Valtteri Heinonen y Anastasia Diatlova. El código está en GitHub: https://github.com/Oletus/elevator