Tu primer proyecto en Astro (Framework de sitios estaticos)
ฝัง
- เผยแพร่เมื่อ 17 ต.ค. 2024
- Astro es un framework de desarrollo web Frontend que permite generar sitios web estáticos usando código que se parece mucho a los Frameworks de Frontend de Javascript como React, Vue, o Svelte, y similares. De hecho Astro puede importar componentes de estos otros frameworks, pero siempre enfocandose principalmente a generar sitios web que no ejecutan logica de backend o no mucha. En este tutorial vamos a crear un proyecto basico de Astro, les mostrare algunos conceptos muy basicos y terminaremos subiendo nuestro proyecto a Netlify y añadiremos incluso un dominio personalizado para que puedan ver como se configura en producción.
Curso Recomendados
Curso de React: • Curso de Reactjs desde...
Curso de Nextjs: • Curso de Nextjs desde ...
🛒 Fazt Web
Tienda Online: store.faztweb....
⭐ Cursos Recomendados
Curso de Nodejs ⮕ fazt.dev/nodejs
Curso de Python⮕ faztweb.com/py...
Curso de React ⮕ • Curso de Reactjs desde...
Curso de Javascript para React ⮕ • Javascript para Aprend...
🗣 Redes Sociales
Github ⮕ github.com/fazt
Twitter ⮕ / fazttech
Discord ⮕ faztweb.com/so...
Whatsapp ⮕ www.whatsapp.c...
🎒 Servicios Recomendados
DigitalOcean ⮕ m.do.co/c/8ef2...
Namecheap ⮕ namecheap.pxf....
Ledger ⮕ (Hardware Wallet) bit.ly/3ijsVNW
SiteGround ⮕ bit.ly/31u9ZEk
Cloudinary ⮕ bit.ly/3ohNlJ7
Notion ⮕ affiliate.noti...
Codecrafters ⮕ app.codecrafte...
Puedes encontrar la lista de tutoriales de React en:
faztweb.com/react
#astrojs #javascript #desarrolloweb #reactjs
Una pasada lo que explicas en tan poco tiempo y todo al grano. Desde hoy tiene un nuevo seguidor... eres un crack!!
Fazt, de verdad has cambiado mi vida. Voy agradecerte toda una existencia
porq mi bro
Por qué lo dices mano?
Astro es hermoso, creo que se volverá un estándar o punto de partida para muchos proyectos.
Confieso que desde que veo las publicaciones de Fazt he conocido y aprendido de muchas tecnologias y temas que solo te enteras si trabajas y tienes experiencia como Web Developer⌨. Gracias Fazt 👊
Fazt, yo apenas soy estudiante y no sabes como me ayudan tus videos son lo maximo
Excelente video amigo, muchas gracias resolviste todas mis dudas. 😊😊
Muy util! como siempre! ^^
Una sugerencia!. Se me ocurren 2 vídeos muy útiles sobre Astro, y no hay mucha info en YT, por no decir apenas nada xD.
Astro da la opción de hacerlo funcionar a modo hibrido, pinta muy bueno. Cuando le instalas para ello node @astrojs/node, tienes la opción de configurar los modos middleware y standalone. Dicho esto, un video podría tratar del modo hybrid, creando una carpeta api a modo backend con firebase o sin el (otro video XD). Y luego el front en el mismo proyecto. Y el otro video que trabaje el middleware para probarlo. Tiene que ser muy buena esa utilidad!!
Yo ando deseando probarlo ^^,
Un saludo!
Muchas gracias por todo tu contenido!!
Gracias Fazt; simplemente espectacular. Me das un punto de partida poderoso y muy sencillo de comprender.
muchas gracias me ha sido 100% útil, 0 desperdicio!!!
Maestro que facil es seguir sus tutoriales muchsimas gracias un sub nuevo bro
Muchas gracias por compartir generosamente tus conocimientos Fazt. Dios y el Señor Jesucristo te bendigan enormemente, muchos saludos desde Chile!
La verdad que no conocía Astro, se ve bastante bien y esta increíble ademas con tu explicación lo entendí absolutamente todo 😄, estoy deseando probarlo en nuevos proyectos. Te quiero Fazt ❤
Es similar a pug, utilizando layouts, aunque astro y sus componentes son mass actualizados y en tendencias.
Gracias por la explicación del deploy, siempre tenía esa duda y aclaraste todo.
Yo ni sabia que era deploy, pero lo hizo facil Fazt.
Exelnte Video, podrias esplicar los pros y los contra de Vercel, Netlify, CloudFire, cual se deve usar y para que proyectos, Gracias! , como un vs .
Sos lo más amigo, sigue subiendo contenido de Astro. Gracias
Una vez más simple y sencillo, gracias Fazt !!! 💯
Gracias Fazt, por tus contenido son excelente, saludos desde Venezuela
Gracias por el video! Un video de integración de Astro con Hotjar estaría de lujo.
Buenas, viendo este vídeo quería consultarte si puede hacer un vídeo sobre los mejores lenguaje para desarrollo web, software, etc para el 2024.
En mi punto quisiera saber que lenguaje seria ideal para empezar a desarrollar web desde cero.
Tengo una pregunta, para un sitio web estático no sería mejor usar Webflow o Framer? Creo que harías todo más rápido y seguirías teniendo un sitio web rápido y optimizado.
Fazt, vas a hacer un curso actualizado y completo de Astro, ahora que está por salir la versión 5? Estaría genial que explicarás las ViewTransition y las Server Island.
Gracias por tu contenido te sigo desde 2020 ❤. Saludos desde Argentina 🇦🇷
donde estuvo este canal toda mi vida? literalmente es Fazt Code (fast code)
waaa tiene un parecido react js cuando hago el props jaja me recordó, me enctanta tu voz no es chillosa ni gruesa .
No sé si lo especificas en algún minuto del vídeo, pero Astro no solo es para sitios estáticos.
Que buena explicación, muchas gracias.🔥🤍
Gracias hno. Contigo se aprende más fast.
Astro por todos lados ando viendo ahora. Tremendo framework. Tenés mas informacion o videos sobre la parte del deploy que hiciste en tu dominio?
Hola. Se puede subir un proyecto de ASTRO a Hostinger? y usar también dominio de ahi?
¡Gracias Fatz! Estaría bueno un vídeo para deployar modelos de Machine learning usando Astro.build
tkm fazt, gracias por siempre darnos contenido de calidad
Excelente, como siempre. Muchas gracias.
Buenísimo... por favor más tutoriales de Astro... tal vez un poco más avanzados... (muchas gracias)
Claro que sí! Muy pronto crearé otros más :)
te mandé un correo para pedir un presupuesto
Es que no puede haber otro canal que explique mejor las cosas! Fazt me encantaría que explicaras la API de View Transitions, la que trae Astro o también sino la vanilla de google, gracias!
si los hay bro pero en ingles
Fazt actualizaras el curso de Astro? Ya que salieron dos nuevas versiones desde que hicistes el primer curso
Yo desde que vi el otro curso de Astro me he quedado enganchado con Astro.js
Podrías indicarme el link del otro curso que mencionas.
Desde ya muchas gracias.
Te refieres a este curso? th-cam.com/video/sOXW0ZnJxbQ/w-d-xo.html de hace un año?
@@DiegoRodriguez-pg8uw Muchas gracias, no sabía de este video.
@@ace_3315 te recomiendo que lo veas con la documentación al lado. ¡Éxitos!
Excelente, mas de astro y quiwk por favor maestro.
gracias Fazt, eres un tesoro :)
gracias por la explicacion y para sitos dinamicos ?? con base de datos algun ejemplo
Fazt, ¿podrías crear un tutorial o video informativo sobre Astro utilizando un CMS headless self hosted, desplegando todos los servicios necesarios con Docker? Gracias de antemano.
Astro es lo masssssssssaaa
Buen video, gracias !
Una consulta, se puede que no se recargue la página cuando utlizas enlaces? Habría alguna forma de hacerlo sin que se recargue la página?
Maestro de maestros.
Tengo una duda con astro. Si mi página web, consume una base de datos para mostrar la información, el usuario solamente va a interactuar para ver la información. Conviene usar astro??
Lo máximo fazt!!!
Es Astro lo suficientemente completo como para desarrollar una web app con autenticación de usuarios basada en cookies y jwt?
Gracias ❤❤. Pregunta, ¿Cómo tienes autocompletado en la terminal?😮😮😮
Yo uso ohmyposh para eso: th-cam.com/video/d9y0l7yY404/w-d-xo.html
Gracias crack! puedes por favor algun dia hacer algo similar con Wordpress, headless con Astro, o bien Woocommerce, es algo muy practico para aprovechar todo la administración de contenidos o productos de Wp con la potencia de JavaScript. Gracias maestro.
no es mejor Nuxt por ejemplo? para crear sitios web estáticos o interactivos
Nuxt es mas un framework para crear aplicaciones dinamicas, Astro solo genera principalmente sitios estaticos. Si vas a crear una aplicacion con conexion a base de datos, desarrollar una API e interfaces mas interfactivas, Nuxt es mejor opcion
Amigo lograste usar eslint con astro y typescript? No se qué hago mal pero no funciona 😢
Hola FastCode, tengo una duda, ¿Puedo desplegar una página estática creada en astro en github page? Estoy aprendiendo y he decidido hacer un portfolio como prueba siguiendo tu video para inicializar y el proyecto. Y me gustaría poder tener esa página en github page, ya que no cuento con un servidor donde desplegar.
por lo general aqui uso Netlify que ofrece un plan gratuito, pero si quieres desplegar en Github pages tambien es posible:
docs.astro.build/en/guides/deploy/github/
Voy a tratar de crear en lo pronto un tutorial de como desplegar astro en Github pages
Puedes crear un vídeo explicando como crear un formulario para enviar emails en Astro?
Me gustan tus tutoriales amigo. Saludos
Como puedo agregar un formulario para la seccion de contacto? Como le doy la funcionalidad para recibir correos desde ahi
Algun curso de astro con three js
Gracias, que capo
capoooooooooooooooo, gracias
excelente aprender contigo, gracias crack
Porqué mi website en astro, corre perfecto a nivel local pero al subirlo al servidor aws solo veo el directorio de archivos como si no encontrara la landin page ?
Muchachos alguna idea del porque al construir el proyecto ya con el npm run build, ningun estilo css se aplica?
Hola Fazt
Como podria usar astro en mi frontend y tener un backend en python?
Hola...puedes hacer un tutorial de como conectar una app web y una app movil con la misma db, con autenticación y todo lo demas?
Excelente
Bro deberias de traer un video analizando la tecnologia reciente de python llamada REFLEX que es un framework fullstack
Estos videos son oro señores, por cierto cual temas usas en VS code, se ve bastante fino saludos
De momento el tema que uso es Tokyo night dark, pero tambien he usado otros, aqui los listo:
faztweb.com/contenido/temas-favoritos-vscode
@@FaztCode gracias fazt 🙏💕
Que diferencia hay entre este Framework y NextJS?
Creo que es buena idea para un video, voy a crear algo pronto :)
Gracias berserker!
Cuando harás un video de un proyecto full stock con next y otros framework 😢
Gracias Fazt. Me gustaría una aplicación de calculadora ( ya sea financiera, de calorias consumidas o de credito hipotecario) , entre Astro y MongoDb.
Suena interesante realizar esas apps
Muchas gracias Fazt.
A ti ace
para instalar nodejs puedes ir a la terminal y escribir `winget install nodejs` el unico requisito es utilizar windows 10/11 y tener la tienda windows actualizada
Hola, excelente!!.. pero mi duda es si Astro me puede servir para paginas con poca consultas, como un contacto o reserva de citas o busqueda???.. o debo usar Nextjs en su lugar??... saludos
un video de frame motion estaria super
Es una muy buena biblioteca de animaciones, voy a crear un tutorial del tema pronto
no encuentro el link a tu curso de astro
como puedo agregar un video?
Será acaso astro el framework definitivo?
entre next y astro. Cuál te quedas?
Nextjs aplicaciones dinámicas, y astro para aplicaciones estáticas. Básicamente
@@FaztCode Pero si Astro tiene la opcion de agregar react , vue entre otros , entonces tambien es posible crear aplicaciones dinamicas en Astro ? algo como hibrido lo estatico netamente con Astro y dinamico por ejemplo agregar react lo necesario para la funcionalidad dinamica, no seria mejor en ese caso ??
Genial que pro encantado de seguirte
Conoces alguna libreria para hacer zoom a imagenes en react nativr
Esta zoomable-view: www.npmjs.com/package/@openspacelabs/react-native-zoomable-view
Y esta react-native-zoom-viewer: www.npmjs.com/package/react-native-image-zoom-viewer
@@FaztCodeencerio muchas gracias que dios te vendiga
Como se llama la terminal que usas.?
Powershell
bien fazt :v
Me gustria un video explicado mas lentamente de como subir cambios a netlify a atraves de git, de los commits y como se va desplegando.
Uhmm creo que también es buena idea, voy a crear algo pronto :)
@@FaztCode de 10 muchas gracias, por el material de calidad!
17:44 que cutre amigo... en lugar de cambiar la variable la dejas comentada. Muy mala práctica.