Resumen de la configuración

Astro es un framework flexible y neutral que te permite configurar tu proyecto de muchas formas diferentes. Esto significa que empezar con un nuevo proyecto puede resultar abrumador: ¡no hay una “única manera correcta” de configurar tu proyecto de Astro!

Las guías en la sección de “Configuración” te ayudarán a familiarizarte con los distintos archivos que te permiten configurar y personalizar diversos aspectos de tu proyecto y de tu entorno de desarrollo.

Si este es tu primer proyecto con Astro, o si hace tiempo que no configuras un proyecto nuevo, consulta las siguientes guías y la documentación de referencia para obtener ayuda.

El archivo de configuración de Astro

El archivo de configuración de Astro (EN) es un archivo JavaScript que se incluye en el directorio raíz de cada proyecto inicial:

import { defineConfig } from 'astro/config';

export default defineConfig({
  // tus opciones de configuración aquí...
});

Solo es necesario si tienes algo que configurar, pero la mayoría de los proyectos usarán este archivo. La función auxiliar defineConfig() proporciona IntelliSense automático en tu IDE y es donde añadirás todas tus opciones de configuración para indicar a Astro cómo compilar y generar tu proyecto en HTML.

Recomendamos utilizar el formato de archivo predeterminado .mjs en la mayoría de los casos, o .ts si deseas escribir TypeScript en tu archivo de configuración. No obstante, el formato astro.config.js es compatible.

Consulta la referencia de configuración (EN) de Astro para obtener una descripción completa de todas las opciones de configuración disponibles.

El archivo de configuración de TypeScript

Todos los proyectos iniciales de Astro incluyen un archivo tsconfig.json en el proyecto. El script de un componente Astro está escrito en TypeScript, lo que proporciona las herramientas de edición de Astro y te permite, si lo deseas, añadir sintaxis a tu código JavaScript para la comprobación de tipos del código de tu propio proyecto.

Usa el archivo tsconfig.json para configurar la plantilla de TypeScript que realizará la comprobación de tipos en tu código, configurar los plugins de TypeScript, establecer alias de importación y mucho más.

Lee la guía de TypeScript de Astro para obtener una visión general completa de las opciones de TypeScript y los tipos de utilidad integrados en Astro.

Experiencia en desarrollo

Mientras trabajas en modo de desarrollo, puedes aprovechar tu editor de código y otras herramientas para mejorar la experiencia de desarrollo con Astro.

Astro ofrece su propia extensión oficial para VS Code y es compatible con otras herramientas de edición muy populares. Astro también ofrece una barra de herramientas personalizable que se muestra en la vista previa del navegador mientras el servidor de desarrollo está en funcionamiento. Puedes instalar e incluso crear tus propias aplicaciones para la barra de herramientas con el fin de añadir funcionalidades adicionales.

Lee las guías de Astro sobre opciones de configuración del editor y cómo utilizar la barra de herramientas de desarrollo para aprender a personalizar tu experiencia de desarrollo.

Tareas habituales en los nuevos proyectos

A continuación te indicamos algunos primeros pasos que podrías dar al iniciar un nuevo proyecto de Astro.

Agrega tu dominio de despliegue

Para generar el mapa del sitio y crear URL canónicas, configura la URL de despliegue en la opción site (EN). Si vas a realizar el despliegue en una ruta (p. ej., www.example.com/docs), también puedes configurar una base (EN) para la raíz de tu proyecto.

Además, los distintos servidores de despliegue pueden comportarse de forma diferente en lo que respecta a las barras al final de las URL (p. ej., example.com/about frente a example.com/about/). Una vez desplegado el sitio, es posible que tengas que configurar la opción trailingSlash (EN).

import { defineConfig } from 'astro/config';

export default defineConfig({
  site: 'https://www.example.com',
  base: '/docs',
  trailingSlash: 'always',
});

Agregar metadatos del sitio

Astro no usa su archivo de configuración para datos comunes de SEO o metadatos, sino únicamente para la información necesaria para compilar el código de tu proyecto y convertirlo a HTML.

En su lugar, esta información se agrega al <head> de tu página usando las etiquetas HTML estándar <link> y <meta>, igual que si estuvieras escribiendo páginas HTML convencionales.

Una práctica habitual en los sitios web Astro es crear un componente .astro <Head /> que se pueda añadir a una plantilla común, de modo que se aplique a todas tus páginas.

---
import Head from './Head.astro';

const { ...props } = Astro.props;
---
<html>
  <head>
    <meta charset="utf-8">
    <Head />
    <!-- Elementos adicionales del head -->
  </head>
  <body>
    <!-- El contenido de la página va aquí -->
  </body>
</html>

Dado que Head.astro es simplemente un componente Astro normal, puedes importar archivos y recibir propiedades que te pasen otros componentes, como el título de una página concreta.

---
import Favicon from '../assets/Favicon.astro';
import SomeOtherTags from './SomeOtherTags.astro';

const { title = 'Mi página Astro', ...props } = Astro.props;
---
<link rel="sitemap" href="/sitemap-index.xml">
<title>{title}</title>
<meta name="description" content="¡Bienvenido a mi nuevo sitio Astro!">

<!-- Analíticas Web -->
<script data-goatcounter="https://my-account.goatcounter.com/count" async src="//gc.zgo.at/count.js"></script>

<!-- Tags de Open Graph -->
<meta property="og:title" content="Mi nueva página de Astro" />
<meta property="og:type" content="website" />
<meta property="og:url" content="http://www.example.com/" />
<meta property="og:description" content="¡Bienvenido a mi nuevo sitio Astro!" />
<meta property="og:image" content="https://www.example.com/_astro/seo-banner.BZD7kegZ.webp">
<meta property="og:image:alt" content="">

<SomeOtherTags />

<Favicon />

Contribuir Comunidad Patrocinador