Tu primera página en Astro, paso a paso.

Vamos a construir una presentación pequeña: un título, una descripción y una tarjeta de proyecto. Necesitas Node.js compatible con la versión de Astro que instales y una terminal. La plantilla de Chigne utiliza Node.js 22.12 o superior.

Prepara el proyecto

Puedes empezar con la plantilla Portfolio Astro o crear un proyecto con el asistente oficial:

npm create astro@latest

Elige un proyecto mínimo, entra en la carpeta que hayas creado e instala las dependencias si el asistente no lo hizo. Después inicia el servidor:

npm install
npm run dev

La terminal te indicará la dirección local. Mantén ese proceso abierto mientras editas.

Escribe la primera página

En src/pages/index.astro, el bloque entre guiones contiene el código que prepara la página. Debajo se escribe la plantilla HTML.

---
const name = "Tu nombre";
---

<!doctype html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Portfolio de {name}</title>
  </head>
  <body>
    <main>
      <h1>Hola, soy {name}.</h1>
      <p>Diseño y construyo cosas para la web.</p>
    </main>
  </body>
</html>

Guarda el archivo y observa el cambio en el navegador. Sustituye la presentación por una frase que explique lo que haces de forma concreta.

Extrae una pieza reutilizable

Crea src/components/ProjectCard.astro. Una tarjeta recibe datos a través de sus propiedades:

---
interface Props {
  title: string;
  description: string;
}
const { title, description } = Astro.props;
---

<article>
  <h2>{title}</h2>
  <p>{description}</p>
</article>
<style>
  article {
    padding: 1.5rem;
    border: 1px solid #888;
    border-radius: 1rem;
  }
</style>

Importa el componente en el bloque inicial de la página con import ProjectCard from '../components/ProjectCard.astro';. Después úsalo dentro de main:

<ProjectCard
  title="Mi primer sitio"
  description="Un espacio para compartir lo que construyo."
/>

Comprueba la versión de producción

Detén el servidor con Ctrl+C. Genera los archivos del sitio y revisa el resultado:

npm run build
npm run preview

Comprueba el título de la pestaña, el tamaño del texto en móvil y que la presentación se entienda sin explicaciones adicionales. Ya tienes una base que puedes ampliar con otras páginas y un layout compartido.

Consulta los requisitos y las opciones del asistente en la documentación oficial de instalación de Astro.

Resultado y errores habituales

El resultado es una página con tu presentación y una tarjeta de proyecto, además de una carpeta dist/ generada al compilar. Abre la dirección que indique npm run preview y comprueba ese contenido sin depender del servidor de desarrollo.

• Si npm no existe en la terminal, comprueba la instalación de Node.js y abre una terminal nueva.
• Si Astro no encuentra ProjectCard, revisa la ruta del import y las mayúsculas del nombre del archivo.
• Si el puerto habitual está ocupado, usa la dirección exacta que imprime la terminal.