Una página web con dominio propio por un dólar

Lo que cuesta de verdad

El titular dice un dólar y el recibo dice 1,19. Los veinte centavos son la tasa de ICANN, que se cobra en todos los dominios. Impuestos quedaron en cero.

• GitHub y Vercel. Plan gratis permanente, no prueba de catorce días. Ninguno de los dos te pide tarjeta para lo que vas a hacer acá.
• Codex. Viene incluido en todos los planes de ChatGPT, pero en el gratis el acceso es de prueba y OpenAI lista la app de escritorio desde Plus. Si Codex no te aparece o se te acaba el cupo a mitad, es el límite del plan.

Lo que necesitas antes de empezar

Cuatro cuentas y nada más. Ninguna requiere saber programar.

Solo el dominio cuesta. Los archivos viajan de tu computador a GitHub y de ahí a Vercel; el dominio se conecta de último.

Cuatro palabras que vas a ver todo el tiempo

• Repositorio. La carpeta de tu página guardada en GitHub. De ahí lee Vercel.
• Deploy. El momento en que Vercel toma esa carpeta, la compila y la publica en una URL.
• DNS. La tabla que le dice a internet a qué servidor apunta tu dominio.
• Propagación. El rato que tarda cada servidor del mundo en enterarse de un cambio en esa tabla.

Los seis pasos

Cada captura es de la corrida que sale en el video. Los pasos 1 y 2 son los únicos donde tus decisiones cambian el resultado. Del 3 al 6 es seguir instrucciones.

1. 1

   Compra el dominio

   Entra a Hostinger y busca tu nombre con extensión .online. Suele ser la más barata del primer año.

   Compra solo el dominio. Desmarca Domain Shield, que son 9,99 al año aparte, y cualquier otro extra que caiga al carrito. La protección de privacidad ya viene incluida sin costo.

   Antes de darle continuar, lee la línea que está debajo del selector de periodo. Ahí sale el precio de renovación.

   

2. 2

   Pídele el prompt, no la página

   Abre ChatGPT en modo chat normal y pídele que redacte el brief que después vas a pegarle al agente. Sale mejor cuando lo escribe en canvas, porque queda largo y lo puedes editar antes de usarlo.

   Copiar

   Necesito que escribas un prompt, no la página. Tu respuesta se la voy a pegar a un agente de código que va a construir una landing page desde cero, en una carpeta vacía.
   
   Stack que quiero: Next.js, React, TypeScript, App Router, Tailwind CSS si aplica, componentes reutilizables, responsive, accesibilidad, performance, SEO básico, código limpio y mantenible.
   
   Contexto:
   - Quién soy: [tu nombre y a qué te dedicas]
   - A quién le hablo: [describe a la persona que va a entrar]
   - Qué quiero que haga el visitante: [contactarte, ver tu trabajo]
   - Dirección visual: [una o dos referencias, y por qué te gustan]
   
   En el prompt especifica, sección por sección:
   1. Las secciones en orden, con el texto real de cada una. Nada de lorem ipsum ni marcadores de posición.
   2. Tipografía, paleta con códigos hex y escala de espaciado.
   3. Comportamiento en móvil, sección por sección.
   4. Qué NO debe hacer: sin animaciones decorativas, sin dependencias que no hagan falta, sin librerías de iconos.
   5. Estructura de archivos esperada.
   
   Devuelve solo el prompt. Nada más.

   

3. 3

   El agente construye

   La app de escritorio de ChatGPT ya trae Codex, en Mac y en Windows. No instalas nada aparte.

   Ábrela, cambia a Codex y elige la carpeta donde vas a trabajar. Créala vacía, por ejemplo una llamada mi-web en el escritorio. Codex revisa el directorio, ve que no hay nada que preservar y arranca el proyecto desde cero.

   Pega el prompt del paso 2 y déjalo trabajar. Cuando termine, revisa el resultado antes de seguir. Si algo no te gusta, corrígelo ahí mismo con instrucciones cortas, del tipo "el título es muy grande" o "quita la tercera sección". Arreglarlo ahora te cuesta un minuto, y después de publicar te cuesta bastante más.

   Puedes pedirle que lea tus skills de diseño antes de construir, para fijar dirección visual, jerarquía y accesibilidad. En esta corrida leyó tres antes de escribir la primera línea.

   

