Curso de Astro, Generador de Sitios Web Estáticos
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
Пікірлер: 171
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
Жыл бұрын
ط
Qué chulada de framework, se siente tan natural y muy fino, nada de cosas raras jaja. Felices fiestas Faztro :D
Eres el mejor Fazt, increíble forma de finalizar el año, eres simplemente mi ídolo.
E escuchado mucho sobre Astro, ahora gracias a ti, comenzaré a estudiarlo! Exelente fazt nunca dejas de sorprenderme
Estaba esperando este tutorial, gracias Fazt!!!
El mejor regalo de Navidad. Muchas gracias Fazt
Varias horas pero muy bueno el contenido, explicado a detalle! Excelente Fazt!
Fazt nuevamente la rompes, muchas gracias por tanto contenido tan genial.
Empecé en este mundo desde tus primeros cursos de python, y gracias a ti descubri lo que me apasiona, gracias por inspirar a otros!
Gracias apito, feliz navidad. Todo el año nos das los mejores regalos.
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
Fazt, de los mejores divulgadores de programación e informática!! Explicaciones claras y contenido de muy alta calidad!
Conocer este Framework, fue como amor a primera vista, me encanta.
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 💥💥
Gracias Fazt, un muy buen curso, explicas todo muy bien y a detalle
estaba esperando este tuto con muchas ansias!!! gracias Fazt
Que chingon eres Fazt!!! muchas gracias por todo lo que compartes
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! ✨✨
Hasta el momento, este ha sido el mejor tutorial de astro que he visto! Muy muy bueno! Gracias por compartir
El mejor! Todo lo que he aprendido empezó con un video de Fast!
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!
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
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👍✌
Eso sí es un buen regalo de navidad. Gracias Fazt ;)
Excelente curso, sos muy claro para transmitir y se entiende todo muy bien! Muchas gracias!!!!
Fazt excelente !!!! gracias por incrementar mis conocimientos, siempre te sigo!!!
genial!!, una delicia para cerrar el 2022 con la potencia de Astro!.
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
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
Excelente curso Gracias Fazt.!!!
Gracias Fazt, justo quería aprender Astro❤
Gracias Fazt... Muchas gracias!!!
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 🎉
gracias Fazt haces un gran trabajo por la comunidad DEv.!
Espero que hayas pasado una Feliz, Bendecida y Hermosa Navidad 🙏 Gracias muchas gracias por tu dedication a enseñar.
El primero en llegar vamos a darle A ver estás 4 hrs de material de calidad
tremendo Muchas gracias bro, sin ti no se que haría
Excelente como siempre!!!
Me encantó el video. esperando el curso de tailwind
Maestro de maestros.
Y cuando pensé que papá Noel se olvidó de mi.....llegó fazt con un curso!....gracias bro!!
Excelente video nos hizo a mi amigo y ami incursionar este mundo de Astro gracias Fazt
Muchas gracias por tu aporte. Sumamente claro y facil de seguir. Incluso fue mi primera vez utilizando tailwind, lo que facilita mucho el desarrollo.
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 🎉
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... 🤗🤗🤗🤗🤗
Sos un genio! Gracias por el video.
Felices fiestas 🎄🎆🎇 y a seguir celebrando la tercera 🇦🇷🏆🌟
Excelente estimado FAZT
Gracias Fazt, muy claro, me fallo el deploy, lo hice git y en Netlify
Очень полезное видео для сообщества, спасибо!
Te quiero mucho tio Fazt
sos lo más Fazt!
¡Gracias!
excelente video
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 kzread.info/dash/bejne/mox4r7medJOrgrA.html
muy interesante
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
8 ай бұрын
Si es cierto lo que dice con vercel no te da errores al momento de despliegar tu web, muchisimas gracias por el tip
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
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-
aparte de este curso tan bueno, quiero tener tu fondo xD. compártelo fazt.
excelente🙂
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.
Excelente contenido como siempre, muchas gracias!! Una pregunta/solicitud, ¿ Podrías hacer un curso para Wordpress headless con Astro??
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 ¿🤔?
Listo, solucionado. Faltaba un nivel en la carpeta de enlace de la etiqueta del head :)
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
TKM FAZT.
grax
Let's fucking go!!! midu me recomendó esta madre Holy fuck that's a slow pace if I have ever seen one, jesus
He utilizado Jekyll, lo veo bastante similar
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??
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
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?
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
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.
Consulta, integrando Astro con un CMS, hay que hacerle un build cada vez que se realice un CRUD al CMS?
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
Жыл бұрын
na
Hola me podrían decir por favor, que tema es el que se usa en el VS del video y la fuente? Gracias
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.
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...
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!
Si ya se react, vale la pena cambiar a astro? Cual es la ventaja de astro por sobre react?
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.
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.
Hola, gracias por tus videos, como hacer para que la consola tenga esa apariencia?
Felicitaciones por el tutorial, hay posibilidad de instalar el framework en macOS?
Una consulta, astro se podría combinar con flask(?)
Saludos, tengo problemas al generar la carpeta assets con npm run build. Se convierte el codigo, ayuda por favor
@Fazt me encantaria que hicieras un CMS usando HyGraph
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
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?
Cuál sería la mejor manera para que el sitio sea responsivo, pero sin utilizar tailwind ni ningún framework de estilos?
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?
Si tenéis problemas con la etiqueta script, añadidle el atributo type="module"
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 🤷🏻♂️
Hola fazt tendras las miniaturas de tus videos? estan muy copadas!
Pasen wallpaper xd, buen video!
hola fazt, un poco tarde jeje... queria preguntarte que fuente usas. Me encanta que se vean asi de chiquitas y gorditas la letras
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
lo de la imagen no me funciono me toco importar import { Image } from "astro:assets"; y usar esa etiqueta para poder poner la foto desde una carpera de src