Curso de Astro, Generador de Sitios Web Estáticos

No video

Curso de Astro, Generador de Sitios Web Estáticos

Рет қаралды 244,458

Күн бұрын

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/faz...
Í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/8ef2...
Expo ➞ bit.ly/2WpYKtx
Cloudinary ➞ bit.ly/3ohNlJ7
Notion ➞ notion.grsm.io...
#desarrolloweb #html #javascript

Пікірлер: 178

@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 Жыл бұрын

@Sebastian-ml1xu 3 күн бұрын

Deje videos de Minecraft de fondo para dormir y desperté acá, que loco, buen video

@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

@fun_iqp Жыл бұрын

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

@pablotaddei 10 күн бұрын

extraordinario cursos muchas gracias 👏👏👏👏

@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!

@WayraInnovaTech 13 күн бұрын

Gracias por este excelente tutorial, tuve dificultades, no me reconocía los archivos de estilo, pero se solucionó.

@gabz_23 Жыл бұрын

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

@DEVGITI 9 ай бұрын

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

@starckops8692 4 ай бұрын

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... 🤗🤗🤗🤗🤗

@camiloandressandovaldelgad281 7 ай бұрын

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

@luiseliasrodriguez4327 4 күн бұрын

Excelente video, aprendi y me divertí un montón, gracias.

@HarshitYadav-u2q Ай бұрын

Как всё отлично пояснено, для меня на данный момент - это лучшая связка, всё детально и по делу. Благодарю

@kinkyolga9668 Жыл бұрын

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

@ferxas4560 Жыл бұрын

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

@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

@ELCHOROPAVT-fu7xn 2 ай бұрын

Очень полезное видео для сообщества, спасибо!

@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 11 ай бұрын

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

@carlosurielvillegas3904 10 ай бұрын

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

@snackspixels Жыл бұрын

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

@jorgevalbuena4502 Жыл бұрын

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

@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!

@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! ✨✨

@valentinfeller121 Жыл бұрын

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

@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

@Sebacodex Жыл бұрын

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

@braidata Жыл бұрын

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

@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 💥💥

@AlfonsoNeilJimenezCasallas Жыл бұрын

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

@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 9 ай бұрын

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

@joseandresmontesino4214 Жыл бұрын

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

@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

@syberiaok Жыл бұрын

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

@pedrok1557 Жыл бұрын

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👍✌

@luisaquinoc6548 Жыл бұрын

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

@SlashOS 8 ай бұрын

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

@JuanManuel-ed1xf 9 ай бұрын

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?

@cesarcontrerasc2509 Жыл бұрын

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

@fredyvillamil Жыл бұрын

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

@carloscervantes3603 Жыл бұрын

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

@Thepizzaf 3 ай бұрын

Por si alguien le aparece este error en la terminal: PS C:\Users\Admin\Desktop\astro-curso> > astro-curso@0.0.1 dev > astro dev "astro" no se reconoce como un comando interno o externo, programa o archivo por lotes ejecutable. Lo mejor es instalar astro de forma local o global, en la terminal escribe : Global: npm install -g astro Local: npm install astro

@FaztTech 3 ай бұрын

Excelente aporte

@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 🎉

@cleidysbrooks Жыл бұрын

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

@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-

@jaimeviloriogreen 8 ай бұрын

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.

@carolinavallejo284 Жыл бұрын

Estaba esperando este tutorial, gracias 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 kzfaq.info/get/bejne/nr50gLqWqZapgoE.html

@cristiancano151 Жыл бұрын

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

@kalethdiaz7455 Жыл бұрын

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

@Andres_cali Жыл бұрын

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

@JimyDrive Жыл бұрын

El mejor regalo de Navidad. Muchas gracias Fazt

@leonelelizarraraz3004 Жыл бұрын

Me encantó el video. esperando el curso de tailwind

@efrenanastacio6337 8 ай бұрын

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

@sergiomo9977 Жыл бұрын

Excelente curso Gracias Fazt.!!!

@juanitoprz456 Жыл бұрын

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

@astrixwr5662 Жыл бұрын

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

@8koi245 Жыл бұрын

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

@elbananerosoyyooo8394 7 ай бұрын

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

@MauroToledo-xo2ru Жыл бұрын

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

