Tutorial · de cero a publicado en internet

Tu primera página web,
hecha por una inteligencia artificial.

Si nunca abriste una computadora para programar, esto es para vos.
Vas a hablarle a una IA en castellano, como si le mandaras un mensaje a un amigo. Ella escribe el código por vos. Y al final, tu página va a estar en internet con una dirección como tu-pagina.vercel.app que podés mandar por WhatsApp.

EmpezarDiccionario rápido (palabras raras)

Antes de arrancar, leé esto. Tarda 30 segundos.

Diccionario rápido

5 palabras raras que vas a leer

Si entendés estas 5, el tutorial entero se vuelve fácil. Léelas con calma.

Terminal

Una ventana negra donde escribís comandos. Es como hablarle a la computadora con palabras mágicas en vez de hacerle click. Asusta al principio. Después le tomás cariño.

OpenCode

La inteligencia artificial que va a programar por vos. Vive adentro de la Terminal. Le hablás en castellano y ella escribe el código.

GitHub

Un Google Drive especial para guardar código. Es gratis. Sirve para que Vercel pueda agarrar tu proyecto y publicarlo.

Vercel

El servicio que pone tu web en internet. Le das tu código de GitHub y en 1 minuto te devuelve una dirección pública. Gratis.

Comando

Una línea de texto que copiás y pegás en la Terminal y luego apretás Enter. La computadora hace algo. Eso es todo.

Lo que necesitás antes

4 cosas. Tres son cuentas gratis.

Andá creando las cuentas mientras leés. Cada una toma 2 minutos.

Una computadora

Mac, Windows o Linux. Cualquiera de los últimos 5 años sirve. No hace falta que sea potente. Una notebook básica anda perfecto.

Internet

Wifi, datos del celular, la red del laburo, lo que tengas. Solo necesitás que sea estable durante los 30 minutos.

Cuenta de GitHub

Es gratis. Andá a github.com/signup y creá una con tu email. Acordate del usuario y la contraseña.

Cuenta de Vercel

También gratis. Andá a vercel.com/signup y dale "Continue with GitHub" — usás la misma cuenta.

Truco: usá el mismo email para GitHub y Vercel. Te ahorrás líos después.

Conocer la herramienta · 2 min

Abrí la Terminal

La Terminal es esa ventana negra que ves en las películas de hackers. Tranquilo, vamos a usar 5 comandos en total. Lo primero es abrirla.

En Mac

  1. Apretá ⌘ + Espacio al mismo tiempo. Te aparece un buscador.
  2. Escribí Terminal y apretá Enter.
  3. Se abre una ventana con texto. Esa es la Terminal.

En Windows

  1. Apretá la tecla de Windows.
  2. Escribí Terminal y apretá Enter.
  3. Si no la tenés, instalá la app gratuita "Windows Terminal" de la Microsoft Store.

En Linux

Si usás Linux ya sabés cómo abrirla 😉. Suele ser Ctrl + Alt + T.

Cómo funciona la Terminal: escribís (o pegás) un comando, apretás Enter, la computadora hace algo. Eso es todo. Si te aparece texto raro, no te asustes — es normal.

Instalación · 5 min

Instalá Node.js

Node.js es el motor que necesitan las webs modernas para funcionar en tu computadora. Lo instalás una sola vez en la vida y te olvidás. Hoy lo hacemos.

En Mac o Windows (lo más fácil)

  1. Andá a nodejs.org/es/download.
  2. Hacé click en el botón verde grande que dice "LTS". Va a bajar un archivo a tu carpeta de Descargas.
  3. Doble click al archivo descargado. Se abre un instalador.
  4. Apretá "Continuar" / "Siguiente" sin tocar nada hasta que diga "Listo". Ya está.

¿Cómo sé que se instaló bien?

Volvé a la Terminal. Copiá esto, pegalo y apretá Enter:

Terminal
$ node --version

Si te aparece algo como v22.11.0 (un número que arranca con "v"), está perfecto. Si te dice "command not found", cerrá la Terminal, volvé a abrirla y probá de nuevo. Si igual no anda, reiniciá la compu.

¿Apareció el número con la v? Listo. Pasá al paso 3.

Instalación · 1 min

Instalá OpenCode

OpenCode es la inteligencia artificial que va a hacer el trabajo. Se instala con un solo comando que vas a copiar y pegar en la Terminal.

Copiá este comando con el botón verde de la derecha, pegalo en la Terminal y apretá Enter:

Terminal
$ curl -fsSL https://opencode.ai/install | bash

Vas a ver mucho texto bajando cosas. Es normal. Esperá hasta que el cursor te deje volver a escribir (más o menos 30 segundos). Cuando termine, copiá esto para confirmar que se instaló:

Terminal
$ opencode --version

Si te aparece otro número (algo como 0.x.x), perfecto.

Si te dice "command not found":cerrá la Terminal y abrila de nuevo. Suele pasar la primera vez. Si igual no anda, copiá el error completo y pedile a Google "opencode command not found" sumándole tu sistema (mac, windows, linux).

Decisión · 1 min

¿Versión Free o Versión Go?

OpenCode tiene dos versiones. La diferencia, en castellano simple: cuánto querés que la IA piense por vos.

Free

$0
  • Viene con 3 modelos de IA gratis ya incluidos.
  • No te pide tarjeta. No te pide registrarte.
  • Es más limitada en tareas grandes.

Ideal para: probar, jugar, aprender.

Go Recomendado

$5–10/mes
  • Más de 14 modelos top (los mismos que usan los profesionales).
  • Sin límites apretados — hace tareas grandes sin atragantarse.
  • $5 el primer mes, $10 después. Cancelás cuando quieras.

Ideal para: tener resultados profesionales.

Si elegís Free

No hacés nada. Ya está listo para usar. Saltá al paso 5.

Si elegís Go

  1. Andá a opencode.ai y dale a "Sign up".
  2. Dale "Continue with GitHub". Activá el plan Go (te van a pedir tu tarjeta).
  3. Volvé a la Terminal y pegá esto:
Terminal
$ opencode auth login

Te va a abrir una pestaña en el navegador. Apretá "Autorizar". Listo, conectado.

Setup · 3 min

Creá la carpeta de tu proyecto

Ahora vamos a crear una carpeta vacía con todo lo que necesita una web. Un solo comando arma todo. Te lo explico antes de pegarlo.

Primero, decile a la Terminal que se mueva a tu carpeta de Documentos (donde vas a tener tu proyecto). Pegá uno de estos según tu sistema:

Terminal · Mac o Linux
$ cd ~/Documents
Terminal · Windows
$ cd %USERPROFILE%\Documents

Ahora pegá este comando largo. Va a crear una carpeta llamada mi-web con todo lo necesario adentro:

Terminal
$ npx create-next-app@latest mi-web --ts --tailwind --app --no-src-dir --import-alias "@/*" --use-npm --yes

La primera vez te va a preguntar "Ok to proceed? (y)". Apretá Y y Enter. Va a tardar 1 a 2 minutos bajando cosas. Tomate un mate.

Cuando termine, entrá a la carpeta nueva con este comando:

Terminal
$ cd mi-web
Listo. Tu carpeta está armada. Ahora viene la parte mágica.

Llamar a la IA · 30 segundos

Abrí OpenCode dentro de la carpeta

Una palabra. La Terminal se transforma en un chat con la inteligencia artificial.

Asegurate de estar dentro de la carpeta mi-web. Después escribí:

Terminal
$ opencode

Te va a aparecer una pantalla negra con una caja para escribir. Eso es OpenCode. Está esperando que le digas qué hacer, en castellano.

Cómo moverte adentro: escribís lo que querés y apretás Enter. Para salir y volver a la Terminal normal, apretá Ctrl + C. Para volver a entrar, escribí opencode de nuevo.

Hablar con la IA · 4 min

Escribile lo que querés que haga

Acá está la magia. Le hablás como si le mandaras un audio a un amigo. Probá pegando este texto entero (con el botón Copiar de la derecha):

Prompt sugerido
Quiero una página web para una pizzería que se llama "Don Tito",
en Villa Mercedes, San Luis. Mobile-first, en castellano.

Tiene que tener:

1. Un menú de navegación arriba con el nombre y un botón "Pedir ahora".
2. Una imagen grande de pizza arriba de todo, con un título y un botón
   que diga "Ver el menú".
3. Una lista de 6 pizzas, cada una con su foto, nombre, ingredientes
   y precio en pesos argentinos. Cada pizza tiene un botón "Agregar".
4. Un carrito en la esquina arriba a la derecha que muestre cuántas
   pizzas agregué y cuánto sale en total. Tiene que actualizarse al
   instante cuando agregue.
5. Una sección de contacto con dirección, horarios y un mapita.
6. Pie de página con redes sociales.

Estilo: cálido, con rojo y naranja, tipografía con personalidad.

Cuando termines, no me expliques nada — solo respondé "LISTO".

Pegalo en OpenCode, apretá Enter, y mirá. La IA va a:

  1. Pensar unos segundos.
  2. Empezar a crear archivos automáticamente.
  3. Avisarte con "LISTO" cuando termine.

Tarda entre 1 y 4 minutos, según el modelo y tu internet. Mientras tanto, podés ver cómo escribe el código en vivo.

