Qué es el deploy y por qué Vercel
Deploy y es el acto de publicar tu proyecto en Internet para que cualquiera pueda acceder. Hasta ahora, tu código vivía solo en tu computadora (y quizá en GitHub). Hacer deploy es tomar ese código y ponerlo en un servidor siempre encendido, con una dirección que cualquier persona en el mundo puede escribir en el navegador. A Vercel es una plataforma que hace ese trabajo pesado por ti, gratis y en pocos segundos.
🧠 Analogía: deploy y abrir la tienda al público
Imagina que montaste una tienda completa dentro de tu casa: estantes listos, productos ordenados, un escaparate hermoso. Pero la puerta está cerrada con llave y nadie de afuera sabe que existe. Hacer deploy y abrir ese puerto es como poner un letrero en la calle. De repente, puede entrar cualquiera que pase por ahí.
- •Tu casa = tu computadora (solo tú la ves)
- •El cartel en la calle = la URL pública (la dirección)
- •Abrir el puerto = el deploy (publicar)
- •Vercel = el centro comercial que se encarga de todo esto por ti
💡 ¿Por qué Vercel y no un servidor propio?
De la forma tradicional, tendrías que alquilar un servidor, instalar un sistema operativo, configurar un servidor web (Nginx), ocuparte de un certificado de seguridad (HTTPS) y actualizar todo manualmente. Vercel lo hace por ti en segundos: HTTPS automático, actualización en cada git push, y un generoso plan gratuito para proyectos personales. Es el camino más rápido del código al sitio en línea. (Aprenderás sobre servidores propios en la Trilha 3: también tienen su lugar.)
Crear una cuenta y conectar GitHub
Antes de publicar cualquier cosa, necesitas una cuenta en Vercel y conéctala a tu GitHub. La buena noticia: ni siquiera tienes que crear una contraseña. Inicias sesión con tu propia cuenta de GitHub y Vercel empieza a "ver" tus repositorios. Este es el paso que conecta las dos herramientas.
Accede al sitio de Vercel
Abre el navegador y ve a la dirección oficial.
# En el navegador, escribe:
https://vercel.com
# Haz clic en el botón "Sign Up" (Crear cuenta)
Elige «Continue with GitHub»
No necesitas crear una contraseña nueva. Usa el inicio de sesión de GitHub.
Al hacer clic, GitHub abre una pantalla que te pide que autorizar a Vercel. Esto le da permiso a Vercel para ver tus repositorios. Haz clic en Authorize.
Elige qué repositorios habilitar
Tú decides: todos los repositorios o solo los que elijas.
GitHub pregunta si Vercel puede acceder todos los repositorios o solo algunos (Only select repositories). Para empezar, es más seguro dar acceso solo al proyecto que quieres publicar. Siempre puedes agregar más después.
👁 Qué vas a ver en la pantalla
Después de autorizar, Vercel te lleva al Dashboard. Es una pantalla oscura con el título "Overview" y, en el centro, un botón grande:
# Dashboard de Vercel (primera vez)
[ + Add New... ] [ Import Project ]
Let's build something new.
Import a Git Repository to get started.
Este es el punto de partida. En el siguiente tema, vas a hacer clic en Import y hacer el primer deploy.
⚠️ Error común
Problema: "Me conecté, pero mi repositorio no aparece en la lista de Vercel."
Solución: Casi siempre es porque, al autorizar, elegiste "Only select repositories" y no incluiste ese repo. Ve a Vercel → Settings → Git (o directamente en GitHub: Settings → Applications → Vercel) y agrega el repositorio a la lista de permitidos. Actualiza la página y aparecerá.
Primer deploy automático
Ahora viene la parte que da gusto: importar el repositorio y ver el sitio en línea. Vas a presionar muy pocos botones. Vercel lee tu código, descubre cómo compilarlo (build) y en segundos te entrega una URL funcionando. Y aquí viene lo mejor: a partir de ahora, todo git push actualiza el sitio por sí solo.
Paso 1: Importa el repositorio
En el Dashboard, haz clic en Add New → Project. Vercel muestra tus repositorios de GitHub. Encuentra el tuyo y haz clic en Import.
# Lista de repositorios en Vercel
meu-portfolio [ Import ]
landing-page [ Import ]
Paso 2: Revisa la configuración (por lo general, automática)
Vercel detecta por sí sola el tipo de proyecto. Para un sitio HTML/CSS sencillo, ni siquiera tienes que tocar nada. Para frameworks (React, Next.js), ya completa la configuración correcta de build.
# Detectado automáticamente:
Framework Preset: Other (sitio estático)
Build Command: (vacío; no hace falta)
Output Directory: ./
Paso 3: Haz clic en Deploy
Presiona el botón azul Deploy y mira. Vercel muestra los logs de la compilación en tiempo real.
Ejecutando la compilación...
Cloning github.com/voce/meu-portfolio
Installing dependencies...
Build completed in 8s
✓ Deploy listo
Producción: https://meu-portfolio.vercel.app
Paso 4: Abre tu URL
Vercel muestra una pantalla de celebración ("Congratulations!") con un botón Visit. Haz clic en él. Tu sitio está en línea, accesible desde cualquier lugar del mundo. Comparte el enlace para que alguien lo pruebe.
🧠 Analogía: la cinta transportadora automática
Piensa en una cinta transportadora de fábrica. Colocas la materia prima (tu código) en un punto y, en el otro, sale el producto terminado (el sitio en línea). No necesitas montar nada manualmente: la cinta hace todo. Después de configurarla una sola vez, trabaja sola: cada vez que envías código nuevo (git push), la canalización se activa, construye la nueva versión y la publica. A eso se le llama implementación continua.
💡 Consejo: el siguiente deploy es aún más fácil
Todo este paso a paso solo ocurre la primera vez. Después de importarlo, nunca más tendrás que entrar en Vercel para publicar. Solo tienes que editar tu código localmente y ejecutar:
$ git add .
$ git commit -m "nuevo texto en la home"
$ git push
# Vercel detecta el push y actualiza el sitio automáticamente
Preview Deploys: cada branch obtiene una URL
Aquí está una de las funciones más útiles de Vercel. Cuando creas una branch nueva y abre un Pull Request, Vercel publica automáticamente una versión separada del sitio, con su propia URL temporal. Así ves el cambio funcionando de verdad antes antes de modificar el sitio oficial. La producción sigue intacta mientras haces pruebas.
👁 Qué vas a ver en el Pull Request
Creas la branch, haces push y abres el PR en GitHub. En segundos, un robot de Vercel comenta en el propio PR con el enlace de la vista previa:
# Comentario automático en el Pull Request
✓ Vercel
Latest commit deployed to Preview.
Preview: meu-portfolio-git-feature-novo-botao.vercel.app
Inspect: vercel.com/voce/.../deployments
Este enlace es exclusivo de esa branch. La URL de producción ni se entera.
🌐 URL de producción
- •Proviene de la branch
main - •Dirección fija:
meu-app.vercel.app - •Es la versión que ve el público
- •Solo cambia cuando haces merge en main
🧪 URL de vista previa
- •Proviene de cualquier branch / PR
- •Dirección única con el nombre de la branch
- •Solo tú y quienes revisan el PR pueden verlo
- •Se actualiza con cada nuevo push a la branch
✓ Qué HACER
- ✓Probar cambios grandes en una rama separada
- ✓Enviar el enlace de preview para que alguien lo revise
- ✓Abrir la vista previa en el celular antes del merge
✗ Qué NO hacer
- ✗Probar todo directamente en la rama
main(se publica) - ✗Enviar el enlace de preview como si fuera el sitio final
- ✗Olvidar cerrar o fusionar PR antiguos que siguen abiertos
Configuración del proyecto: Build, Env y Framework
En la mayoría de los proyectos sencillos, Vercel lo configura todo automáticamente. Pero vale la pena entender tres ajustes que encontrarás en Settings: el comando de build, las variables de entorno y el framework. Saber dónde están te saca de muchos apuros cuando un deploy no funciona como esperabas.
Build Command - Cómo crear el sitio
Es el comando que ejecuta Vercel para transformar tu código en el sitio final. Los sitios HTML puros no lo necesitan. Los proyectos con framework sí.
# Sitio HTML/CSS simple:
(déjalo vacío: no hay build)
# Proyecto React / Vite:
npm run build
# Dónde queda el resultado (Output Directory):
dist
Environment Variables - Secretos del proyecto
Son valores secretos (claves de API, contraseñas, tokens) que NO pones en el código. Los registras en Settings → Environment Variables, y Vercel los inyecta durante el build, sin exponer el secreto en el repositorio.
# Ejemplo de variable registrada en Vercel:
Name: API_KEY
Value: sk-xxxx... (queda oculto)
Env: Producción, vista previa, desarrollo
Profundizarás en esto en el Módulo 2.4 - Variables de entorno.
Framework Preset - El tipo de proyecto
Vercel reconoce decenas de frameworks y ya completa la configuración correcta de build y output para cada uno. Solo tienes que confirmar.
Next.js → compilación automática, sin configuración
Vite → npm run build, output dist/
Other → sitio estático, sin compilación
⚠️ Error común
Problema: "El deploy falló con 'Build failed' / la página se abre en blanco."
Solución: Casi siempre el Output Directory está mal (Vercel busca el sitio en una carpeta que no existe) o faltó registrar una Environment Variable. Abre los logs del deploy (botón View Build Logs), lee la última línea roja y ajusta la configuración en Settings. Después, en Deployments, haz clic en los tres puntos → Redeploy.
Dominios personalizados
La URL meu-app.vercel.app funciona perfectamente, pero para algo profesional vas a querer una dirección propia, como www.seunome.com. Esto es el dominio personalizado. Compras el dominio en un registrador (Registro.br, Namecheap, GoDaddy) y lo conectas a Vercel.
Paso 1: Agrega el dominio en Vercel
Ve a Settings → Domains, escribe tu dominio y haz clic en Add.
# En Settings → Domains:
tunombre.com [ Add ]
Paso 2: Vercel te da los registros DNS
Muestra valores que tienes que pegar en el panel de tu registrador (donde compraste el dominio).
# Copia estos registros:
Type: A Name: @ Value: 76.76.21.21
Type: CNAME Name: www Value: cname.vercel-dns.com
Paso 3: Pega los datos en el panel del registrador y espera
En el sitio donde compraste el dominio, ve a "Administrar DNS" y agrega los registros. Después, solo queda esperar: la propagación del DNS tarda desde unos minutos hasta algunas horas. Vercel también genera el certificado HTTPS gratis, de forma automática.
🧠 Analogía: DNS y la guía telefónica
O DNS y es como una enorme guía telefónica de Internet. Cuando alguien escribe seunome.com, el navegador consulta esta lista para descubrir el «número» (el servidor) donde está alojado el sitio. Al pegar los registros DNS, básicamente escribes en la lista: «quien busque tunombre.com, que vaya a Vercel». La propagación es el tiempo que tarda esta nueva entrada en llegar a todas las listas del mundo.
💡 Consejo: empieza sin comprar un dominio
No necesitas un dominio propio para aprender ni para proyectos personales. La URL .vercel.app y es gratis, tiene HTTPS y funciona para siempre. Compra un dominio solo cuando el proyecto sea real (portafolio, negocio). Y siempre puedes agregarlo después, sin volver a hacer el deploy.
🎉 ¡Lo lograste!
Si llegaste hasta aquí, ya sabes tomar un proyecto de GitHub y publicarlo con una URL propia, vistas previas por rama e incluso un dominio personalizado. Eso es deploy moderno de verdad. En el siguiente módulo, aprenderás el Supabase, para darle una base de datos y un backend a tu sitio.
📚 Resumen del módulo
Siguiente módulo:
2.2 - Supabase: Base de datos en minutos (dale a tu sitio un backend de verdad)