👋 Hello World

Bienvenido a Astro-Theme-Aither.

Este es un tema de blog construido sobre una creencia: la buena escritura merece buena tipografia. Encabezados en serif, un ritmo de lectura limpio y un layout que no estorba. Todo aqui sirve un unico objetivo: hacer que tus palabras se vean y se sientan hermosas.

Por que otro tema de blog

La web esta llena de temas de blog, asi que una pregunta justa es: por que construir otro? La respuesta se reduce a las prioridades. La mayoria de los temas optimizan para el impacto visual — grandes imagenes hero, layouts complejos, transiciones animadas. Se ven impresionantes en una demo pero estorban cuando alguien se sienta a leer un articulo de 2,000 palabras.

Astro-Theme-Aither parte de una premisa diferente. El contenido es el producto. El trabajo del tema es presentar ese contenido con el cuidado que merece: combinaciones de fuentes meditadas, espacios en blanco generosos y un ritmo vertical que hace la lectura larga comoda en lugar de agotadora.

Esta filosofia se extiende tambien a las decisiones tecnicas. El tema distribuye aproximadamente 0.5 KB de JavaScript del lado del cliente — justo lo necesario para el toggle del tema. Todo lo demas es HTML estatico y CSS. Sin layout shifts, sin spinners de carga, sin frameworks JavaScript hidratandose en segundo plano. La pagina carga y tu lees.

Comenzar

Ponerse en marcha toma solo unos minutos. Aqui esta el proceso completo:

Clona el repositorio — usa el boton de template de GitHub o clona directamente con git clone
Instala las dependencias — ejecuta pnpm install para descargar todos los paquetes
Configura tu sitio — edita src/config/site.ts para establecer el titulo del sitio, la descripcion y los enlaces de navegacion
Reemplaza el contenido de ejemplo — cambia los posts en src/content/posts/ por tus propios archivos Markdown
Comienza a desarrollar — ejecuta pnpm dev para lanzar el servidor de desarrollo local con hot reloading
Despliega — haz push a GitHub y deja que el workflow CI incluido maneje el despliegue a Cloudflare Pages

Estructura del proyecto

El codebase esta organizado para ser inmediatamente comprensible:

src/
├── components/     # Componentes Astro reutilizables
├── config/         # Configuracion del sitio
├── content/        # Tus posts Markdown y contenido
├── layouts/        # Layouts de pagina (Layout.astro)
├── pages/          # Paginas de rutas
└── styles/         # CSS global con tokens Tailwind v4

Cada directorio tiene una responsabilidad clara. Los componentes son pequenos y componibles. Los layouts manejan el envoltorio del documento. Las paginas definen rutas. El contenido alberga tu escritura. No hay magia — solo archivos bien organizados.

Escribiendo tu primer post

Crea un nuevo archivo .md en src/content/posts/ con el siguiente frontmatter:

---
title: El titulo de tu post
date: 2026-01-15
category: General
description: Un breve resumen para SEO y previsualizaciones sociales
tags: [Tema, Otro]
---

Tu contenido comienza aqui.

Los campos title, date y category son obligatorios. El campo description es altamente recomendado porque llena el tag meta description y las previsualizaciones Open Graph. Los tags son opcionales pero ayudan a los lectores a descubrir contenido relacionado.

Lo que obtienes

De serie, tienes una plataforma de blogging lista para produccion con cada caracteristica que necesitas y nada de lo que no.

Caracteristicas de contenido

Feed RSS — generado automaticamente en /rss.xml, compatible con cada lector de feeds
Sitemap — auto-generado via @astrojs/sitemap para indexacion en motores de busqueda
Meta tags SEO — Open Graph, Twitter cards y URLs canonicas en cada pagina
Modo oscuro — toggle de tres vias (Claro / Oscuro / Sistema) con persistencia localStorage
Paginas de categorias y tags — archivos organizados para navegar por tema

Caracteristicas para desarrolladores

TypeScript en todas partes — strict mode, componentes y utilidades completamente tipados
Content Collections — sistema integrado de Astro para Markdown type-safe con validacion de frontmatter
Tailwind CSS v4 — usando tokens de diseno @theme para facil personalizacion de colores, fuentes y espaciado
Vitest + Playwright — tests unitarios y end-to-end ya conectados al pipeline CI
Cloudflare Pages — workflow de despliegue con URLs de preview automaticas para PRs
Google Analytics — opcional, aislado en un Partytown Web Worker para nunca bloquear el hilo principal

Rendimiento

Como el tema produce HTML estatico con JavaScript minimo, el rendimiento es excelente por defecto. Puedes esperar puntuaciones Lighthouse de 100 en todos los aspectos — Performance, Accessibility, Best Practices y SEO. No hay nada que optimizar porque no hay nada innecesario.

Personalizacion

El tema esta disenado para ser tuyo. Las personalizaciones mas comunes son directas:

Colores — edita las propiedades CSS personalizadas en src/styles/global.css para cambiar toda la paleta
Fuentes — intercambia los valores de font-family en la configuracion del tema Tailwind
Navegacion — actualiza el array de enlaces de navegacion en src/config/site.ts
Analytics — agrega tu ID de medicion de Google Analytics en la configuracion del sitio

Para cambios mas profundos, la arquitectura de componentes es deliberadamente simple. No hay abstracciones profundamente anidadas ni patrones complejos de gestion de estado. Cada componente hace una cosa, lee sus props y renderiza HTML.

Una nota sobre la filosofia de diseno

La simplicidad visual de este tema es intencional, pero no es lo mismo que simplicidad de ingenieria. Bajo el capo, el tema maneja un numero sorprendente de aspectos: escalas tipograficas responsivas, relaciones de contraste de color accesibles en modos claro y oscuro, estructura HTML semantica correcta, jerarquia de encabezados correcta y atencion cuidadosa a la experiencia de lectura en pantallas que van desde telefonos hasta monitores ultrawide.

El buen diseno es invisible. Cuando lees un articulo en este tema y simplemente disfrutas la escritura sin notar el tema en absoluto — ese es el diseno funcionando exactamente como fue planeado.

Feliz escritura.