Configuración

Configuración

La configuración ocurre en varios niveles: el theme.config.ts central, el propio código y un puñado de variables de entorno en tiempo de compilación. Recorre los pasos de arriba abajo - cada uno se apoya en el anterior.

Astro es un framework frontend

Todo aquí se ejecuta en el cliente (salida estática, con renderizado bajo demanda opcional). Nunca guardes secretos ni lógica de backend en este proyecto - el trabajo sensible va en un servicio de backend real.

1. theme.config.ts

Marca, i18n, blog, promoción y llms.txt - todo totalmente tipado.

2. El código

Esto es un proyecto Astro real - el sitio web en sí lo construyes tú.

3. Variables de entorno

Unos pocos overrides de build como SITE_OVERRIDE y ROBOTS.

Paso a paso

Elimina lo que no necesitas

Si no usaste el comando create stardrive, elimina primero los archivos de demo y del repo. La guía de limpieza (trimming) está escrita para agentes de IA, pero también sirve para hacerlo a mano.

Haz tuyo el proyecto

Ajusta lo básico para reconocer el proyecto más tarde:

  • Actualiza el package.json para reflejar tu proyecto.
  • Pon al menos el título en el README.md.

Reemplaza favicons e imágenes sociales

Sustituye los archivos de icono en ./public/ (nos gusta realfavicongenerator.net). El manifiesto web se genera desde theme.config.ts, así que solo reemplazas imágenes. Reemplaza también los fallbacks sociales og.png, x.png y structured-preview.png en ./public/images/.

Favicons claro y oscuro

Stardrive incluye iconos separados para claro/oscuro. Si no lo necesitas, elimina las variantes oscuras y ajusta ./src/components/head/base.astro. Para el SVG, gestiona claro/oscuro directamente en el código del SVG.

Configura theme.config.ts

Es el corazón de la configuración. Todo está tipado, así que tu IDE muestra la documentación en línea. Sigue este orden:

  • Define la información base (URL del sitio, color primario, …).
  • Decide tus idiomas, añade un archivo JSON por idioma en ./src/i18n/ y conecta el bloque i18n.
  • Elige tus expressiveCodeThemes - uno para modo claro y otro para modo oscuro.
  • Configura los valores por defecto del blog (y reemplaza la imagen de fallback si la usas).
  • Activa o desactiva los espacios de promoción.
  • Define cómo se genera llms.txt.

Fuentes y base de Tailwind

Stardrive incluye Geist vía Fontsource. Cámbiala por la tuya (npm un @fontsource/geist y luego instala la tuya). Ajusta las declaraciones de importación en los archivos de layout. Después ajusta./src/styles/tailwind.config.css:

  • Actualiza la sección de fuentes.
  • Ajusta los colores de marca (cambia los hex; elimina líneas solo cuando ya no quede contenido de demo).
  • Retoca los breakpoints si quieres.

Añade tus estilos por capas

Amplía los archivos CSS en ./src/styles/ siguiendo la convención de capas:

  • Tailwind como base.
  • global.css para reglas propias y estilos de fuente única de verdad (p. ej. botones).
  • Archivos CSS específicos de página (p. ej. long-text-content.css), importados por página.
  • Lo muy personalizado queda limitado al alcance de la página o el componente.

Elimina idiomas no usados

Borra las subcarpetas en ./src/content/ y ./src/pages/ de los idiomas que no soportes. ¿Un solo idioma? También puedes eliminar ./src/pages/[lang] y los componentes del selector de idioma.

Construye tus páginas y navegación

Da forma a tu estructura en ./src/pages/ (un archivo por ruta). Las páginas que solo difieren por cadenas traducidas van en [lang]; las páginas con textos largos o distintos tienen una subcarpeta de idioma explícita con contenido escrito directamente. Luego ajusta la navegación en ./src/components/layout/nav/ y los demás archivos de layout.

Traducciones de contenido

Mientras construyes el layout, mantén los archivos JSON de ./src/i18n/ sincronizados con tu proyecto.

Cambia el contenido de demostración

Reemplaza las imágenes de demo en ./src/images (¡mantén la estructura de carpetas!), actualiza o elimina el./public/map/office.pmtiles usado en la página de contacto de demo, y revisa los metadatos Open Graph / X en./src/components/head/ogx.astro.

Después valida todo:

Detecta enlaces rotos tras la limpieza
npm run check:astro

Prepara el despliegue

En Cloudflare, ajusta _headers y _redirects en ./public/ y elwrangler.jsonc, y enlaza tu repositorio con un Worker. En migraciones, mapea las rutas antiguas en _redirects. ¿No usas Cloudflare? Configura tu hosting en consecuencia.

Purga de caché en Cloudflare

Define CF_PURGE_API_KEY y CF_PURGE_ZONE_ID y ejecuta npm run purge:cloudflaretras cada build. Activa también Media → Images → Transformations en tu panel de Cloudflare.

Desactiva Speed Brain

Desactiva Speed Brain en tu panel de Cloudflare (Speed → Optimization → Speed Brain). Stardrive incluye su propia lógica de prefetch de Astro, que entra en conflicto con Speed Brain y puede provocar peticiones duplicadas, contenido obsoleto o navegación rota.

Variables de entorno en tiempo de compilación

SITE_OVERRIDE
Sobrescribe la URL global del sitio. Útil para entornos de desarrollo.
ROBOTS
Sobrescribe la configuración de robots por defecto. Los ajustes a nivel de página siguen teniendo prioridad.
CF_PURGE_API_KEY
CF_PURGE_ZONE_ID
Necesarias para el script de purga de caché de Cloudflare.
ADD_TO_CALENDAR_PRO_API_KEY
Activa el adaptador preconfigurado para eventos inyectados dinámicamente.

¿El sitio funciona? Hora del contenido.

Aprende los flujos del día a día: blog, FAQ, integraciones, precios y eventos.

Guía