Es la página oficial de Astro pueden encontrar otros templates para crear sitios ya preconstruidos como blogs, portfolios, landing pages, etc:
Themes Astro
¿Qué es Astro?
Conoce los proyectos que vas a construir
¿Qué es Astro?
Quiz: ¿Qué es Astro?
Primeros Pasos
Entorno de trabajo y estructura en Astro
Crear tu primera página web con Astro
Proyecto
Breve historia de los frameworks y librerías
Conoce tu proyecto colaborativo: astrobuild.tips
Configuración de Tailwind CSS
Configuración de TypeScript
GitHub, VSCode, Prettier, Astro config
Astro API
Componentes en Astro
Páginas en Astro
Plantillas en Astro
Markdown
MDX
Enrutamiento: rutas estáticas
Enrutamiento: rutas dinámicas
Creando template de nuestra página de entrada del blog
Quiz: Astro API
Astro Islands
Componentes en React: header
Componentes en Vue: footer
Componentes en Svelte: redes sociales
Patrones de diseño: Astro Islands
Quiz: Astro Islands
Deploy
Integraciones SEO, RSS, Sitemap
Desplegar en Cloudflare Pages
Quiz: Deploy
Bonus
Bonus: aplica mejoras a tu proyecto
Cierre
Conclusiones y cierre del curso
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Si ya tienes una cuenta,
Iniciar sesión
Crear tu primera página web con Astro
4/25Recursos
Aportes 4
Preguntas 0
Ordenar por:
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.
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?
o inicia sesión.