Arrancando del proyecto

Instala todo lo necesario ¶

• Node.js: versión 16.12.0 o superior.
• Editor de código: Usaremos Visual Studio Code con la extensión oficial de Astro.
• Terminal: Puede valerte la que viene integrada en tu ordenador.
• Git: Recomendado pero no obligatorio

💡 Puedes crear un proyecto de Astro directamente en la nube con un editor online desde Astro.new. Nosotros seguiremos los pasos en tu ordenador local.

Crea el proyecto ¶

Utilizaremos el asistente de configuración

Esto arrancará la creación de un nuevo proyecto.

Aunque las preguntas se van modificando en las nuevas versiones este es el resumen de lo que necesitamos responder:

• Elegir el nombre del proyecto. Te propone uno pero nosotros escribimos astro-portfolio
• Instalar una plantilla. No, queremos la “Empty” porque empezaremos desde cero
• Soporte para TypeScript: Sí
• Instalar dependencias: Sí (un paso que te ahorras)
• Inicializar el repositorio: Recomiendo un “Sí” siempre que hayas trabajado ya con git antes.

Puedes ver el proceso en este vídeo:

🌎 La documentación de Astro está disponible en castellano. Aquí tienes todas las instrucciones de instalación.

Arranca el servidor de desarrollo ¶

En la terminal solo te quedan dos pasos para ver funcionando tu proyecto:

Este último paso abrirá tu navegador en la dirección http://localhost:3000

👀 No te preocupes si ves poca cosa, pronto lo llenaremos.

A partir de aquí el servidor de desarrollo basado en Vite y se encargará solito de recargar el navegador CADA VEZ que hagas un cambio.

💪 ¡Maravilloso! ¡Tienes todo listo!

🌎 Podcast: Buenas razones para usar Vite

Estructura del proyecto ¶

Las principales carpetas y ficheros que verás en la instalación son estos:

📂 public

Ficheros públicos que no necesitan ser procesados. Por ejemplo, el favicon.

📂 src

Donde vivirá todo tu código

📂 src/pages

Aquí crearemos las páginas. Tendrás creado ya index.astro que es el contenido que estás viendo en el navegador en el paso anterior.

📂 astro.config.mjs

El fichero de configuración de Astro.

📂 package.json

Las dependencias del proyecto y los scripts que hacen funcionar todo el desarrollo.