Temas Busca lo que quieras

Blog | Web

Hugo, el generador de sitios estáticos libre

| 28 de noviembre de 2018

Hoy vamos a hablar sobre Hugo, un framework de Go para crear sitios web. Últimamente en LC3 estamos trabajando mucho con este generador de sitios estáticos, especialmente construyendo la página de Vacaciones en Toledo que aún está en construcción.

Hugo logo

¿Qué es Hugo?

Hugo es un generador de sitios estáticos. Probablemente sea el generador libre más popular a día de hoy. Funciona de una forma bastante simple.

Una vez creado el contenido de la página en markdown se sube al servidor y este lo compila creando html estáticos que tienen tiempos de cargas muy reducidos, especialmente si los comparamos con otras tecnologías como WordPress, que tienen que renderizar simultáneamente varias páginas para que queden como una sola.

Las ventajas de Hugo

Además de poder crear sitios estáticos de una manera muy simple, este framework consta de muchísimas más ventajas.

Es fácilmente customizable, por lo que puedes crear una página de acuerdo a tu imagen corporativa con menos esfuerzo que con otras tecnologías. Tiene unas reglas muy flexibles que hacen que puedas moldear fácilmente un tema.

No obstante si no puedes realizar un tema de cero por tiempo o dinero puedes escoger uno de los más de cien temas que ofrecen que ya están realizados.

Además es muchísimo más rápido como hemos comentado anteriormente. Tanto en la carga del sitio en sí como el la construcción del sitio una vez está subido al servidor.

Es un framework que está preparado para la internacionalización de las páginas. Tiene soporte i18n de sitios políglotas.

Distribución de carpetas de Hugo

Hugo tiene una distribución de carpetas que hacen que el sitio cree dinámicamente las páginas estáticas.

Archetypes

Es la carpeta que guarda los archivos básicos a la hora de creación de plantillas de los contenidos.

Los archivos tienen extensión .md y una cabecera que se puede realizar tanto en toml (por defecto viene en este formato), en yaml o en json.

---
title: "{{ replace .Name "-" " " | title }}"
date: {{ .Date }}
draft: false
---

Se pueden modificar estas plantillas por defecto cambiando estos valores y/o añadiendo los campos que necesitemos.

Content

Básicamente es donde se creará guardará todo el contenido, desde los posts, las páginas hasta las imágenes y todo el “media”.

Data

Es donde se almacenan datos adicionales a la hora de crear el sitio. Un ejemplo de esto son jsons con datos a los que luego se puede acceder.

El formato de estos ficheros puede ser tanto en json como toml o yaml.

Layouts, static y themes

Son las salidas personalizadas para tu sitio. En el post que hagamos más adelante sobre theming hablaremos más en profundidad de estas carpetas.

config

Es el fichero de configuración del sitio y de parametrización de la web. En él indicamos tanto el título del sitio como el código de idioma, el tema…

Conclusión

Hugo es un framework muy potente que nos puede ayudar a hacer pequeñas webs. Con un pequeño conocimiento sobre markdown y git incluso podemos tener un blog que podamos actualizar.

Se puede personalizar casi hasta el infinito y podemos disfrutar de esta tecnología tan rápida para casos concretos en los que una web estática sea ideal.

Email this to someone
email
Tweet about this on Twitter
Twitter
Share on LinkedIn
Linkedin
Share on Tumblr
Tumblr

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *