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@latestElige 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 devLa 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 previewComprueba 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.