Descripción general de la configuración

Astro es un framework flexible y sin opiniones que te permite configurar tu proyecto de muchas maneras diferentes. Esto significa que comenzar con un nuevo proyecto puede resultar abrumador: ¡no hay una “única mejor manera” de configurar tu proyecto de Astro!

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

Si este es tu primer proyecto de Astro, o si ha pasado un tiempo desde que configuraste un nuevo proyecto, utiliza las siguientes guías y referencias en la documentación como ayuda.

El archivo de configuración de Astro

El archivo de configuración de Astro es un archivo de JavaScript incluido en la raíz de cada proyecto inicial:

import { defineConfig } from "astro/config";

export default defineConfig({
  // your configuration options here...
});

Solo es obligatorio si tienes algo que configurar, pero la mayoría de los proyectos utilizarán este archivo. El ayudante defineConfig() proporciona IntelliSense automático en tu IDE y es donde agregarás todas tus opciones de configuración para indicarle a Astro cómo compilar y renderizar tu proyecto a HTML.

Recomendamos utilizar el formato de archivo predeterminado .mjs en la mayoría de los casos, o bien .ts si deseas escribir TypeScript en tu archivo de configuración. Sin embargo, también se admite astro.config.js.

Lee la referencia de configuración de Astro para obtener una descripción general completa de todas las opciones de configuración admitidas.

El archivo de configuración de TypeScript

Cada proyecto inicial de Astro incluye un archivo tsconfig.json en tu proyecto. El script de componente de Astro es TypeScript, lo que proporciona las herramientas de edición de Astro y te permite agregar sintaxis opcionalmente a tu JavaScript para la comprobación de tipos del código de tu propio proyecto.

Utiliza el archivo tsconfig.json para configurar la plantilla de TypeScript que realizará las comprobaciones de tipos en tu código, configurar complementos de TypeScript, establecer alias de importación y más.

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

Experiencia de desarrollo

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

Astro proporciona su propia extensión oficial para VS Code y es compatible con varias otras herramientas de edición populares. Astro también proporciona una barra de herramientas personalizable que se muestra en la vista previa de tu navegador mientras el servidor de desarrollo está en ejecución. Puedes instalar e incluso crear tus propias aplicaciones de barra de herramientas para obtener funciones adicionales.

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

Tareas comunes en nuevos proyectos

Aquí tienes algunos primeros pasos que podrías elegir dar con un nuevo proyecto de Astro.

Agrega tu dominio de despliegue

Para generar tu mapa del sitio (sitemap) y crear URLs canónicas, configura tu URL de despliegue en la opción site. Si estás realizando el despliegue en una ruta específica (por ejemplo, www.example.com/docs), también puedes configurar una ruta base (base) para la raíz de tu proyecto.

Además, diferentes proveedores de despliegue pueden tener comportamientos distintos respecto a las barras diagonales finales al final de tus URLs (por ejemplo, example.com/about frente a example.com/about/). Una vez que tu sitio esté desplegado, es posible que debas configurar tu preferencia de barra diagonal final (trailingSlash).

import { defineConfig } from "astro/config";

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

Agrega metadatos del sitio

Astro no utiliza su archivo de configuración para SEO común o metadatos, sino solo para la información requerida para compilar el código de tu proyecto y renderizarlo a HTML.

En su lugar, esta información se agrega al elemento <head> de tu página utilizando etiquetas estándar de HTML <link> y <meta>, tal como si estuvieras escribiendo páginas HTML comunes.

Un patrón común para los sitios de Astro es crear un componente de Astro llamado <Head /> (por ejemplo, un componente .astro) que se pueda agregar a un componente de diseño común (layout) para que se aplique a todas tus páginas.

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

const { ...props } = Astro.props;
---
<html>
  <head>
    <meta charset="utf-8">
    <Head />
    <!-- Additional head elements -->
  </head>
  <body>
    <!-- Page content goes here -->
  </body>
</html>

Dado que Head.astro es simplemente un componente normal de Astro, puedes importar archivos y recibir las props que te pasen desde otros componentes, como un título de página específico.

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

const { title = "My Astro Website", ...props } = Astro.props;
---
<link rel="sitemap" href="/sitemap-index.xml">
<title>{title}</title>
<meta name="description" content="Welcome to my new Astro site!">

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

<!-- Open Graph tags -->
<meta property="og:title" content="My New Astro Website" />
<meta property="og:type" content="website" />
<meta property="og:url" content="http://www.example.com/" />
<meta property="og:description" content="Welcome to my new Astro site!" />
<meta property="og:image" content="https://www.example.com/_astro/seo-banner.BZD7kegZ.webp">
<meta property="og:image:alt" content="">

<SomeOtherTags />

<Favicon />

Contribuir Comunidad Patrocinar