Saltar al contenido
> tutoriales / base-de-datos-y-link-publico
Parte 2 Crea tu proyecto desde 0
intermedio 45 min · código

Cómo publicar tu página web gratis y con base de datos

// dale base de datos y link público a tu proyecto

Ya tienes tu página o tu app y corre en tu compu. Aquí la sacas de ahí: un link que mandas por WhatsApp y datos que no se pierden aunque se te dañe el teléfono. Unos 45 minutos y sin pagar un dólar.

// salta a la parte que necesitas

¿Para quién es esto?

Es para ti si

Ya tienes un proyecto hecho —web o app— y lo abres en tu computadora. No importa con qué agente lo hiciste ni si entiendes el código.

Todavía no si

Todavía no tienes proyecto. Hazte uno primero y vuelve: aquí no se construye nada, se publica lo que ya tienes.

[ QUÉ CAMBIA ]

Ahora

El código, la app y los datos viven en tu computadora. Nadie más puede entrar: localhost significa «esta máquina», así que ese link solo te funciona a ti. Si la apagas, se acabó la página; si se daña, se fue el proyecto.

Después

Tu proyecto pasa a vivir en la nube, repartido en dos: en GitHub el código y el link con el que cualquiera entra, y en Supabase los datos. Se abre desde cualquier teléfono, aunque tu compu esté apagada.

[ PRIMERO: ¿DE VERDAD NECESITAS BASE DE DATOS? ]

La mitad de los proyectos no la necesita, y montarla sin hacer falta es perder una hora. La regla es simple: solo la necesitas si tu página guarda algo que la persona escribe —reservas, registros, pedidos— y esa información tiene que seguir ahí después, cuando alguien entre desde otro teléfono.

datoEsta misma página, willitos.com, no tiene base de datos. Tiene tutoriales, herramientas y diccionario, pero solo informa: no recoge nada de vuelta. Si tu proyecto es así, sáltate el grupo D y quédate con el link. Terminas en veinte minutos.

[ ANTES DE EMPEZAR ]

tipUsa una cuenta de GitHub aparte si en la tuya tienes cosas del trabajo. Le vas a dar permisos a tu agente sobre esa cuenta, y una instrucción mal dada puede borrarte archivos del repo: a mí me borró dos archivos importantes de un proyecto.

[ A · CONECTA TU AGENTE ]

01 Abre TU proyecto en tu agente de código

opencode, Claude Code, Codex, Antigravity o Gemini: da igual con cuál lo hiciste. En la clase uso opencode y lo instalo en vivo, porque la compu está recién formateada — su instalador te trae Node también. De modelo uso Nimo: la clase entera salió con el gratuito y los tokens no se acabaron.

En el video me descargo un proyecto de restaurante que me pasó un panita, porque en esa compu no tenía nada. Tú no descargues nada: usa el tuyo.
02 Crea el proyecto en Supabase

Ponle nombre, contraseña para la base de datos y región (yo elegí Américas, cualquiera sirve). Si te ofrece conectar GitHub aquí, sáltatelo: eso va después. Y lo más importante de esa pantalla: deja marcada la casilla de habilitar automáticamente las reglas de seguridad (RLS). Viene marcada — no la toques.

Esa contraseña de la base cópiala y guárdala ahora mismo, en serio. Y si estás grabando, no la digas en voz alta: yo la dije en la clase y me tocó cambiarla.
03 Conecta el MCP de Supabase con tu agente

Con el proyecto ya creado, entra en Connect → MCP y elige tu agente de la lista (si usas Codex elige Codex, no ChatGPT). Deja todo activado como viene y dale al botón «Copy prompt»: eso te copia todo lo que tu agente necesita. Vuelve al agente y pégalo. Un MCP es lo que le da manos y pies a la IA: sin él solo te habla, con él entra y lo hace.

datoSi prefieres hacerlo a mano, la misma pantalla te enseña las dos piezas: la configuración va en ~/.config/opencode/opencode.json (con la URL de tu proyecto dentro) y después se autentica con el comando opencode mcp auth supabase, que te abre el navegador. El botón «Copy prompt» hace justo eso, pero se lo pide a tu agente.
04 Autoriza a tu agente desde el navegador

Si el agente se queda esperando, dile que lo haga. Se te abre una ventana de Supabase pidiendo permiso: autorízalo. Esto no lo puede hacer él por ti a propósito — Supabase tiene que saber que quien entra por tu MCP eres tú. Cuando te diga que ya está conectado, cierras la ventana.

Hazlo
Sobre el minuto 8:20 del video copio también el MCP de Vercel «para después». Sáltatelo: al final el link salió de GitHub y ese MCP no se llegó a usar en toda la clase. Lo dejo para otra.

[ B · SUBE TU CÓDIGO ]

05 Pídele el repositorio privado

Vuelve a tu agente y pídeselo. Di siempre privado, salvo que quieras que el mundo lea tu código. Después te va a instalar GitHub y a pedirte permiso para su API: dáselo.

