Primeros pasos con Astro-Theme-Aither

Esta guía te lleva desde cero hasta un blog multilingüe desplegado. Puedes leerla completa o saltar directamente a la sección que necesites.

Requisitos previos

• Node.js 22 LTS o superior
• pnpm 10 o superior
• Una cuenta de GitHub
• Una cuenta de Cloudflare para el despliegue

Instalación

git clone https://github.com/YOUR_USERNAME/YOUR_REPO.git
cd YOUR_REPO
corepack enable
pnpm install
pnpm validate
pnpm dev

Luego abre http://localhost:4321 en tu navegador.

Estructura del proyecto

src/
├── components/        # Componentes Astro y React
├── config/site.ts     # Nombre del sitio, navegación, pie de página y redes
├── content/posts/     # Artículos organizados por locale
├── i18n/              # Traducciones de la interfaz
├── layouts/           # Layouts
├── lib/               # Utilidades
├── pages/             # Rutas y páginas
└── styles/global.css  # Tokens de tema en Tailwind v4

Configuración

Site Config

src/config/site.ts es la fuente única de configuración del sitio:

1
export const siteConfig = {
2
  name: 'El nombre de tu blog',
3
  title: 'Tu eslogan',
4
  description: 'Tu descripción SEO',
5
  author: {
6
    name: 'Tu nombre',
7
    avatar: '',
8
  },
9
};

Elementos clave:

Variables de entorno

cp .env.example .env

Si una variable queda vacía, esa integración se desactiva sin tocar código.

URL del sitio

La URL de producción se configura en astro.config.mjs:

1
import { defineConfig } from 'astro/config';
2
import aither from '@aither/astro';
3

4
export default defineConfig({
5
  site: 'https://your-domain.pages.dev',
6
  integrations: [aither()],
7
});

Escribir artículos

Crea un archivo .mdx en src/content/posts/en/:

1
---
2
title: Mi primer artículo
3
date: "2026-03-14T16:00:00+08:00"
4
category: General
5
description: Resumen breve para SEO y vistas previas sociales.
6
tags: [Topic, Another]
7
pinned: false
8
---
9

10
Tu contenido empieza aquí.

Referencia de frontmatter

Componentes MDX

Puedes importar componentes dentro del contenido:

1
import MyChart from '@/components/MyChart'
2

3
<MyChart data={[10, 20, 30]} />

Internacionalización

El tema soporta 11 idiomas listos para usar. Para traducir un artículo, crea el mismo nombre de archivo en otra carpeta de locale:

src/content/posts/en/my-post.mdx
src/content/posts/es/my-post.mdx
src/content/posts/zh-hans/my-post.mdx

Los textos de la interfaz están en src/i18n/messages/.

Secciones de contenido personalizadas

Puedes añadir colecciones como traducciones, notas o tutoriales registrándolas en src/content.config.ts y src/config/site.ts. Después, las páginas de listado y detalle se generan automáticamente.

Theming

El sistema se divide en dos capas:

• Modo de color: light, dark, system
• Estilo del tema: default o estilos integrados como evolution

Configuración en src/config/site.ts:

1
ui: {
2
  defaultMode: 'system',
3
  defaultStyle: 'default',
4
  showMoreThemesMenu: true,
5
},

Los colores viven en src/styles/global.css. La tipografía base usa una pila sans-serif del sistema; las zonas de código usan una fuente monoespaciada.

SEO y AI

Cada página ya expone estas salidas útiles:

• /sitemap-index.xml
• /rss.xml
• /robots.txt
• /llms.txt
• /llms-full.txt
• /posts/slug.md
• JSON-LD y Open Graph

Despliegue

Cloudflare Pages

Como buena práctica, crea primero el proyecto de Pages. El flujo usa el nombre del repositorio por defecto, o CLOUDFLARE_PAGES_PROJECT_NAME si necesitas sobrescribirlo.

Configura estos secretos en GitHub:

• CLOUDFLARE_API_TOKEN
• CLOUDFLARE_ACCOUNT_ID

Después ejecuta pnpm validate y haz push a main.

Comandos útiles

Esquema de versiones

Los tags de release públicos siguen nombres estilo CalVer, por ejemplo v2026.04.08.