4. 4

   Sube los archivos

   Entra a github.com y crea un repositorio nuevo. Déjalo completamente vacío: sin README, sin licencia, sin .gitignore. Si le agregas archivos, el primer push va a chocar.

   El camino rápido es copiar la URL del repositorio y pedirle a Codex, en la misma conversación, que suba todo. Si eso falla, en la misma pantalla del repositorio vacío está el enlace uploading an existing file: arrastras los archivos de tu carpeta, le das commit y queda igual, sin tocar la terminal.

   Verifica que los archivos aparezcan en GitHub antes de continuar.

   

5. 5

   Publica

   En Vercel, Add New y luego Project. Importa el repositorio que acabas de crear.

   No tienes que tocar la configuración de build ni las variables de entorno. Vercel reconoce que es Next.js y arma todo solo. Dale deploy y observa los build logs: si algo del código no compila, ahí sale.

   En menos de un minuto tienes una URL .vercel.app funcionando. Ábrela y confirma que la página se ve como esperabas. Todavía no es tu dominio, eso viene ahora.

   

6. 6

   Conecta tu dominio

   En Vercel entra al proyecto, luego Settings y luego Domains. Agrega tu dominio y Vercel te muestra los registros que necesita. Normalmente son dos: un registro A para el dominio raíz y un CNAME para www.

   Copia esos valores de tu pantalla. No los copies de esta guía ni de un tutorial viejo, porque cambian.

   En Hostinger entra al dominio y luego a la zona DNS. Borra los registros A y CNAME que vengan por defecto y pon los de Vercel. Guarda y espera: la propagación tarda entre unos minutos y unas horas, y el certificado SSL se genera solo cuando el dominio ya resuelve.

   Es habitual que www quede en producción antes que el dominio raíz, y que el raíz siga marcado como Invalid Configuration mientras propaga. Vercel redirige uno al otro con un 308. Si a la hora sigue igual, ahí sí es un problema de registros.

   

Dónde se rompe esto

Cuatro fallas concretas, en orden de frecuencia. Ninguna significa que hiciste algo mal.

1. 1

   El dominio sigue en rojo después de una hora

   Casi siempre son registros duplicados. Hostinger deja registros A por defecto apuntando a su propia página de parking. Si no los borraste, tu dominio apunta a dos lugares a la vez.

2. 2

   No puedes subir los archivos a GitHub

   El repositorio no estaba vacío. Crea uno nuevo sin ningún archivo inicial, o usa el camino manual del paso 4.

3. 3

   El deploy falla en los build logs

   Copia el error completo y pégaselo a Codex en la misma conversación donde construyó el proyecto. Tiene el contexto de los archivos y lo corrige en el sitio.

4. 4

   En línea se ve distinto que en tu computador

   Rutas de archivo con mayúsculas. Tu computador no distingue mayúsculas, el servidor sí. Un Styles.css llamado en el código como styles.css funciona en tu máquina y falla en producción.

Lo que esto no es

Lo que acabas de publicar es una landing. Sirve para presentarte y mandar a la gente a donde quieras.

No trae base de datos, ni login, ni panel para editar el texto desde el navegador. Un formulario de contacto no guarda nada por sí solo: necesita un servicio externo que reciba los datos. Para cambiar una palabra, editas el archivo y lo vuelves a subir, y Vercel republica solo.

Next.js puede hacer todo lo demás, y ese es otro proyecto. Si el tuyo necesita usuarios, cobros o contenido que cambia todos los días, esto te sirve para arrancar y después lo reemplazas.

“

Montar esta página costó un dólar y una tarde. Decidir qué tarea merece IA, cuál merece automatización clásica y cuál conviene dejar quieta es la parte que todavía cuesta trabajo.