Curso de Astro, Generador de Sitios Web Estáticos

Подписаться 581 тыс.

Просмотров 148 тыс.

50% 1

Astro es un generador de sitios web estáticos, es decir sitios web que en su mayoría están conformados por solo archivos como HTML, CSS, Javascript, Imágenes y contenido similar. Solo que Astro ofrece una experiencia de desarrollo mucho mas cómoda para desarrolladores web que quieren tener una herramienta similar a los Frameworks de Javascript (React, Vue, Svelte, etc) solo que al final produzca contenido enfocado en HTML. Este Static Site Generator (SSG) también permite cargar componentes de otros frameworks de Javascript en una misma pagina, y también soporta Typescript, gracias a que esta desarrollado encima de Vitejs. Ademas en este curso usaremos el Framework de CSS llamado TailwindCSS y desplegaremos gratuitamente nuestro sitio en Github pages.
Codigo del Landing Page: github.com/fazt/astro-landing
Índice del Curso
00:00 Introducción
00:57 ¿Qué es Astro?
02:34 Entorno de desarrollo
18:55 Estructura del Proyecto
29:28 Paginas en Astro
34:49 Extensión de VSCode para Astro
43:00 Sintaxis JSX en Astro.build
58:46 Fetch (Javascript API)
01:07:10 Astro Components
01:25:19 Layouts
01:37:09 Markdown
01:54:27 Imágenes en Astro
01:59:53 Integraciones en Astro
02:19:52 Landing Page en Astro
02:33:37 Landing components
02:43:30 Hero Component
02:52:42: More Component
03:00:52 Features component
03:09:11 Projects component
03:20:11 Deploy en Github Pages
🎥 Videos Recomendados:
Curso de HTML ⮕ • Curso HTML para Princi...
Curso de Javascript ⮕ • Curso Javascript para ...
Curso de Javascript para React ⮕ • Curso de Reactjs desde...
Curso de CSS ➜ • Curso CSS para Princip...
Curso de JSON ➜ • JSON (Javascript Objec...
Curso de Git ➜ • Git y Github | Curso P...
Variables de entorno Nodejs ➜ • Variables de Entorno e...
Javascript Orientado a Objetos ➜ • Curso de Javascript Or...
Arrays en Javascript ➜ • Javascript Arrays - Me...
ES Modules ➜ • Import y Export en Jav...
Curso de React ➜ • Curso de Reactjs desde...
Curso de Nodejs ➜ • Nodejs Curso Práctico ...
Curso de Express ➜ • Express Framework de N...
Curso de Python ➜ • Curso Python para Prin...
Excalidraw (Herramienta de dibujo) ➜ • Excalidraw, Mi Herrami...
👨‍💻 ¿Qué servicios y productos utilizo?
Ledger (Hardware Wallet) ➞ bit.ly/3ijsVNW
SiteGround ➞ bit.ly/31u9ZEk
DigitalOcean ➞ m.do.co/c/8ef261d77de5
Expo ➞ bit.ly/2WpYKtx
Cloudinary ➞ bit.ly/3ohNlJ7
Notion ➞ notion.grsm.io/yj9uc7bi3miq
#desarrolloweb #html #javascript

Опубликовано:

19 май 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 170

@franc0tic0 Год назад

Te sigo hace 3 años y empecé en este mundo por vos querido Fazt, no ha sido fácil pero nunca se pierde el entusiasmo y menos con gente como vos realizando contenido, ayudando a la comunidad y guiandonos en este camino tan lindo del desarrollo web. Será un placer hacer este nuevo curso. Te mando unas felices fiestas y este 2023 le metemos con todo. A cumplir metas!

@iloveyouneeamaneeama7812 Год назад

@fun_iqp Год назад

Qué chulada de framework, se siente tan natural y muy fino, nada de cosas raras jaja. Felices fiestas Faztro :D

@ferxas4560 Год назад

Eres el mejor Fazt, increíble forma de finalizar el año, eres simplemente mi ídolo.

@gabz_23 Год назад

E escuchado mucho sobre Astro, ahora gracias a ti, comenzaré a estudiarlo! Exelente fazt nunca dejas de sorprenderme

@snackspixels Год назад

Varias horas pero muy bueno el contenido, explicado a detalle! Excelente Fazt!

@dylanpotoy5844 Год назад

Empecé en este mundo desde tus primeros cursos de python, y gracias a ti descubri lo que me apasiona, gracias por inspirar a otros!

@historiaseneltiempo6954 8 месяцев назад

Excelente como siempre!!!

@maolink2 Год назад

Fazt feliz año, muchas bendiciones, que tus proyectos laborales y personales sigan creciendo, y por supuesto nos sigas acompañando con tus maravillosos videos. Gracias

@cesarcontrerasc2509 Год назад

Fazt nuevamente la rompes, muchas gracias por tanto contenido tan genial.

@lexanddev3731 Год назад

muchas gracias recién aterrizo a tu canal y lo explicas muy bien, empezamos el año aprendiendo astro y se me hizo muy amigable a pesar de no saber manejar frameworks ya que recién comienzo en este mundillo del desarrollo, gracias por el curso y a seguir cumpliendo mas objetivos FELIZ AÑO 💥💥

@braidata Год назад

El mejor! Todo lo que he aprendido empezó con un video de Fast!

@DEVGITI 6 месяцев назад

Conocer este Framework, fue como amor a primera vista, me encanta.

@edgarguitarist Год назад

Me encantan tus videos, yo ya sabía Astro... tengo algunos proyectos, pero me disfrute tu tutorial de principio a fin! Te deseo lo mejor! ✨✨

@carolinavallejo284 Год назад

Estaba esperando este tutorial, gracias Fazt!!!

@soundwaveofdark99 Год назад

Soy nuevo, pero debido a la necesidad de tener un mejor trabajo me ha costado encontrar, empece este camino hacia el desarrollo y no es nada fácil pero personas como tu, es lo que nos motivan a seguir aprendiendo. Quiero ser full stack, no es nada facil

@syberiaok Год назад

Excelente curso, sos muy claro para transmitir y se entiende todo muy bien! Muchas gracias!!!!

@cristianfernando2951 Год назад

Brutal video de introducción a Astro! Como recomendación me gustaría muchisimo un video con otras caracteristicas de Astro como por ejemplo la nueva API de Colections para gestión de archivos md, el uso de otras integraciones como el uso de componentes React, Vue o Svelte en Astro y también las directivas del cliente para entender un poco mas la arquitectura de islas. Muchas felicidades por generar tan buen contenido pra la comunidad de desarrollo web!

@kinkyolga9668 Год назад

Hasta el momento, este ha sido el mejor tutorial de astro que he visto! Muy muy bueno! Gracias por compartir

@manularrere Год назад

Me gusto tanto este video de Astro que me puse hacer el proyecto con vos. Una buena alternativa para los sitios estaticos. Muchas gracias por la explicacion

@carloscervantes3603 Год назад

Que chingon eres Fazt!!! muchas gracias por todo lo que compartes

@cristiancano151 Год назад

Gracias Fazt, un muy buen curso, explicas todo muy bien y a detalle

@Sebacodex Год назад

genial!!, una delicia para cerrar el 2022 con la potencia de Astro!.

@camiloandressandovaldelgad281 4 месяца назад

Fazt, de los mejores divulgadores de programación e informática!! Explicaciones claras y contenido de muy alta calidad!

@pedrom1557 Год назад

Fazt sos un genio..te deceo un feliz año💥💥 y que dios te devuelva en felicidad todo lo que haces por esta comunidad...muchas gracias👍✌

@Andres_cali Год назад

Gracias apito, feliz navidad. Todo el año nos das los mejores regalos.

@juanjcarvajalg Год назад

Excelente contenido, pedagogía y conocimiento. Gracias por tu esfuerzo y por enseñar a nosotros los principiantes, y a toda la comunidad. Aquí seguimos, preparándonos desde Venezuela, Gracias

@luisaquinoc6548 Год назад

Fazt excelente !!!! gracias por incrementar mis conocimientos, siempre te sigo!!!

@JimyDrive Год назад

El mejor regalo de Navidad. Muchas gracias Fazt

@fredyvillamil 11 месяцев назад

gracias Fazt haces un gran trabajo por la comunidad DEv.!

@angelicagalloarias6146 Год назад

estaba esperando este tuto con muchas ansias!!! gracias Fazt

@Ray_Diaz_13 Год назад

Gracias Fazt, feliz Año Nuevo y gracias por tanto que nos aportas, que todo el año que venga para ti esté lleno de salud y mucha más energía así como sabiduría, bendiciones para ti y tu familia.

@FaztTech Год назад

Muchas bendiciones igualmente 🎉

@ljimenezt 8 месяцев назад

Muchas gracias por tu aporte. Sumamente claro y facil de seguir. Incluso fue mi primera vez utilizando tailwind, lo que facilita mucho el desarrollo.

@juanitoprz456 Год назад

Eso sí es un buen regalo de navidad. Gracias Fazt ;)

@sergiomo9977 Год назад

Excelente curso Gracias Fazt.!!!

@cleidysbrooks Год назад

Espero que hayas pasado una Feliz, Bendecida y Hermosa Navidad 🙏 Gracias muchas gracias por tu dedication a enseñar.

@joseandresmontesino4214 Год назад

El primero en llegar vamos a darle A ver estás 4 hrs de material de calidad

@MauroToledo-xo2ru Год назад

tremendo Muchas gracias bro, sin ti no se que haría

@wiliamsalexandertzocixcoy7439 Год назад

Gracias Fazt, justo quería aprender Astro❤

@jorgevalbuena4502 Год назад

Y cuando pensé que papá Noel se olvidó de mi.....llegó fazt con un curso!....gracias bro!!

@leonelelizarraraz3004 Год назад

Me encantó el video. esperando el curso de tailwind

@starckops8692 Месяц назад

Gracias Fazt muchas cosas de las que se, las aprendí contigo, realmente me gastaría conocerte e invitarte un café, pero en fin MIL GRACIAS ME AYUDAS BASTANTE... Eres el Mejor... Aprendi mas contigo que estando en la Univesidad ABRAZOS... 🤗🤗🤗🤗🤗

@jonathan8406 Год назад

Gracias Fazt por tu contenido este video me llegó como Navidad! Lo que esperaba bastante 🦀🐢, Espero hayas pasado Feliz Navidad

