Cuando creas un sitio web, lo más importante es el contenido. Sin contenido, cualquier diseño o funcionalidad pierde sentido. Por eso, el primer paso para construir un buen proyecto es aprender a generar información clara y bien organizada.
Durante mucho tiempo, la forma más común de redactar contenido para la web fue utilizando HTML. Sin embargo, escribir directamente en HTML implica lidiar con una sintaxis compleja y rodear cada fragmento de texto con múltiples etiquetas. Esto hace que el documento sea menos legible y más difícil de mantener.
Para simplificar este proceso, hoy en día se emplea Markdown, un lenguaje de texto plano con un formato ligero y fácil de aprender, diseñado para aplicar estilo y estructura al contenido sin complicaciones, manteniendo la escritura limpia y legible.
Hugo, el generador de sitios estáticos del que estamos hablando, adopta Markdown como formato estándar para crear los artículos. Con Markdown puedes concentrarte en lo importante: escribir buen contenido, mientras Hugo se encarga de transformarlo en HTML y aplicarle el diseño correspondiente.
En este artículo descubrirás qué es Markdown y cómo utilizarlo en Hugo para redactar artículos bien organizados y atractivos. Aprenderás su sintaxis básica y algunos consejos prácticos para incorporarlo a tu flujo de trabajo.
Markdown es un lenguaje de marcado ligero que permite dar formato al texto de manera clara y sencilla. A diferencia del HTML, que utiliza etiquetas complejas, Markdown emplea una sintaxis mínima y fácil de aprender. Gracias a su simplicidad, el contenido en Markdown resulta legible incluso en su forma original, sin necesidad de procesarlo.
Una de sus principales ventajas es que el texto escrito en Markdown es limpio, portable y fácil de reutilizar. Esto significa que puedes compartirlo con otras personas sin convertirlo previamente a otro formato y sin riesgo de perder calidad.
Cuando trabajas con Hugo, los archivos en Markdown son la base del contenido. Tú escribes el artículo en texto plano con esta sintaxis ligera y Hugo se encarga de interpretarlo, generando automáticamente el código HTML necesario y aplicando el diseño definido por tu tema. De esta forma, tú te concentras en redactar contenido claro y bien estructurado, mientras Hugo se ocupa de la presentación.
Markdown no es exclusivo de Hugo. Es un estándar ampliamente adoptado, puedes reutilizar el mismo archivo en otras plataformas como Github, o exportarlo fácilmente a diferentes formatos como PDF o Word. Esto convierte a Markdown en una herramienta versátil y eficiente para la creación de contenido, no solo en proyectos web, sino también en cualquier entorno que requiera textos bien formateados.
Para empezar a escribir con Markdown, debes conocer sus elementos principales. A continuación de presento los mas importantes:
Los encabezados se crean con el símbolo #. Puedes usar hasta 6 niveles:
# Encabezado 1
## Encabezado 2
### Encabezado 3
#### Encabezado 4
##### Encabezado 5
###### Encabezado 6Y se ven así:
Un párrafo se crea escribiendo texto normal. Para un salto de línea, añade dos espacios al final de la línea o deja una línea en blanco.
Este es un párrafo.
Este es otro párrafo.Y se ven así:
Este es un párrafo.
Este es otro párrafo.
Para usar negrita, cursiva o tachado, debes poner esto:
**Esto es negrita**
*Esto es cursiva*
~~Esto es tachado~~Y se ven así:
Esto es negrita.
Esto es cursiva.
Esto es tachado.
Hay dos tipos de listas: listas ordenadas y listas no ordenadas.
Debes definirlas de esta manera:
- Elemento 1
- Elemento 2
- Sub-elementoY se ven así:
Debes definirlas de esta manera:
1. Primer item
2. Segundo item
1. Sub ItemY se ven así:
Debes definirlos así:
Pulsa en [LaTeclaESC](https://www.lateclaescape.com)Y se verán de esta manera:
Pulsa en LaTeclaESC
En Hugo, las imágenes suelen colocarse en la carpeta static/ o en la carpeta assets/. Luego se insertan en Markdown como:
Y se ven de esta manera:
Puedes poner una figura con leyenda:
{{< figure src="/img/hugo-logo.webp" title=“Logo de Hugo” >}}
Y veras esto:
Para citar texto, usa > al inicio:
> Esto es una cita inspiradora de un personaje muy importante.Y se verá de esta manera:
Esto es una cita inspiradora de un personaje muy importante.
Esto es un bloque de código
```
for (int i=0; i < 10; i++) {
printf("La variable i vale %d\n", i);
}
```Y se ve de esta manera:
for (int i=0; i < 10; i++) {
printf("La variable i vale %d\n", i);
}
Las tablas se codifican siguiendo esta estructura:
| Producto | Precio | Stock |
|----------|--------|-------|
| Hugo | 0 € | Sí |
| Theme | 0 € | Sí |
| Hosting | 5 € | No |Y se ven renderizadas de esta manera:
| Producto | Precio | Stock |
|---|---|---|
| Hugo | 0 € | Sí |
| Theme | 0 € | Sí |
| Hosting | 5 € | No |
Además de Markdown puro, Hugo ofrece shortcodes para añadir funcionalidades extra:
Para agregar un enlace de Youtube para un vídeo que tiene esta URL: https://www.youtube.com/watch?v=uTRGfX2vZ_A, en tu documento Markdown, puedes poner esto:
{{< youtube uTRGfX2vZ_A >}}
donde “uTRGfX2vZ_A” es el ID del vídeo de youtube, y verás el contenido enlazado dentro de tu página web:
Para crear una línea horizontal, puedes poner esto:
---Y lo verás es esta linea:
Markdown es un lenguaje sencillo pero muy potente. Dominarlo te permitirá crear artículos claros y bien estructurados. Y con los shortcodes de Hugo, podrás enriquecer fácilmente tu contenido con elementos dinámicos y vistosos.
Te animo a que prepares tu primer artículo en Markdown para practicar.
En el próximo artículo veremos cómo dar el siguiente paso: crear un tema básico para tu nuevo sitio web. Será la base sobre la que podrás construir un website a tu medida.
Pulso la tecla ESC, dos puntos wq!
Hugo es un generador de sitios web estáticos extremadamente rápido: puede crear un sitio completo en cuestión de décimas de segundo. Además, es flexible y modular, permitiendo personalizar desde el contenido hasta el diseño y la lógica de plantillas.
Articulo disponible en formato audiblog:
El framework Hugo es uno de los generadores de sitios estáticos más rápidos y versátiles del panorama actual.
Podrías instalar Hugo desde los paquetes oficiales disponibles en los repositorios de Linux, pero suelen estar desactualizados. Compilar el framework desde el código fuente ofrece varias ventajas: te da un control total sobre la versión que usas, te permite incorporar rápidamente las mejoras de la comunidad, te brinda la opción de modificar el código a tu gusto y, además, es una excelente oportunidad para aprender.
Go es un lenguaje que ha calado entre desarrolladores que buscan simplicidad, rendimiento y concurrencia sin complicaciones. En el artículo anterior hice una introducción al lenguaje Go. Hablé sobre sus principios de diseño y las razones por las que Go se ha convertido en una opción atractiva para proyectos de backend, microservicios o herramientas de línea de comandos.
Use the share button below if you liked it.
There's not much you can do without a CPU.