MÓDULO 4.1 / 4 DE 4
Vercel y Supabase: una visión general
Saber qué hacen Vercel y Supabase y cómo se conecta tu repositorio con ellos cuando el proyecto crezca.
1Qué hace Vercel
git add .
git commit -m "nueva versión"
git push
Verás: Una vez conectado, cada push genera una nueva publicación en Vercel, con una dirección propia.
Qué es
Vercel publica sitios y aplicaciones directamente desde tu repositorio de GitHub. Es el siguiente paso después de Pages cuando el proyecto deja de ser una página simple.
Por qué aprender
Ejecuta código en el servidor, acepta un dominio propio y muestra una vista previa de cada cambio antes de publicarlo.
Conceptos clave
Hosting: donde el sitio queda en línea. Deploy: la publicación de una versión. Vista previa (preview): una dirección temporal para revisar el cambio.
2Conecta el repositorio a Vercel
gh repo view --web
Verás: El repositorio se abre en el navegador; en Vercel, Add New → Project → Import muestra la lista de tus repositorios.
Qué es
Entra en vercel.com con tu cuenta de GitHub, haz clic en Add New → Project e importa el repositorio. Vercel detecta el tipo de proyecto y lo publica.
Por qué aprender
La conexión se hace una sola vez. Después ya no tienes que abrir Vercel para publicar.
Conceptos clave
Importar: dar a Vercel acceso de lectura al repositorio. Framework: el tipo de proyecto (página simple, Next.js y otros), que Vercel reconoce automáticamente.
3Cada push publica
git push
Verás: En Vercel, la lista de Deployments agrega una nueva fila con cada push.
Qué es
Con el repositorio conectado, sigues con la misma rutina de la parte 2: add, commit, push. Vercel publica automáticamente.
Por qué aprender
No necesitas aprender una herramienta nueva para publicar: Git sigue siendo la puerta de entrada.
Conceptos clave
Publicación automática: el servicio observa el repositorio y publica cuando llega una versión nueva. Branch main: la que se publica en la dirección oficial.
4Dominio propio
nslookup tudominio.com
Verás: La dirección IP a la que apunta tu dominio.
Qué es
En Settings → Domains de Vercel agregas tu dominio y el servicio muestra el registro DNS que debes configurar donde lo compraste.
Por qué aprender
Reemplaza la dirección .vercel.app por el nombre de tu marca.
Conceptos clave
Dominio: el nombre del sitio (tunegocio.com). DNS: la lista que indica a dónde apunta cada dominio. nslookup: consulta a dónde apunta un dominio en este momento.
5Qué hace Supabase
type .gitignore
Verás: El contenido del .gitignore del proyecto (si no existe, el siguiente paso lo crea).
Qué es
Supabase le da a tu proyecto una base de datos, inicio de sesión de usuarios y almacenamiento de archivos, sin que tengas que instalar un servidor.
Por qué aprender
Es lo que transforma una página en un sistema: guardar contactos, pedidos y registros.
Conceptos clave
Base de datos: donde se guardan los registros. Inicio de sesión (autenticación): saber quién es el usuario. Clave del proyecto: la contraseña que usa tu código para comunicarse con Supabase.
6Claves fuera del repositorio
echo .env>>.gitignore
type .gitignore
Verás: .env aparece en la lista de .gitignore. Después pídele al agente: Crea un formulario de contacto que guarde los datos en Supabase; lee las claves del archivo .env y nunca escribas las claves en el código.
Qué es
Las claves de Supabase van en un archivo .env, y .gitignore impide que Git envíe ese archivo a GitHub.
Por qué aprender
Una clave publicada es una clave expuesta: cualquiera puede usar tu base de datos. En un repositorio público, esto puede pasar en cuestión de minutos.
Conceptos clave
.env: archivo con las claves y contraseñas del proyecto. .gitignore: lista de lo que Git no envía. Variable de entorno: la forma de pasar la clave al programa sin escribirla en el código.
MANOS A LA OBRA / ~10 MIN
Tu mapa del siguiente paso
Marca cada elemento cuando funcione de verdad en tu computadora, no cuando termines de leer.
Guía rápida de la parte 4
git add .
git commit -m "nueva versión"
git push
gh repo view --web
git push
nslookup tudominio.com
type .gitignore
echo .env>>.gitignore
type .gitignore
Criterio para terminar
Saber qué hacen Vercel y Supabase y cómo se conecta tu repositorio con ellos cuando el proyecto crezca.
Revisa lo que aprendiste
Quieres un formulario que guarde los contactos recibidos. ¿GitHub Pages lo resuelve por sí solo?
Ver respuesta comentada
No. Pages solo muestra páginas. Para guardar datos necesitas una base de datos, como Supabase, y normalmente un servicio de hosting como Vercel.