@FaztTech Год назад

Feliz navidad igualmente Jonathan 🎉

@AlfonsoNeilJimenezCasallas Год назад

Felices fiestas 🎄🎆🎇 y a seguir celebrando la tercera 🇦🇷🏆🌟

@SlashOS 5 месяцев назад

Excelente video nos hizo a mi amigo y ami incursionar este mundo de Astro gracias Fazt

@sebastian-ns7ou Год назад

Sos un genio! Gracias por el video.

@osirisremolinam.4950 Год назад

Excelente estimado FAZT

@soyACHEE Год назад

Gracias Fazt... Muchas gracias!!!

@jesus_84_ Год назад

Maestro de maestros.

@cesarmejias9008 Год назад

Me ha gustado, me vi este curso gracias a tu tweet y al video donde indicas que usas Astro para hacer sitios web estaticos. Hace mas de un año le hice una pagina empresarial a un tío con puro html y css, ahora que la veo me da penita xd la voy a rehacer con Astro. Llevo casi dos años desde que empecé a aprender todo estos temas, ha sido difícil, mas por conseguir trabajo que se me hace tan necesario si quiero continuar bien estudiando esta carrera. Buenos videos Fazt 👍me he leido algunos articulos tuyos, y me gusta en el que hablas de tu pagina web, la verdad me esperaba conseguir el repo o un video codeando tu sitio web jaja me gusta mucho y ando pensando en como hiciste el buscador ¿🤔?

@carlosurielvillegas3904 7 месяцев назад

Gracias Fazt, muy claro, me fallo el deploy, lo hice git y en Netlify

@benjanz Год назад

sos lo más Fazt!

@rauljauregi6615 10 месяцев назад

Excelente contenido como siempre, muchas gracias!! Una pregunta/solicitud, ¿ Podrías hacer un curso para Wordpress headless con Astro??

@alvaroyanes Год назад

¡Gracias!

@gaarmy Год назад

Te quiero mucho tio Fazt

@mardev666 Год назад

Me encantan tus cursos!! también estaría bueno un tutorial completo de react native con expo y o cli

@FaztTech Год назад

Hace tiempo cree uno ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-hXDMWeD0ERM.html

@josegmatera77 8 месяцев назад

Felicitaciones por el tutorial, hay posibilidad de instalar el framework en macOS?

@astrixwr5662 10 месяцев назад

asu maree quiero aprender astro, busco curso de astro y que suerte, *fazt* ya subio un video de esto, porlaaaa gracias diosito, me has visto a los ojos :) ⚡ psdt: son las 1:53 am / 9-jul-23

@Deus-lo-Vuilt Год назад

excelente video

@kalethdiaz7455 Год назад

aparte de este curso tan bueno, quiero tener tu fondo xD. compártelo fazt.

@hernanarroyo2956 Год назад

Gracias por tanto Fazt querido. Me gustaría que hagas un tutorial de SSR con Astro, React/Preact, y Tailwind. Recomiendo para no renegar con gh-pages, utilizar Vercel. Desde la terminal con: npm i -g vercel vercel Te deployea todo automáticamente. Otra que me gusta es Render, pero Astro no tiene doc🎻.

@linknatsu5426 6 месяцев назад

Si es cierto lo que dice con vercel no te da errores al momento de despliegar tu web, muchisimas gracias por el tip

