No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Crear tu primera página web con Astro

4/25
Recursos

Aportes 4

Preguntas 0

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

o inicia sesión.

Es la página oficial de Astro pueden encontrar otros templates para crear sitios ya preconstruidos como blogs, portfolios, landing pages, etc:
Themes Astro

Para insertar código en Javascript, se debe meter en bloques de ---. Astro automáticamente sabrá que es código en JS. Luego podemos utilizarlo en el bloque de HTML:

---
// Esto es código JS

const nameCourse='Platizi con Astro'
---

<div>
	<h1>Bienvenido a curso de {nameCourse}</h1>
</div>

Crear tu primera página web con Astro

Para Astro, las páginas residen en el directorio src/pages , quienes son los responsables de administrar el routing, la carga de información, y la distribución del contenido de nuestro sitio web.
.

Páginas Astro

Inicialmente, las páginas de Astro usan la extensión .astro para extender el soporte de características similares a componentes, en otros Frameworks.

src/pages/page.md
---
---
<html lang="en">
  <head>
    <title>My Homepage</title>
  </head>
  <body>
    <h1>Welcome to my website!</h1>
  </body>
</html>

En distribución, mezclamos los layouts en el directorio src/layouts para evitar repetir elementos de HTML comunes, por ejemplo <head> y <body> .

src/layouts/Default.astro
---
---
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <BaseHead title={title}/>
  </head>
  <body>
    <slot /> <!-- your content is injected here -->
  </body>
</html>
src/pages/page.md
---
import DefaultLayout from '../layouts/Default.astro';
---
<DefaultLayout title="Greetting 👋">
  <p>Hello World 🎉</p>
</DefaultLayout>

✨ Concepto clave
Adicionalmente, como core en Astro podemos emplear como páginas al contenido con formato markdown .md , donde por extensión instalable contenido con formato markdown extendido .mdx .

src/pages/index.md
---
layout: '../layouts/Default.astro'
title: 'Greetting 👋'
---

Hello World 🎉

Astro tiene cositas de Svelte y NextJS. Súper intuitivo el scaffolding del proyecto.