Si te pregunta "¿permitir editar este archivo?": decí siempre que sí. Está pidiendo permiso para escribir en TU carpeta. No puede salirse de ahí.

Ver lo que hizo · 30 segundos

Mirala en tu navegador

OpenCode terminó. Ahora vamos a abrir lo que creó. Salí del chat y vamos a prender la web en tu computadora.

Apretá Ctrl + C para salir de OpenCode. Ya estás en la Terminal normal. Pegá esto:

Terminal
$ npm run dev

Vas a ver algo así:

Terminal
▲ Next.js 15.x- Local: http://localhost:3000✓ Ready in 1.2s

Abrí tu navegador (Chrome, Safari, Firefox, lo que tengas) y en la barra de arriba escribí:

http://localhost:3000

¡Ahí está tu web! Hecha por una IA, corriendo en tu computadora. Por ahora solo vos la ves — falta publicarla en internet.

Dato útil: mientras npm run dev esté funcionando, cada cambio que pidas a la IA aparece al instante en el navegador. Para apagarlo: Ctrl + C en la Terminal.

Pedir cambios · ilimitado

¿No te gustó algo? Pedile cambios.

Acá está el verdadero superpoder. Si algo no te convence, le hablás de nuevo. Sin tocar código.

Volvé a abrir OpenCode dentro de la carpeta:

Terminal
$ opencode

Ejemplos de cosas que podés pedirle. Copialas y mandalas tal cual:

Cambiá los colores a verde y blanco. Más vibrante.
Agregá una sección de testimonios con 3 reseñas inventadas pero realistas.
Los precios tienen que tener punto de miles. "$8.500" en vez de "$8500".
Hacé que el carrito se abra como un panel lateral cuando hago click.
Agregá un formulario para reservar mesa: nombre, fecha y cantidad de personas.

Cada cambio tarda entre 30 segundos y 2 minutos. Si dejás npm run dev corriendo en otra Terminal, vas viendo los cambios en vivo en el navegador.

Truco de oro:si algo no te gusta, pedile a la IA "esto está feo, hacelo de nuevo más limpio". No tengas miedo a ser exigente — la IA no se ofende.

Publicar en internet · 5 min

Subila a internet con GitHub + Vercel

Último paso. Vamos a guardar el proyecto en GitHub y después Vercel lo va a publicar con una dirección pública.

Parte A · Subir a GitHub

  1. Andá a github.com/new.
  2. Ponele un nombre al repositorio (ej: mi-pizzeria). No toques nada más.
  3. Apretá el botón verde "Create repository".
  4. Te va a llevar a una página con comandos. No los copies todavía. Volvé a la Terminal.

En la Terminal (estando dentro de la carpeta mi-web), pegá estos comandos uno por uno:

Terminal
$ git init$ git add .$ git commit -m "Mi primera web con OpenCode"

Ahora volvé a la página de GitHub que dejaste abierta. Buscá el bloque que dice "…or push an existing repository from the command line" y copiá las 3 líneas que aparecen ahí (tienen tu usuario adentro). Pegalas en la Terminal.

Si te pide usuario y password:el password no es el de tu cuenta de GitHub — es un "token". Andá a github.com/settings/tokens/new, marcá la opción repo, generalo, copialo y pegalo donde te pide el password. Guardalo bien — solo lo ves una vez.

Parte B · Publicar en Vercel

  1. Andá a vercel.com/new.
  2. Si no estabas logueado, dale "Continue with GitHub".
  3. Vas a ver tus repositorios. Buscá mi-pizzeria y dale "Import".
  4. En la pantalla siguiente, no toques nada. Vercel detecta solo que es Next.js.
  5. Apretá el botón "Deploy".

Vercel va a procesar tu web (60–90 segundos). Cuando termine, vas a ver confeti 🎉 y un botón "Visit" con tu dirección final, algo como:

https://mi-pizzeria.vercel.app

Esa dirección funciona en cualquier celular y computadora del mundo. Mandala por WhatsApp. Compartila en Instagram. Subila a tu CV.

Lo lograste. Tenés una web hecha por inteligencia artificial, viva en internet, gratis. Hace 3 años, esto te tomaba un mes y mil dólares. Hoy te tomó 30 minutos y nada.

¿Y ahora?

Bienvenido al lado lindo de la fuerza

Cualquier cambio que se te ocurra: abrís OpenCode, le pedís el cambio, después corrés git add ., git commit -m "cambio" y git push. Vercel lo redespliega solo. Así de fácil.

Sitio oficial de OpenCode

Documentación, modelos disponibles, comunidad.

Curso gratis de Next.js (en inglés)

Si te quedaste con curiosidad por entender cómo funciona por dentro.

Documentación de Vercel

Cómo poner tu propio dominio (.com), variables secretas, etc.

Volver a la presentación