Cómo crear un blog bilingüe con Hugo

Introducción

En el mundo globalizado de hoy, tener un blog bilingüe puede ampliar significativamente tu audiencia. Hugo, el popular generador de sitios estáticos, ofrece soporte integrado para sitios multilingües. En esta guía, te mostraré cómo configurar un blog bilingüe usando Hugo.

Requisitos previos

Antes de comenzar, asegúrate de tener:

Hugo instalado (versión 0.60 o superior)
Conocimientos básicos de la línea de comandos
Un editor de texto

Configuración paso a paso

1. Crear un nuevo sitio Hugo

Primero, crea un nuevo sitio Hugo:

hugo new site mi-blog-bilingue
cd mi-blog-bilingue

2. Configurar idiomas

Abre tu archivo config.toml y agrega la configuración de idiomas:

baseURL = "https://ejemplo.com/"
title = "Mi Blog Bilingüe"

[languages]
  [languages.en]
    languageName = "English"
    contentDir = "content/en"
    weight = 1
  
  [languages.es]
    languageName = "Español"
    contentDir = "content/es"
    weight = 2

3. Estructura de contenido

Crea directorios de contenido para cada idioma:

mkdir -p content/en
mkdir -p content/es

4. Agregar contenido

Crea un artículo de muestra en inglés:

hugo new en/posts/primer-articulo.md

Y su versión en español:

hugo new es/posts/primer-articulo.md

5. Configurar el menú de cambio de idioma

Agrega un menú de cambio de idioma en tu plantilla:

{{ if .IsTranslated }}
<select onchange="location = this.value;">
  {{ range .Translations }}
  <option value="{{ .Permalink }}" {{ if eq .Language $.Language }}selected{{ end }}>
    {{ .Language.LanguageName }}
  </option>
  {{ end }}
</select>
{{ end }}

Conclusión

¡Felicidades! Ahora tienes un blog bilingüe completamente funcional con Hugo. Tus lectores pueden cambiar fácilmente entre idiomas usando el menú desplegable. Recuerda mantener el contenido sincronizado entre idiomas para una mejor experiencia de usuario.

Recursos adicionales

¿Tienes preguntas? ¡Déjalas en los comentarios a continuación!