@llamasdelaf 5 месяцев назад

excelente🙂

@jaimeviloriogreen 5 месяцев назад

Aunque tus aportes son invaluables, recomiendo ver este tuto con la documentación en la mano, primero porque obviamente no puedes cubrir todo lo que un framework implica en unas cuantas horas de video, y segundo porque la tecnología cambia a ritmo vertiginoso, por ende, no hay mejor lugar que ir a la fuente.

@Grinberg_Ch Год назад

muy interesante

@matiaslombardi6236 11 месяцев назад

Hola Fazt la verdad excelente video muy practico y perfecto para quienes estamos arrancando a probar Astro !. Te hago una consulta, al querer ejecutar gh-pages mediante el script (npm run deploy) me indica que no reconoce a gh-page como un comando valido!? sabras porque sucede??

@josejara8096 Год назад

Tengo un sabor agridulce de esta herramienta, es verdad que esa fácil para algunas cosas, pero para otras como blogs con URL dinámica, no es tan sencillo, al final me pase a svelte-

@8koi245 Год назад

Let's fucking go!!! midu me recomendó esta madre Holy fuck that's a slow pace if I have ever seen one, jesus

@json2265 Год назад

grax

@efrenanastacio6337 5 месяцев назад

En mi caso para el problema de que no carga el css, en la carpeta dist le cambie el nombre a la carpeta y el archivo que se genera por defecto cuando se ejecuta el comando npm run build, y con ello me funciono, en index.html deje el link solo a la carpeta css de esta forma: href="css/main.css" y todo funciona bien

@franikator2 7 месяцев назад

Tengo un problema. Tras poner npm run build, me genera la carpeta Dist pero la ruta en el HTML hacia el CSS la crea errónea con un / por delante. Tengo que borrar ese / de cada HTML.

@valentinfeller121 Год назад

Listo, solucionado. Faltaba un nivel en la carpeta de enlace de la etiqueta del head :)

@sandrosimon Год назад

Para manejar estado hay una librería llamada nanostores que se menciona en la documentación de Astro. ¿O sería mejor integrar con React sólo para incluir manejo de estados? Slds.

@jhonnieralexandercastrohin3782 8 месяцев назад

me encato tu curso , pero una pregunta por que mi codig de astro auto completa mi css en solo alguno arcivos .astro y en otros me toca, colocar el css por mi cuenta

@nilspineda Год назад

Excelente video Fazt muchas gracias por seguir haciendo tutoriales, Una pregunta esto lo puedo desplegar en cualquier servidor como un hosting compartido?

@FaztTech Год назад

Si claro, al final como son html css y demás puedes subirlo en hosting compartidos también con ftp incluso

@JEISSONPRISIONERO Год назад

He utilizado Jekyll, lo veo bastante similar

@lautarodellamea3582 Год назад

Hola fazt tendras las miniaturas de tus videos? estan muy copadas!

@martinrgerez453 6 месяцев назад

Hola que tal, gracias por el tutorial, te consulto, las configuraciones para deployar en github pages que mostras en tu video siguen vigentes? Porque estoy teniendo dificultades para publicar mi sitio (me funciona de forma local) pero no puedo deployar en ghp , por otro lado en el repo publico que tenes no figuran los ultimos commits de deploy, no se ve la carpeta dist.

@ejgallegos Год назад

Consulta, integrando Astro con un CMS, hay que hacerle un build cada vez que se realice un CRUD al CMS?

@Myglobalsounds Год назад

TKM FAZT.

@isaacmc09 Год назад

Gracias por el curso, pero tengo una pregunta. Por SEO no es mejor que el sitio web solo debe tener un solo archivo index.html o ya no es necesario.

@Runtimevic Год назад

Hola muchas gracias por este curso de Astro, una pregunta como se podría añadir una Autorización con Login, para que la primera pagina sea la de autorizacion con login..., solo se pudiese entrar a ver la documentación si te sabes el usuario y el password...

@alejandroarbelaez7360 Год назад

Hola me podrían decir por favor, que tema es el que se usa en el VS del video y la fuente? Gracias

@felipefs106 5 месяцев назад

Muy buen curso!, he estado siguiendo el tutorial y en la sección de cargar imágenes vía import me da problemas al usar el bgImage. Revisando la página de Astro mencionan el uso del componente Image y con ese no tengo problemas, por si a alguien le sirve!

@JuanPablo-he4cx 2 месяца назад

Hola, gracias por tus videos, como hacer para que la consola tenga esa apariencia?

@CeratiGilmour Год назад

Una consulta, astro se podría combinar con flask(?)

