No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Aprende Ingl茅s, Programaci贸n, AI, Ciberseguridad y mucho m谩s.

Antes: $249

Currency
$209
Suscr铆bete

Termina en:

4 D铆as
10 Hrs
11 Min
16 Seg

Crear tu primera p谩gina web con Astro

4/25
Recursos

Aportes 8

Preguntas 4

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

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 馃帀

Instalen la extensi贸n oficial de Astro en Visual Studio Code para tener disponible color en el c贸digo, sugerencias y otras cosas m谩s en los archivos 鈥.astro鈥

Esta super chevere este framework!

Llegue hasta este punto todo funciono bien hasta que tuve que abrir el localhost3000/blog la pagina no carga y no se si este framework sea solo para mac lo estoy realizando desde un Windows 11, lo intente averig眉e con varias personas pero no encontr茅 soluci贸n ni del mismo tutor me retiro.

si alguien si izo la pregunta de cuan extensi贸n usa el profe para que se le vean los icono de esa forma esteta extensi贸n Material Icon Theme

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