Publicar tu sitio web con Vercel y GitHub es el paso que convierte tu código local en una URL real que cualquier persona puede visitar desde su celular o computador. Si ya tienes tu proyecto en GitHub, te falta el último eslabón: un servicio que tome ese código y lo sirva en una dirección pública.
Esto te interesa si vienes de escribir HTML y CSS, ya hiciste tu primer push y quieres ver tu trabajo vivo en Internet sin pagar servidores ni subir archivos por FTP.
Qué es Vercel y por qué usarlo para desplegar tu sitio
Vercel es una plataforma que conecta tu repositorio de GitHub y publica automáticamente tu sitio en una URL real. Es gratis para proyectos personales y es la herramienta que están usando millones de desarrolladores hoy [02:00].
Existe otra opción común llamada GitHub Pages, pero si vas a continuar tu camino en desarrollo, probablemente la abandonarás pronto y terminarás migrando a Vercel. Por eso vale la pena empezar directo aquí.
¿Qué es Vercel? Es una plataforma de hosting que toma el código de tu repositorio en GitHub y lo publica en Internet con una URL pública, sin que tengas que configurar un servidor.
Cómo funciona el despliegue continuo entre GitHub y Vercel
Antes de hacer el deploy, hay una idea que vale la pena nombrar: el despliegue continuo. Hasta ahora, cuando guardabas un cambio, ese cambio quedaba en tu computador o lo subías a GitHub con un push y ahí se quedaba.
Con Vercel pasa algo distinto. Cada vez que hagas push a GitHub, Vercel se da cuenta automáticamente, toma la nueva versión del código y la publica sin que hagas nada más [01:20].
A este patrón se le llama continuous deployment y es como funciona el desarrollo profesional moderno: trabajas, haces commit, haces push, y el mundo ve tu trabajo. Sin pasos intermedios.
¿Qué es el despliegue continuo? Es un flujo en el que cada push a tu repositorio dispara automáticamente una nueva publicación de tu sitio en Internet, sin intervención manual.
Qué pasos seguir para conectar tu repositorio con Vercel
El proceso para publicar tu primer proyecto toma menos de un minuto:
- Entra a vercel.com y crea una cuenta usando GitHub, así Vercel ya queda enlazado con tu código.
- Indica que trabajas en proyectos personales y completa tu nombre.
- Elige importar un repositorio con Git y autoriza a Vercel para leer tus repositorios.
- Selecciona tu proyecto en la lista y dale import.
- Si tu sitio es HTML y CSS plano, no toques las opciones de configuración: lo que está en GitHub es exactamente lo que se va a servir.
- Haz clic en deploy y espera unos segundos.
En proyectos más complejos, Vercel también se encarga de procesar el código antes de publicarlo, pero ese tema lo verás más adelante en tu camino [03:30].
Cómo probar el despliegue continuo con un cambio real
La mejor forma de entender el flujo es verlo en acción. Vuelve a VS Code, haz un cambio pequeño y observa qué pasa.
En el ejemplo del proyecto Okini, había una imagen pequeña en el footer que se puso al inicio del curso para practicar y nunca se quitó. No aporta nada, así que se elimina del HTML, se guarda, y desde la terminal se ejecuta:
bash
git add .
git commit -m "Quitar imagen del footer"
git push
Al volver a Vercel, la plataforma ya detectó el cambio en GitHub y está construyendo la nueva versión sin que se lo hayas pedido. En unos segundos, al recargar tu URL pública, la imagen ya no aparece [05:40].
Ahí tienes el flujo completo: VS Code, Git local, GitHub, Vercel, URL pública. Cinco eslabones que conectan tu cabeza con cualquier persona del mundo que tenga Internet.
Por qué la diligencia importa cuando publicas código con tu nombre
Todo el código que está en esa URL lo escribiste tú. Cada etiqueta, cada estilo, cada función. Sabes qué hace cada línea, sabes por qué está ahí y si algo se rompe, sabes dónde buscar.
Eso no va a ser así siempre. El día que estés trabajando con inteligencia artificial en proyectos más grandes, vas a publicar código que no escribiste tú entero. Y ahí entra una de las cuatro Ds que has estado ejercitando: diligence [04:30].
Lo que publicas con tu nombre tiene que ser algo que entiendes, no algo que aceptaste sin revisar. La pregunta que vas a tener que hacerte cada vez que des push es: ¿entiendo esto lo suficiente como para defenderlo si algo falla?
Ahora que ya sabes publicar, aprovecha para hacer de tu proyecto algo que te represente. Deja en los recursos de la clase el link de lo que publicaste para que otras personas puedan verlo. ¿Qué cambio le harías primero a tu sitio para hacerlo tuyo?