@franciscogarcia-sq5ek 4 месяца назад

hola fazt, un poco tarde jeje... queria preguntarte que fuente usas. Me encanta que se vean asi de chiquitas y gorditas la letras

@cesarquispe2413 11 месяцев назад

Hola! muy buen tutorial! solo tengo el problema al final con el deployment. Al parecer no me detecta el CSS que se genera para los estilos. Hice el cambio en el archivo de astro.config.mjs pero nada. ¿Alguna idea?

@claudiohbl 8 месяцев назад

Hola, no había escuchado antes de Astro. Comencé con este curso, y tengo el primer inconveniente. con la importación de imágenes. me marca con rojo src. tengo lo siguiente: import bgImage from "../../edificios.jpeg"; y el mensaje es: El tipo 'ImageMetadata' no se puede asignar al tipo 'string'.ts(2322) astro-jsx.d.ts(701, 3): El tipo esperado procede de la propiedad "src", que se declara aquí en el tipo "ImgHTMLAttributes" The image URL. This attribute is mandatory for the element. On browsers supporting srcset, src is treated like a candidate image with a pixel density descriptor 1x unless an image with this pixel density descriptor is already defined in srcset, or unless srcset contains 'w' descriptors. (property) astroHTML.JSX.ImgHTMLAttributes.src?: string me puedes ayudar por favor?

@ekuuin 6 месяцев назад

Hola, sucede que, al importar el archivo, bgImage es un objeto que tiene las siguientes propiedades de la imagen: src width height format orientation La solución es usar la propiedad src que guarda la ruta del archivo, quedando así

@tobbye280 Год назад

Si ya se react, vale la pena cambiar a astro? Cual es la ventaja de astro por sobre react?

@rodolfolopezp Год назад

Pero lleva casi el mismo trabajo de desarrollar en React o Next js. Entonces no es mejor desarrollar en esos framework o librerías?. Que es la ventaja de astro sobre ellos?

@sandrosimon Год назад

Hola. dejando a un lado la curva de aprendizaje, supongamos que ya domino Next.js ¿alguna ventaja de Astro por sobre Next.js que también me permite crear sitios estáticos? Gran video, saludos desde Nazca Perú

@vic89 Год назад

Ninguna desde mi punto de vista. Proyectos más livianos quizás 🤷🏻‍♂️

@soundgenkoz2098 Год назад

Hola Fast, quizá puedes hacer un proyecto de Angular con su nueva versión y enseñando los cambios se han realizado. 🙂 Y aprovecho para agradecerte, con tus vídeos he logrado muchas cosas, aprendiendo de manera autodidacta.

@JuanManuel-ed1xf 6 месяцев назад

Buenas a mi me sucede que cuando pongo el "npm run build" en la consola. me exporta todo menos la carpeta assets que es donde tengo mis imagenes entonces... que deberia configurar para que aparezca en el build?

@elbananerosoyyooo8394 4 месяца назад

hola tengo una duda en vue 3 si en inicio.vue tengo un formulario de categoria con el nombre y imagen cuando registro s guarda bien el nombre de la imagen pero el fisico archivo como puedo hacer que se guarde en una carpeta en la raiz de mi proyecto porfa ayuda

@santoszet Год назад

Podrías hacer algunos tiktoks o reels para ver algunos ejemplos de paginas creadas usando Astro? Para conocer un poco el alcance que puede tener puede ser buena idea

@FabianMartinezRincon Год назад

@sergioqueirolo149 5 месяцев назад

Por favor haz un curso de astro 4.0 , usando un navbar moderno con animación sin Javascript y compatible con dispositivo mobile, ¿ Cómo hacen ese fondo con animación fluida en las web ?

@mordecaii14 Год назад

Cuál sería la mejor manera para que el sitio sea responsivo, pero sin utilizar tailwind ni ningún framework de estilos?

@codesoon9668 Год назад

@Fazt me encantaria que hicieras un CMS usando HyGraph

@jhonatanvargas3218 Год назад

Pasen wallpaper xd, buen video!

@Matheus_1582 Год назад

Oi...sera possível você dar uma outra aula sobre o ASTRO mas desta vez o se o seginte comando.. NPM INIT ASTRO-APP

@gilbertmatosortiz1522 10 месяцев назад

Hola Estoy haciendo un sitio con Astro, integré la librería de React e insnstalé la dependencia de React-icons para los íconos. Utilizo los íconos como normalmente lo utilizaría en un proyecto React. Pasa que cuando ejecuto el comando npm run build, salta un error que dice que los íconos (componentes de React) no se están exportando. Necesito ayudaaa