Desplegar tu web en Astro en la nube

🤩 ¡Solo nos queda un paso!

Hay muchas formas de desplegar en la nube una web creada con Astro.

Vamos a ver dos que son rápidas y son menos habituales.

🎧 Podcast: ⭐️ WRP 103. Así despliego en producción

Crea una build de tu desarrollo ¶

Primero de todo vamos a ejecutar esto en tu carpeta de proyecto:

Si todo va bien, al terminar tendrás una carpeta /dist en tu proyecto.

👀 Fíjate en lo que hay dentro: HTML, CSS, JavaScript y los recursos que hayas añadido del tipo imagen, fuentes, ficheros…

Desplegar con arrastrar y soltar en Netlify ¶

Primera opción, la más rápida de todas.

💦 Date de alta en netlify.com. Para lo que vamos a necesitar basta con la cuenta gratuita.

Cuando hayas completado la información vete a “Sites” en el menú principal.

Verás esto al final de la página.

Se trata justo de eso. Arrastra la carpeta /dist de la que hablamos antes y suéltala allí.

Netlify va a entender lo que tienes dentro y va a comenzar su proceso de despliegue. Puedes verlo en la pestaña “Deploys”.

💪🏼 Unos engranajes después tendrás el resultado.

Te regala un subdominio del tipo nombre-proyecto.netlify.app.

⚡️ En Netlify también puedes desplegar de forma más eficaz para subir actualizaciones a través de su línea de comandos o conectando un repositorio de Gituhb o Gitlab a tu proyecto.

Desplegar con el CLI de Vercel ¶

Todas estas compañías quieren ponértelo fácil.

En Vercel podemos utilizar su herramienta de línea de comandos para hacer el despliegue y pasar a producción.

💦 Primero, date de alta en vercel.com. De nuevo su parte gratuita te será más que suficiente.

Ahora descarga su herramienta de CLI:

En la carpeta de proyecto ejecuta

Te hará varias preguntas:

• Primero tendrás que hacer autorizar el proceso (se hace a través del navegador, el asistente te guiaría por todo el proceso)
• Si es un proyecto nuevo (evidentemente sí)
• Nombre del proyecto
• Los comandos a para lanzarlo (npm run build es el que define por defecto, está correcto)

Procesará todo lo que tienes y si va bien te va a devolver, en la terminal, la URL de tu proyecto.

Verás que si entras en el dashboard de Vercel tendrás ya tu nuevo proyecto con todas sus opciones.

Vercel marca una diferencia entre los “deploys” que van a producción y los que no.

Aunque tu portfolio con Astro ya está disponible, mejor si tenemos una URL más amigable.

💦 Ejecuta vercel --prod en tu carpeta de trabajo del portfolio de Astro.

El proceso se lanza de nuevo, con menos preguntas, y te devolverá la URL definitiva del tipo nombre-proyecto.vercel.app.

👀 También Vercel te permite tener un dominio apuntando a tu proyecto y otras configuraciones interesantes sin salirte de su versión gratuita.

¡Terminaste! ¶

¿Cuál es el siguiente paso? ¶

Suscríbete a nuestra newsletter dominical para no perderte los siguientes bootcamps!

¿Tienes dudas? ¶

Pregunta aquí.