Hugo: generador de sitios web estáticos de código abierto escrito en Go 107

¿Qué es Hugo?

Hugo es un generador de sitios web estáticos desarrollado con el lenguaje Go, rápido y muy flexible. Mediante su sistema de plantillas y una canalización de procesamiento de assets ultrarrápida, es capaz de renderizar un sitio web completo en cuestión de segundos. Hugo permite generar todo tipo de sitios web, como por ejemplo: sitios corporativos, gubernamentales, sin fines de lucro, educativos, de noticias, de eventos y de proyectos, sitios de documentación, portafolios de imágenes, páginas de aterrizaje, blogs comerciales, profesionales y personales, currículums, etc.

Principales funciones de Hugo

Canalización rápida de procesamiento de assets

• Procesamiento de imágenes: permite realizar conversiones, redimensionado, recorte, rotación, ajuste de color, aplicación de filtros, superposición de texto e imágenes, y extracción de datos EXIF.

• Empaquetado de JavaScript: transpila TypeScript y JSX a JavaScript, realizando empaquetado, tree-shaking, minificación, creación de source maps y aplicación de hashes SRI.

• Procesamiento de Sass: transpila Sass a CSS, realizando empaquetado, tree-shaking, minificación, creación de source maps, aplicación de hashes SRI e integración con PostCSS.

• Procesamiento de Tailwind CSS: compila las clases utilitarias de Tailwind CSS a CSS estándar, realizando empaquetado, tree-shaking, optimización, minificación, aplicación de hashes SRI e integración con PostCSS.

Framework flexible

• Hugo cuenta con soporte multilingüe y un potente sistema de taxonomías, y se utiliza ampliamente para crear sitios de documentación, landing pages, y sitios corporativos, gubernamentales, sin fines de lucro, educativos, de noticias, de eventos y de proyectos.

Servidor web integrado

• Durante el desarrollo, el servidor web integrado de Hugo permite ver al instante los cambios en el contenido, la estructura, el comportamiento y la presentación.

Módulos de Hugo

• Permite compartir con otros proyectos contenido, assets, datos, traducciones, temas, plantillas y configuraciones a través de repositorios Git públicos o privados.

Versiones de Hugo

Hugo se ofrece en tres versiones: estándar, extendida y extendida/deployment. Las versiones extendida y extendida/deployment incluyen funciones avanzadas, como la codificación de imágenes en formato WebP y la transpilación de Sass a CSS mediante LibSass integrado. La versión extendida/deployment también admite el despliegue directo del sitio en buckets de Google Cloud Storage, buckets de AWS S3 o contenedores de Azure Storage.

¿Cómo se utiliza Hugo?

1. Crear un nuevo sitio

Abre una terminal y ejecuta el siguiente comando para crear un nuevo sitio de Hugo:

hugo new site mynewsite
cd mynewsite

2. Añadir un tema

Puedes elegir un tema del repositorio de temas de Hugo y agregarlo a tu sitio. Tomando como ejemplo el tema hyde, utiliza el sistema de módulos de Hugo para importar el tema:

# Inicializar el sistema de módulos de Hugo
hugo mod init github.com/<your_user>/<your_project>
# Importar el tema en el archivo de configuración de Hugo
# Edita el archivo hugo.toml o hugo.yaml y añade el siguiente contenido
[module]
[[module.imports]]
path = "github.com/spf13/hyde"

3. Crear contenido

Utiliza el siguiente comando para crear un nuevo artículo:

hugo new posts/my-first-post.md

A continuación, edita el archivo Markdown generado content/posts/my-first-post.md y añade el contenido del artículo.

4. Desarrollo y previsualización

Durante el desarrollo, puedes utilizar el servidor web integrado de Hugo para ver en tiempo real los cambios en el contenido, la estructura, el comportamiento y la presentación. Ejecuta el siguiente comando para iniciar el servidor:

hugo server -D

La opción -D indica que se incluyan los artículos en borrador. Abre el navegador y accede a http://localhost:1313 para ver tu sitio.

Github:https://github.com/gohugoio/hugo