Tu primer proyecto en Astro (Framework de sitios estaticos)
HTML-код
- Опубликовано: 7 сен 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 👊
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.
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!!
Fazt, yo apenas soy estudiante y no sabes como me ayudan tus videos son lo maximo
Gracias Fazt; simplemente espectacular. Me das un punto de partida poderoso y muy sencillo de comprender.
Muchas gracias por compartir generosamente tus conocimientos Fazt. Dios y el Señor Jesucristo te bendigan enormemente, muchos saludos desde Chile!
muchas gracias me ha sido 100% útil, 0 desperdicio!!!
Sos lo más amigo, sigue subiendo contenido de Astro. Gracias
Gracias por el video! Un video de integración de Astro con Hotjar estaría de lujo.
No sé si lo especificas en algún minuto del vídeo, pero Astro no solo es para sitios estáticos.
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.
Maestro que facil es seguir sus tutoriales muchsimas gracias un sub nuevo bro
¡Gracias Fatz! Estaría bueno un vídeo para deployar modelos de Machine learning usando Astro.build
Buen video, gracias !
Una vez más simple y sencillo, gracias 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 .
Gracias Fazt, por tus contenido son excelente, saludos desde Venezuela
Astro es lo masssssssssaaa
Gracias hno. Contigo se aprende más fast.
Excelente, como siempre. Muchas gracias.
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
Que buena explicación, muchas gracias.🔥🤍
Excelente, mas de astro y quiwk por favor maestro.
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
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? ruclips.net/video/sOXW0ZnJxbQ/видео.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!
tkm fazt, gracias por siempre darnos contenido de calidad
Gracias, que capo
gracias Fazt, eres un tesoro :)
Maestro de maestros.
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.
excelente aprender contigo, gracias crack
Me gustan tus tutoriales amigo. Saludos
Gracias berserker!
Excelente
Lo máximo fazt!!!
Muchas gracias Fazt.
A ti ace
Bro deberias de traer un video analizando la tecnologia reciente de python llamada REFLEX que es un framework fullstack
Puedes crear un vídeo explicando como crear un formulario para enviar emails en Astro?
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.
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.
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?
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
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
gracias por la explicacion y para sitos dinamicos ?? con base de datos algun ejemplo
Muchachos alguna idea del porque al construir el proyecto ya con el npm run build, ningun estilo css se aplica?
Hola. Se puede subir un proyecto de ASTRO a Hostinger? y usar también dominio de ahi?
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.
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 🙏💕
Como puedo agregar un formulario para la seccion de contacto? Como le doy la funcionalidad para recibir correos desde ahi
un video de frame motion estaria super
Es una muy buena biblioteca de animaciones, voy a crear un tutorial del tema pronto
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?
Fazt actualizaras el curso de Astro? Ya que salieron dos nuevas versiones desde que hicistes el primer curso
Algun curso de astro con three js
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 ?
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?
Amigo lograste usar eslint con astro y typescript? No se qué hago mal pero no funciona 😢
bien fazt :v
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
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??
Hola Fazt
Como podria usar astro en mi frontend y tener un backend en python?
Cuando harás un video de un proyecto full stock con next y otros framework 😢
Gracias ❤❤. Pregunta, ¿Cómo tienes autocompletado en la terminal?😮😮😮
Yo uso ohmyposh para eso: ruclips.net/video/d9y0l7yY404/видео.html
como puedo agregar un video?
Es Astro lo suficientemente completo como para desarrollar una web app con autenticación de usuarios basada en cookies y jwt?
Que diferencia hay entre este Framework y NextJS?
Creo que es buena idea para un video, voy a crear algo pronto :)
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
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
no encuentro el link a tu curso de astro
Como se llama la terminal que usas.?
Powershell
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
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 ??
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.