Saltearse al contenido

Instala Astro manualmente

Esta guía te guíara paso a paso para instalar manualmente y configurar un nuevo proyecto de Astro si prefieres no usar la la herramienta CLI automática.

¿Prefieres una forma más rápida de empezar?

Sección titulada ¿Prefieres una forma más rápida de empezar?
Try the create astro CLI wizard →
  • Node.js - v18.14.1 o mayor.
  • Editor de código - Recomendamos VS Code con nuestra extensión oficial de Astro.
  • Terminal - Astro es usado a través de la interfaz de línea de comandos (CLI).

Si prefieres no usar el asistente de instalación automático create astro, puedes instalar y configurar Astro manualmente siguiendo las instrucciones a continuación:

1. Crea una carpeta donde guardar todos los archivos

Sección titulada 1. Crea una carpeta donde guardar todos los archivos

Crea una carpeta vacía con el nombre de tu proyecto y navega hacia ella.

Terminal window
mkdir my-astro-project
cd my-astro-project

Ya en la carpeta, crea un archivo package.json para tu proyecto. Esto te ayudará a gestionar las dependencias del proyecto, incluyendo Astro. Si no estás familiarizado con este formato de archivo, ejecuta el siguiente comando para crear uno.

Terminal window
npm init --yes

Primero, instala Astro dentro de tu proyecto.

Terminal window
npm install astro

A continuación, reemplaza los scripts creados por defecto en el package.json por los siguientes:

package.json
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "astro dev",
"start": "astro dev",
"build": "astro build",
"preview": "astro preview"
},

Los scripts serán usados más adelante en la guía para iniciar y ejecutar diferentes comandos en Astro.

En tu editor de código, crea un nuevo archivo en el directorio src/pages/index.astro. Esta será tu primera página de Astro en el proyecto.

Copia y pega el siguiente fragmento de código (incluyendo --- guiones) en tu nuevo archivo:

src/pages/index.astro
---
// ¡Bienvenido a Astro! Todo entre los guiones triples son los
// "metadatos de tu componente". Nunca se ejecuta en el navegador.
console.log('¡Esto se ejecuta en tu terminal y no en el navegador!');
---
<!-- El código de abajo es "la plantilla de su componente". Es solo HTML
con un poco de magia que te ayudará a crear la plantilla del componente. -->
<html>
<body>
<h1>¡Hola Mundo!</h1>
</body>
</html>
<style>
h1 {
color: orange;
}
</style>

Crea una carpeta public en la raíz de tu proyecto para almacenar todos los archivos estáticos. Astro incluirá estos archivos en la compilación final, así podrán ser referenciados de forma segura desde tus componentes.

Crea un nuevo archivo en el directorio public/robots.txt. robots.txt es un archivo que informa a los robots de búsqueda, como Google, sobre cómo indexar tu página web.

Copia y pega el siguiente fragmento de código:

public/robots.txt
# Ejemplo: Permitir a todos los bots de búsqueda escanear e indexar el sitio web.
# Sintaxis completa: https://developers.google.com/search/docs/advanced/robots/create-robots-txt
User-agent: *
Allow: /

Astro es configurado usando el archivo astro.config.mjs. Este archivo es opcional si no necesitas configurar Astro, pero recomendamos crear uno ahora.

Crea un archivo astro.config.mjs en la raíz del proyecto y copia el siguiente código dentro de él:

astro.config.mjs
import { defineConfig } from 'astro/config';
// https://astro.build/config
export default defineConfig({});

Si deseas incluir componentes de frameworks como React, Svelte, etc.; o usar otras herramientas de desarrollo como Tailwind o Partytown en tu proyecto, lee nuestra guía de integraciones.

📚 Lee nuestra guía de configuración de API para más información.

TypeScript es configurado usando tsconfig.json. Aun si tú no escribes código en TypeScript, este archivo es importante para que herramientas como Astro y VS Code sepan cómo comprender tu proyecto. Algunas características (como importaciones de paquetes npm) no tienen un soporte completo en el editor sin el archivo tsconfig.json.

Si pretendes escribir código en TypeScript, recomendamos usar las plantillas de Astro strict o strictest. Puedes ver y comparar las tres configuraciones de las plantillas en astro/tsconfigs/.

Crea un archivo tsconfig.json en la raíz del proyecto y copia el siguiente código dentro de él. (Puedes usar base, strict o strictest para tu maquetado de TypeScript):

tsconfig.json
{
"extends": "astro/tsconfigs/base"
}

Finalmente, crea un archivo src/env.d.ts para que TypeScript infiera los tipos disponibles en un proyecto de Astro.

src/env.d.ts
/// <reference types="astro/client" />

Lee nuestra guía para configurar TypeScript para más información.

Si has seguido las instrucciones anteriores, el proyecto debe lucir así:

  • Directorionode_modules/
  • Directoriopublic/
    • robots.txt
  • Directoriosrc/
    • Directoriopages/
      • index.astro
    • env.d.ts
  • astro.config.mjs
  • package-lock.json or yarn.lock, pnpm-lock.yaml, etc.
  • package.json
  • tsconfig.json

¡Felicidades, estás listo para empezar a usar Astro!

Si has seguido todo el proceso, puedes ir directamente al Paso 2: Inicia Astro para continuar y aprender cómo ejecutar Astro por primera vez.