Cómo reconstruí mi sitio personal con Nuxt 4 y Firebase
Mi antiguo sitio era un único archivo HTML estático. Así es cómo y por qué lo reconstruí con Nuxt 4, Tailwind CSS, Firebase Hosting y un sistema multilingüe personalizado que cubre 10 idiomas.
El sitio antiguo
Durante mucho tiempo, mi sitio personal fue un único archivo `index.html`. Mínimo y rápido — pero no escalable. Decidí hacer una reconstrucción completa.
Por qué Nuxt 4
- Generación estática — `nuxt generate` produce salida estática compatible con Firebase Hosting
- Enrutamiento basado en archivos — Las páginas de artículos en `/news/[slug]` funcionan sin configuración
- TypeScript primero — Todo el código base está tipado
- SSR + hidratación — Ideal para SEO
El stack
- Nuxt 4 con estructura de directorio `app/`, SSR con generación estática
- Tailwind CSS — Estilos utility-first
- Firebase Hosting — CDN global, despliegues sencillos
- i18n personalizado — Un composable propio usando `vue-i18n`
- Rutas de servidor Nitro — Artículos como archivos JSON locales
El sistema multilingüe
El sitio soporta 10 idiomas. Evité deliberadamente `@nuxtjs/i18n` y escribí un composable `useI18n()` que lee desde una cookie `locale`.
Artículos como JSON local
Cada artículo es un archivo JSON con un objeto `translations` — una entrada por locale con `title`, `summary` y `body` en Markdown.
SEO y prerrenderizado
Un hook `nitro:config` lee el directorio `content/articles/` antes del build y añade cada ruta `/news/[slug]` a la lista de prerrenderizado.
Lo que sigue
El sitio tiene ahora enrutamiento adecuado, un feed de noticias y soporte multilingüe completo.