@angelicagalloarias6146 Жыл бұрын

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

@carlosnavarrorodriguez1443 3 күн бұрын

Gracias bro!

@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 ¿🤔?

@jesus_84_ Жыл бұрын

Maestro de maestros.

@claudiohbl 11 ай бұрын

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 9 ай бұрын

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í

@sebastian-ns7ou Жыл бұрын

Sos un genio! Gracias por el video.

@gaarmy Жыл бұрын

Te quiero mucho tio Fazt

@osirisremolinam.4950 Жыл бұрын

Excelente estimado FAZT

@soyACHEE Жыл бұрын

Gracias Fazt... Muchas gracias!!!

@felipefs106 8 ай бұрын

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!

@sergioqueirolo149 8 ай бұрын

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 ?

@alvaroyanes Жыл бұрын

¡Gracias!

@alejandroarbelaez7360 Жыл бұрын

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

@wiliamsalexandertzocixcoy7439 Жыл бұрын

Gracias Fazt, justo quería aprender Astro❤

@JEISSONPRISIONERO Жыл бұрын

He utilizado Jekyll, lo veo bastante similar

@JimyDrive Жыл бұрын

Si tenéis problemas con la etiqueta script, añadidle el atributo type="module"

@GinoCiancia Жыл бұрын

Tengo un problema! sigue sin cargarme el css. En cada componente, utilicé "", todo es válido. Revise la configuración y tal, todo correcto. De hecho las rutas están bien, pero no me carga el css, por qué puede pasar esto? ayuda! 😢

@julian_ruizs 11 ай бұрын

lo solucionaste? a mi me pasa lo mismo

@benjanz Жыл бұрын

sos lo más Fazt!

@franikator2 10 ай бұрын

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.

@historiaseneltiempo6954 11 ай бұрын

Excelente como siempre!!!

@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

@gilbertmatosortiz1522 Жыл бұрын

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

@rauljauregi6615 Жыл бұрын

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

@ChaponanWill 5 ай бұрын

Solución a error: Parameter 'post' implicitly has an 'any' type. En Fetching de datos: { posts.map((post:any) => ( {post.userId} {post.title} {post.body} )) }

@llamasdelaf 8 ай бұрын

excelente🙂

@YosipmikeColin Жыл бұрын

Hola fazt no has pensado crear proyectos grandes y vender esos cursos en tu propia pagina web yo los compraría 🙏😎😁😁

@FaztTech Жыл бұрын

Este año tengo planeado empezar justamente con proyectos un poco mas reales y largos, pero creo que falta un par de meses para poder publicarlo. De momento seguire publicando cursos gratuitos por aqui, y algunos videos informativos :)

@herediiaa.e Жыл бұрын

@@FaztTech fast si haces cursos en udemy o los vendes por tu cuenta yo los comprare.

@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.

@ejgallegos Жыл бұрын

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

@didierlugo7892 6 ай бұрын

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

@linknatsu5426 9 ай бұрын

Hola buen tutorial para crear las paginas web estaticas pero me da error al momento de hacer el deploy ya que no me detecta el css me da que no lo encuentra a pesar que ya le puse todas las configuraciones

@JuanPablo-he4cx 5 ай бұрын

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

@mordecaii14 Жыл бұрын

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

@elisaldovegarosa4739 9 ай бұрын

Saludos, tengo problemas al generar la carpeta assets con npm run build. Se convierte el codigo, ayuda por favor

@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 Жыл бұрын

@Alekhinenz_ 4 ай бұрын

1:05:54 cuando ejecuto npm run build , la consola me tira el error : src/pages/posts.astro:20:16 - error ts(7006): Parameter 'post' implicitly has an 'any' type. posts.map((post) => { ~~~~ Result (8 files): - 1 error - 0 warnings - 2 hints Creo que es porque 'post' no lo declara en su archivo, no esta fuertemente tipado. Creo. Corrija quien sepa.

@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?

@patriciavelazquez5663 Жыл бұрын

¿POR QUE SE ME BORRÓ TODO LO QUE TENÍA EN ''dist''? No la borré manualmente.

@jhonatanvargas3218 Жыл бұрын

Pasen wallpaper xd, buen video!

@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.

@matiaslombardi6236 Жыл бұрын

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??