Crea un repo privado en GitHub con este proyecto.
06 Autentica GitHub con el código de dispositivo

Tu agente te muestra un código y te manda a activar el dispositivo. Copia ese código, abre la página de abajo, pégalo, Continuar y acepta. Cuando te pregunte si ya te autenticaste, dile que sí. Hazlo en la computadora donde ya tengas la sesión de GitHub iniciada: te ahorras dolores de cabeza.

github.com/login/device
¿Te falla una y otra vez? No eres tú. A mí me falló diez minutos seguidos: reintenté, abrí pestañas nuevas, lo lancé desde la terminal y nada. Con Claude Code esta autenticación sí pasa; con opencode me tocó bajar a lo del token, aquí abajo. Y ten paciencia: esta primera configuración tarda, la segunda vez ya vuela.
07 Comprueba que el repo esté en tu GitHub

Entra a tu GitHub y ábrelo. Como es privado, no sale en tu perfil público. Mira que tus archivos estén ahí — yo abrí el index.html y ahí estaba la web tal cual. Si los ves, ya tienes copia de seguridad.

[ C · SÁCALO AL MUNDO ]

08 Pide el despliegue

Con el código ya subido, pídele el link. GitHub lo publica solo, con un workflow suyo. Esto tarda —en la clase fueron como diez minutos—, así que anda haciendo otra cosa.

Despliégalo para verlo con link en GitHub.
A mí el primer intento me falló: el workflow se cayó y la página no cargaba. No hice nada — él solo leyó el error, lo corrigió y lo relanzó hasta que abrió. Déjalo trabajar.
09 Abre el link en tu teléfono

Te queda un link público de GitHub, del estilo tuusuario.github.io/tuproyecto. Ábrelo en el teléfono y mándalo al grupo: ahí ves si de verdad quedó y si se ve bien. Ojo, todavía no guarda nada — lo que escribas ahí se pierde. Eso lo arreglamos ahora.

[ D · CONÉCTALE LA BASE ]

10 Pídele la conexión

El MCP de Supabase lleva conectado desde el paso 03, pero no te adivina nada. Díselo cortito. Y no lo sueltes ahora, porque te va a pedir tres cosas a mano: el Project ID, la clave y que ejecutes tú el SQL. Van una por una en los pasos de abajo.

ahora tenga base de datos
11 Dale el Project ID

Te lo va a pedir. Yo intenté que lo sacara solo con el MCP y no pudo, así que va a mano: entra a Supabase, a la lista de proyectos de tu cuenta, y ahí mismo está el Project ID del tuyo. Cópialo y pégaselo en el chat.

12 Dale la clave pública

La clave tampoco te la saca solo, aunque ya tenga el MCP. Ve a Supabase → Settings → API: ahí hay dos y se parecen. Le pegas la pública. La secreta no, nunca. ¿No sabes cuál es cuál? Pregúntale a él, que para eso está — yo le pregunté y me dijo cuál.

Yo enseño las mías en cámara porque ese proyecto era de ejemplo y lo borré. Si el tuyo es serio, no andes pegando esas claves en cualquier lado.
13 Ejecuta el SQL que te dé

Te va a pasar un bloque de SQL y te va a decir exactamente dónde pegarlo, paso por paso. Yo le pedí que lo ejecutara él y me dijo que no tiene acceso: este pedacito va a mano. Lo pegas en Supabase, le das Run y ya. No te toca aprender SQL.

datoY no te preocupes por la seguridad: las reglas (RLS) ya quedaron activadas en el paso 02, en la casilla esa que dejaste marcada al crear el proyecto. Por eso era lo importante de esa pantalla.
14 Recarga y pruébalo desde dos lados

Cuando termine te va a decir que recargues con Ctrl + Shift + R. Hazlo. Si te sale «Conectando con la base de datos», ya está enganchada. Ahora pruébala en los dos sentidos: crea un registro desde el teléfono, recarga en la compu y ahí está; crea otro desde la compu, recarga en el teléfono y también. Si eso pasa, terminaste.

[ SI ALGO FALLA ]

Los tres problemas que me pasaron en vivo. Si te pasan, no es que lo hiciste mal.

El token: qué permisos marcar

Vas a github.com → Settings → Developer settings → Personal access tokens → Tokens (classic) → Generate new token (classic). Ojo con lo de «classic»: son los que usan estos permisos. En la clase le di acceso a todo y eso está mal: un token con todo marcado es tu cuenta entera en manos de la IA. Marca solo esto:

PermisoPara qué¿Marcar?
repo Crear tu repo privado y subir el código SÍ
workflow Que el deploy pueda tocar los workflows SÍ
read:org Ver a qué organizaciones perteneces. Lo pide gh solo SÍ
gist Lo pide gh por defecto SÍ
delete_repo Borrar repositorios NO
admin:org Administrar organizaciones enteras NO
user Cambiar tu perfil y tus correos NO
Cuando GitHub te muestre el token, solo se ve esa vez. Cópialo, pégalo en tu agente y ya. Si lo enseñaste sin querer —en un live, en una captura— entra y bórralo: se genera otro en diez segundos.

