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?

Try the create astro CLI wizard →

Prerrequisitos

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).

Instalación

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

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

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.

npm init --yes

pnpm init

yarn init --yes

2. Instala Astro

Primero, instala Astro dentro de tu proyecto.

npm install astro

pnpm install astro

yarn add astro

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

  "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.

3. Crea tu primera página

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:

---
// ¡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>

4. Crea tu primer archivo estático

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:

# 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: /

5. Crea astro.config.mjs

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:

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.

6. Agrega soporte para TypeScript

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):

{
  "extends": "astro/tsconfigs/base"
}

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

/// <reference types="astro/client" />

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

7. Siguientes pasos

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.

Crear un problema en GitHub

Envíanos comentarios