Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
122 changes: 122 additions & 0 deletions src/content/docs/es/guides/configuring-astro.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,122 @@
---
title: Descripción general de la configuración
description: Conoce las formas en que puedes configurar y personalizar tu nuevo proyecto y tu experiencia de desarrollo.
i18nReady: true
---
import ReadMore from '~/components/ReadMore.astro'

Astro es un framework flexible, no dogmatico que te permite configurar tu proyecto de muchas formas diferentes. Esto significa que empezar un nuevo proyecto puede resultar abrumador: no hay «una mejor forma» 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 tu 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 para obtener ayuda.

## El archivo de configuración de Astro

El [archivo de configuración de Astro](/es/reference/configuration-reference/) es un archivo de JavaScript incluido en la raíz de cada proyecto inicial:

```js
// astro.config.mjs
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. El asistente `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 crear y renderizar tu proyecto en HTML.

Recomendamos usar el formato de archivo predeterminado `.mjs` en la mayoría de los casos, o `.ts` si quieres escribir TypeScript en tu archivo de configuración. Sin embargo, `astro.config.js` también es compatible.

<ReadMore>Lee la [referencia de configuración](/es/reference/configuration-reference/) de Astro para obtener una visión general completa de todas las opciones de configuración compatibles.</ReadMore>

## El archivo de configuración de TypeScript

Todo proyecto inicial de Astro incluye un archivo `tsconfig.json` en tu proyecto. El [script del componente](/es/basics/astro-components/#el-script-del-componente) de Astro es TypeScript, lo que proporciona las herramientas de editor de Astro y te permite añadir opcionalmente sintaxis a tu JavaScript para la verificación de tipos de tu propio código de proyecto.

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

<ReadMore>Lee la [guía de TypeScript](/es/guides/typescript/) de Astro para obtener una visión general completa de las opciones de TypeScript y los tipos de utilidad integrados de Astro.</ReadMore>

## Experiencia de desarrollo

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

Astro proporciona su propia extensión oficial de VS Code y es compatible con varias otras herramientas de editor 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 ejecución. Puedes instalar e incluso crear tus propias aplicaciones de barra de herramientas para funcionalidades adicionales.

<ReadMore>Lee las guías de Astro sobre [opciones de configuración del editor](/es/editor-setup/) y [uso de la barra de herramientas de desarrollo](/es/guides/dev-toolbar/) para aprender a personalizar tu experiencia de desarrollo.</ReadMore>

## Tareas comunes de proyectos nuevos

Estos son algunos primeros pasos que podrías considerar con un nuevo proyecto de Astro.

### Añadir tu dominio de despliegue

Para generar tu sitemap y crear URLs canónicas, configura tu URL de despliegue en la opción [`site`](/es/reference/configuration-reference/#site). Si estás desplegando en una ruta (ej. `www.example.com/docs`), también puedes configurar una [`base`](/es/reference/configuration-reference/#base) para la raíz de tu proyecto.

Además, diferentes plataformas de despliegue pueden tener comportamientos distintos con respecto a las barras inclinadas al final de tus URLs (ej. `example.com/about` vs `example.com/about/`). Una vez que tu sitio esté desplegado, es posible que necesites configurar tu preferencia de [`trailingSlash`](/es/reference/configuration-reference/#trailingslash).

```js title="astro.config.mjs"
import { defineConfig } from "astro/config";

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

### Añadir metadatos del sitio

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

En su lugar, esta información se añade al `<head>` de tu página utilizando etiquetas HTML `<link>` y `<meta>` estándar, como si estuvieras escribiendo páginas HTML simples.

Un patrón común para los sitios de Astro es crear un componente `<Head />` [`.astro`](/es/basics/astro-components/) que se puede añadir a un [componente de diseño](/es/basics/layouts/) común para que se aplique a todas tus páginas.

```astro title="src/components/MainLayout.astro"
---
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>
```

Como `Head.astro` es solo un componente regular de Astro, puedes importar archivos y recibir propiedades (props) de otros componentes, como un título de página específico.

```astro title="src/components/Head.astro"
---
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="¡Bienvenido a mi nuevo sitio de Astro!">

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

<!-- Etiquetas Open Graph -->
<meta property="og:title" content="Mi Nuevo Sitio Web 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 de Astro!" />
<meta property="og:image" content="https://www.example.com/_astro/seo-banner.BZD7kegZ.webp">
<meta property="og:image:alt" content="">

<SomeOtherTags />

<Favicon />
```
Loading
Loading