Tener un portafolio terminado en tu máquina local no es suficiente: necesitas que el mundo lo vea. Netlify ofrece hosting gratuito, dominios personalizables y una integración directa con GitHub que convierte cada commit en un despliegue automático. A continuación se explica paso a paso cómo llevar un proyecto de Astro a producción y aprovechar al máximo la integración continua.
¿Cómo preparar tu proyecto antes del despliegue?
Antes de publicar, conviene tener el contenido listo. Un consejo práctico es exportar tu currículum de LinkedIn, convertirlo a Markdown y pedirle a un agente de inteligencia artificial que llene toda la información del sitio [0:24]. Esto ahorra tiempo y garantiza consistencia en secciones como experiencia, habilidades y proyectos.
Una vez que el contenido, los colores y las imágenes del portafolio están ajustados, el siguiente paso es asegurarte de que el repositorio en GitHub refleje esos cambios en la rama main.
¿Qué es Netlify y cómo enlazarlo con GitHub?
Netlify es un servicio de hosting que soporta múltiples frameworks como Astro, Angular y Next [1:00]. Para comenzar:
- Busca Netlify en tu navegador y crea una cuenta enlazada a GitHub.
- Desde el dashboard, selecciona "agregar un nuevo proyecto" e importa un repositorio existente.
- Autoriza el acceso a tus repositorios y selecciona el proyecto que deseas desplegar [1:42].
Netlify detecta automáticamente la estructura del proyecto. Si es un sitio en Astro, preconfigura el comando npm run build y la carpeta de salida dist [2:30]. Solo necesitas confirmar y hacer clic en deploy.
¿Cómo elegir un dominio en Netlify?
Al crear el proyecto puedes personalizar el subdominio. Por ejemplo, nicobytes.netlify.app [2:14]. Si el nombre está disponible, queda reservado para ti. Más adelante puedes agregar un dominio personalizado como tunombre.com desde la sección de configuración de dominios [7:14].
¿Qué es el deployment automatizado con integración continua?
Una vez enlazado el repositorio, cada commit que llegue a la rama main dispara un nuevo despliegue sin intervención manual [3:00]. No necesitas ejecutar npm run build localmente ni subir archivos a mano. Este flujo se conoce como integración continua (CI) y es fundamental en el desarrollo profesional.
¿Cómo funcionan los previews de ramas en Netlify?
Netlify genera previsualizaciones automáticas para cada rama que tenga un pull request abierto [4:10]. Esto significa que antes de hacer merge puedes:
- Ver exactamente cómo luce el cambio en un subdominio temporal.
- Validar estilos, contenido e imágenes sin afectar producción.
- Compartir el enlace con tu equipo para revisión.
Este comportamiento es especialmente útil cuando trabajas con ramas como contribution y necesitas aprobar cambios visuales antes de integrarlos. Si un checker de formato falla, corriges, haces un nuevo commit y el pipeline vuelve a ejecutarse automáticamente [5:15]. Ese es el flujo real de desarrollo: cambios, validación, corrección y redespliegue.
¿Qué puntuación puedes lograr con Astro en PageSpeed?
Una vez desplegado en Netlify, es recomendable correr PageSpeed Insights directamente con la URL de producción, no en local [7:30]. Netlify aplica optimizaciones propias como compresión de imágenes y distribución mediante CDN (Content Delivery Network), lo que mejora significativamente el rendimiento.
Con Astro es posible alcanzar una puntuación perfecta de 100 en todas las métricas, especialmente en sitios de tipo landing page, portafolio o blog [7:50]. No es obligatorio llegar al máximo, pero sí demuestra la capacidad del framework y la calidad del proyecto.
¿Qué camino seguir después de publicar tu portafolio?
El enfoque de todo el proceso fue agnóstico: no se trató de aprender un solo framework, sino de entender cómo funciona el rol de front end developer [8:20]. Esto incluye conocer arquitecturas como server side rendering, static site generation y client side rendering, y saber cuándo aplicar cada una según el impacto en métricas y negocio.
Para proyectos estáticos y rápidos, Astro es la recomendación principal. Para aplicaciones más complejas con manejo de datos y formularios, la ruta natural es especializarte en alguno de estos frameworks:
- Angular para aplicaciones empresariales robustas.
- Next.js con React para versatilidad y SSR.
- Nuxt con Vue para una experiencia progresiva.
Dominar Astro junto con uno de estos tres garantiza oportunidades laborales sólidas y acceso a comunidades activas [9:00].
Comparte el enlace de tu portafolio final, muestra qué colores elegiste, qué imágenes agregaste y qué puntaje obtuviste en Lighthouse o PageSpeed. La retroalimentación de la comunidad es parte esencial del crecimiento profesional.
