Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Code
  2. Static Websites
Code

Haz Divertida la Creación de Sitios Web con Hugo

by
Difficulty:BeginnerLength:MediumLanguages:

Spanish (Español) translation by Javier Salesi (you can also view the original English article)

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

¿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

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

Ésto creará una estructura para que puedas ver tu sitio en tu finder

Hugos default files

o en tu terminal vía el comando tree

Viewing the hugo files with tree in the terminal

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í
  • 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:

Ahora edita el archivo en content/post/first-post.md, contendrá algo similar a lo sigiente por defecto:

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

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

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:

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

A bare amount of themes are available for Hugo

Usando un Tema

Para usar un tema sólo inicia Hugo con el parámetro -t o --theme así

O puedes agregar a tu config.tom :

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!

The beg theme on your mobile device screen will work great
An example of the crisp theme from Hugos theme repository
An example of testing out a theme in Hugo with your first post

Así que ahora has generado un sitio web con un post hello world, ¿qué más podemos hacer?

Creando un Blog

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

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í

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

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:

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.

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!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.