[ LAS REGLAS PARA TU AGENTE ]

Pega esto en un archivo AGENTS.md en la raíz de tu proyecto. Tu agente lo lee solo y deja de hacer barbaridades.

# Reglas

1. No rompas produccion. Si un cambio puede tumbar la web que ya
   esta publicada, avisame antes de hacerlo.

2. No toques la base de datos sin permiso. Si vas a crear, cambiar
   o borrar tablas o datos, primero dime que vas a hacer y espera
   a que yo lo autorice.

3. Los secretos no se pegan en el chat. La clave secreta de Supabase
   y los tokens van en variables de entorno, nunca en el codigo ni
   en la conversacion.

[ LAS PALABRAS RARAS ]

Hosting

Alquilar una computadora que está prendida siempre, en algún lado del mundo, y que se encarga de mostrarle tu página a quien la pida. Aquí ese trabajo lo hace GitHub Pages, gratis. Tu compu también puede hacerlo, pero solo mientras esté prendida y solo para ti.

GitHub Pages

La parte de GitHub que agarra el código de tu repo y lo publica como página web, en una dirección tipo tuusuario.github.io/tuproyecto. Es de donde sale el link de esta clase, y no cuesta nada.

Link público

La dirección de tu página en internet, la que mandas por WhatsApp y a alguien en otro país le abre. Es lo contrario de localhost, que significa literalmente «esta máquina»: por eso ese link solo te sirve a ti aunque se lo pases a alguien.

Base de datos

El cuaderno donde tu proyecto anota lo que la gente escribe: cada reserva, cada registro, cada pedido. Vive aparte de la página a propósito, así puedes cambiar la página entera o entrar desde otro teléfono y lo anotado sigue ahí.

Repositorio (repo)

La copia de tu código en la nube, en GitHub. Si tu compu se muere, tu proyecto no. Privado = solo tú lo ves. Público = cualquiera puede leer tu código. Por defecto, privado.

Deploy (desplegar)

Agarrar tu código y ponerlo a funcionar en el hosting. Es el paso que convierte «archivos en una carpeta» en «página que abre con un link». Cada vez que cambies algo, vuelves a desplegar: se lo dices a tu agente y ya.

Workflow

Una receta que GitHub ejecuta solo cada vez que subes código: en esta clase es la que agarra tu proyecto y lo publica. Cuando ves que «el workflow falló», es esa receta la que se cayó — se relanza y suele pasar a la segunda.

MCP

Model Context Protocol. Es lo que le da manos y pies a la IA: sin MCP solo te habla y te dice qué hacer, con MCP entra a Supabase o a GitHub y lo hace. Se conecta una vez y queda; por eso la primera vez es la lenta.

RLS

Row Level Security. Es el guardia de tu base: con RLS activado, cada tabla queda cerrada hasta que exista una regla que diga quién puede ver o tocar qué. Es la casilla que dejas marcada al crear el proyecto en el paso 02.

Clave pública y clave secreta

Supabase te da dos y se parecen mucho. La pública es la que va en tu página y la que le pegas a tu agente. La secreta se salta todas las reglas: es la llave maestra, no va en tu código ni en una captura ni en el chat de la IA.

SQL

El idioma con el que se le habla a una base de datos: crear una tabla, meter algo, buscarlo. No te toca aprenderlo hoy: tu agente te escribe el bloque y tú solo lo pegas en Supabase y le das Run.

Token

Una contraseña larga que le das a un programa para que entre a tu cuenta en tu nombre. Aquí, para que tu agente pueda subir código a tu GitHub. Se ve una sola vez; si se te escapa en pantalla, bórralo y genera otro.

// para llevarte
  • Tu proyecto deja de ser una cosa y pasa a ser dos: el código y el link en GitHub, los datos en Supabase.
  • Solo necesitas base de datos si guardas algo que la persona escribe Y tiene que seguir ahí después.
  • La configuración es lenta una sola vez. Después solo le dices «despliega» y listo.
  • El MCP no lo hace todo: el Project ID, la clave y el SQL van a mano. Es normal, no lo estás haciendo mal.
  • Nunca le des a un token todos los permisos, y jamás pegues la clave secreta en ningún lado.
  • Regla uno: no romper producción. Regla dos: no tocar la base sin avisar.
¿Ya lo tienes arriba? Mándame el link al grupo y lo abro. Y si te atoraste, manda captura de lo que te salió: no hay preguntas tontas, hay tontos que se quedan con preguntas. Caer al grupo

¿TE SIRVIÓ?_

Cae al grupo, comparte lo que hagas y pregunta lo que sea en el próximo live.

Unirme al grupo de WhatsApp Seguir @willito6731 en TikTok