Curso de Astro

Vamos a construir una página real, paso a paso, para que entiendas cómo funciona Astro desde dentro.

🧱 1. Estructura básica de un archivo .astro

Cada archivo .astro tiene dos partes:

1---
2/* Parte superior (JavaScript o imports) */
3---
4
5<!-- Parte inferior (HTML, CSS, componentes, etc.) -->

🔹 Todo lo que esté entre las líneas --- es JavaScript del servidor (no se envía al navegador). 🔹 Todo lo demás es HTML y componentes que se renderizan en la página.

✨ 2. Ejemplo simple: “Hola mundo”

Crea el archivo:

src/pages/index.astro

Y escribe:

1---
2const nombre = "Astro 🚀";
3---
4
5<html lang="es">
6  <head>
7    <meta charset="UTF-8" />
8    <title>Mi primera página Astro</title>
9  </head>
10  <body>
11    <h1>Hola, {nombre}</h1>
12    <p>Este es mi primer sitio con Astro.</p>
13  </body>
14</html>

Ahora abre http://localhost:4321 👉 Verás: Hola, Astro 🚀

🧮 3. Variables y expresiones

Puedes usar cualquier variable o expresión JavaScript dentro de { }.

Ejemplo:

1---
2const cursos = ["HTML", "CSS", "JavaScript", "Astro"];
3---
4
5<ul>
6  {cursos.map(curso => <li>{curso}</li>)}
7</ul>

Resultado:

  • HTML
  • CSS
  • JavaScript
  • Astro

💡 Astro convierte automáticamente esas expresiones en HTML.

🎨 4. Añadir CSS en una página .astro

Astro permite escribir CSS directamente dentro del archivo, y será local (solo afecta a esa página o componente).

Ejemplo:

1---
2const titulo = "Bienvenido a mi web";
3---
4
5<style>
6  h1 {
7    color: #4f46e5;
8    text-align: center;
9  }
10  p {
11    text-align: center;
12    color: gray;
13  }
14</style>
15
16<h1>{titulo}</h1>
17<p>Hecho con 💜 y Astro</p>

✅ Este CSS solo se aplicará aquí, no al resto del sitio. Esto evita conflictos entre estilos de distintas páginas.

⚡ 5. Añadir JavaScript (interactividad)

Astro es estático por defecto, pero puedes añadir interactividad mínima con scripts.

Ejemplo:

1---
2---
3
4<html lang="es">
5  <head>
6    <meta charset="UTF-8" />
7    <title>Contador simple</title>
8  </head>
9  <body>
10    <button id="btn">Haz clic</button>
11    <p id="out">0</p>
12
13    <script>
14      let contador = 0;
15      document.getElementById("btn").addEventListener("click", () => {
16        contador++;
17        document.getElementById("out").textContent = contador;
18      });
19    </script>
20  </body>
21</html>

🟢 Importante: El código dentro de <script> sí se envía al navegador. Por eso, conviene usarlo solo si realmente lo necesitas.

🧩 6. Componentes dentro de una página

Si tienes un componente en src/components/Header.astro:

1<header>
2  <h1>🌟 Mi sitio en Astro</h1>
3</header>

Puedes importarlo en tu página así:

1---
2import Header from '../components/Header.astro';
3---
4
5<Header />
6<p>Bienvenido a mi web hecha con Astro</p>

💡 Esto te permite reutilizar secciones fácilmente.

📄 7. Páginas con metadatos (frontmatter)

Astro permite definir variables arriba del todo (como el “frontmatter” de Markdown).

Ejemplo:

1---
2export const title = "Página de contacto";
3export const description = "Puedes escribirme a través de este formulario.";
4---
5
6<h1>{title}</h1>
7<p>{description}</p>

Esto es útil si luego quieres mostrar esos datos en layouts o SEO.

  • Loading...
← Estructura de un proyecto AstroVolver al cursoLayouts y Componentes en Astro →