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.jsonpara 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 bloquei18n. - 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.csspara 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:
npm run check:astroPrepara 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_KEYCF_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.
