Curso de Creación de Páginas Web con Astro
Curso de Creación de Páginas Web con Astro

¿Qué es Astro?

1

Conoce los proyectos que vas a construir

2

¿Qué es Astro?

Quiz: ¿Qué es Astro?

Primeros Pasos

3

Entorno de trabajo y estructura en Astro

4

Crear tu primera página web con Astro

Proyecto

5

Breve historia de los frameworks y librerías

6

Conoce tu proyecto colaborativo: astrobuild.tips

7

Configuración de Tailwind CSS

8

Configuración de TypeScript

9

GitHub, VSCode, Prettier, Astro config

Astro API

10

Componentes en Astro

11

Páginas en Astro

12

Plantillas en Astro

13

Markdown

14

MDX

15

Enrutamiento: rutas estáticas

16

Enrutamiento: rutas dinámicas

17

Creando template de nuestra página de entrada del blog

Quiz: Astro API

Astro Islands

18

Componentes en React: header

19

Componentes en Vue: footer

20

Componentes en Svelte: redes sociales

21

Patrones de diseño: Astro Islands

Quiz: Astro Islands

Deploy

22

Integraciones SEO, RSS, Sitemap

23

Desplegar en Cloudflare Pages

Quiz: Deploy

Bonus

24

Bonus: aplica mejoras a tu proyecto

Cierre

25

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
Aprende todo un fin de semana sin pagar una suscripción 🔥

Aprende todo un fin de semana sin pagar una suscripción 🔥

Regístrate

Comienza en:

3D
1H
29M
56S
Curso de Creación de Páginas Web con Astro

Curso de Creación de Páginas Web con Astro

Oscar Barajas Tavares

Oscar Barajas Tavares

Integraciones SEO, RSS, Sitemap

22/25
Recursos

Aportes 5

Preguntas 1

Ordenar por:

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

o inicia sesión.

Ameth Ordoñez Erazo

Ameth Ordoñez Erazo

hace 20 días

Les dejo el código

<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />

	<!-- Primary Meta Tags -->
	<title>{title}</title>
	<meta name="title" content={title} />
	<meta name="description" content={description} />
	<link rel="canonical" href={canonicalURL} />

	<!-- Global Metadata -->
	<link rel="icon" href="/favicon.png" />
	<link rel="apple-touch-icon" href="/images/icon/192x192.png" />
	<link rel="manifest" href="/manifest.webmanifest" />
	<meta name="google" content="notranslate" />
	<link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png" />
	<link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png" />
	<link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png" />
	<link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png" />
	<link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png" />
	<link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png" />
	<link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png" />
	<link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png" />
	<link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png" />
	<link
		rel="icon"
		type="image/png"
		sizes="192x192"
		href="/android-icon-192x192.png"
	/>
	<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
	<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png" />
	<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
	<meta name="msapplication-TileColor" content="#2b5797" />
	<meta name="theme-color" content="#ffffff" />

	<!-- Open Graph / Facebook -->
	<meta property="og:locale" content="es_ES" />
	<meta property="og:type" content="website" />
	<meta property="og:url" content={canonicalURL} />
	<meta property="og:title" content={title} />
	<meta property="og:description" content={description} />
	<meta property="og:image" content="" />

	<!-- Twitter -->
	<meta name="twitter:card" content="summary_large_image" />
	<meta name="twitter:title" content={title} />
	<meta name="twitter:description" content={description} />
	<meta name="twitter:image" content="" />
	<meta name="twitter:image:alt" content={title} />
	<meta name="twitter:site" content="@gndx" />
	<meta name="twitter:creator" content="@gndx" />
</head>
Ameth Ordoñez Erazo

Ameth Ordoñez Erazo

hace 20 días

Para instalar automáticamente Astro Sitemap

npx astro add sitemap
Ameth Ordoñez Erazo

Ameth Ordoñez Erazo

hace 20 días

Si no tienen un dominio para su sitio, pueden colocar el del localhost:

export default defineConfig({
	site: 'https://localhost:3000',
	integrations: [tailwind(), mdx(), react(), vue(), svelte()],
})
Alfredo Jose Mendez

Alfredo Jose Mendez

hace 3 días

Asegurense de usar pubDate y title en sus archivos markdown caso contrario podrian tener problemas al integrar @astrojs/rss

Alfredo Jose Mendez

Alfredo Jose Mendez

hace 3 días

Buscando una herramienta como la que indica el instructor del curso para generar los favicon encontré la siguiente:

https://en.rakko.tools/tools/69/

espero les sirva!