Cómo armé mi web personal con Claude, GitHub y Vercel (gratis y sin programar)

Esta web la armé con Claude, sin saber programar y sin pagar hosting. Claude escribe el código a partir de lo que le pido, GitHub lo guarda y Vercel lo publica. Vengo de ventas y quería que la web misma fuera la prueba de lo que cuento.

Acá va el proceso real, con lo que funcionó y con lo que se rompió en el camino.

¿Por qué hacer una web personal si ya tengo LinkedIn?

Esta web existe porque alguien me dijo que lo que a mí me parece normal no lo hace casi nadie: vender con un proceso que corre sobre Claude. Decidí contarlo, y necesitaba un lugar propio para hacerlo.

LinkedIn y X son buenos para conversar, pero el contenido dura poco y el alcance lo decide el algoritmo. Una web es mía: acumula, se puede encontrar en Google y la pueden citar las IA cuando alguien pregunta por el tema.

¿Qué herramientas usé?

Herramienta	Para qué	Costo
Claude	Diseña, escribe el código y los textos conmigo	Mi suscripción de siempre
GitHub	Guarda el código y el historial de cambios	Gratis
Vercel	Publica la web cada vez que algo cambia	Gratis (plan Hobby, uso personal)
Astro	Arma la web y el blog	Gratis (código abierto)

No usé plantillas pagas, constructores visuales ni hosting.

¿Cómo fue el proceso, paso a paso?

1. Decidir qué contar y para quién

Antes de diseñar nada definí tres cosas: el objetivo (contar cómo trabajo, no vender servicios), a quién le hablo (founders, directivos y perfiles tech que están dando sus primeros pasos con IA) y qué quería que pasara después: una conversación.

Esa fue la parte difícil. La técnica vino después.

2. Buscar referencias

Le mostré a Claude webs que me gustaban y le expliqué por qué. De ahí salió el lenguaje visual: blanco y negro, mucho aire, frases en dos tonos y una tipografía monoespaciada como guiño a “soy sales y código”.

3. Iterar en una vista previa privada

Trabajé más de diez versiones en una vista previa que solo veía yo. Cambié el hero entero, saqué módulos que no sumaban, rehíce la sección de cómo funciona tres veces. Cada vez le pedía a Claude que revisara la página como si fuera un director de ventas viéndola por primera vez.

4. Armar un sistema de diseño

Con la web encaminada, armamos un mini sistema de diseño: logo con forma de prompt de terminal, colores, tipografías, botones y tono de voz. Sirve para que todo lo que publique, acá y en redes, se vea como una sola cosa.

5. Publicar con GitHub y Vercel

Creé un repositorio en GitHub, subí los archivos desde el navegador y lo conecté a Vercel. Desde ese momento, cada cambio que subo se publica solo en uno o dos minutos.

6. Sumar un blog

Cuando quise escribir artículos como este, pasamos la web a Astro. Ahora publicar es subir un archivo de texto: el índice del blog, el mapa del sitio y el RSS se actualizan solos.

¿Qué salió mal?

Varias cosas, y conviene contarlas.

• Un archivo con el nombre equivocado. Al descargar una versión nueva, mi computadora la guardó como index_4.html. La subí así y la web dejó de verse. La solución fue renombrarla a index.html desde GitHub. Lección: revisar el nombre antes de subir.
• Una foto que desapareció. En una versión, la imagen de la tarjeta de contacto dependía de un archivo aparte que no estaba donde debía. Terminé incrustándola en la página.
• Diseños que no funcionaban. Hubo un diagrama que me parecía bien y no explicaba nada. Lo cambiamos por algo más simple: las herramientas fijas que se van pintando a medida que bajás.

Para resolverlos no hizo falta programar. Alcanzó con mirar con atención y pedir el cambio.

¿Por qué esto le importa a alguien que no quiere hacerse una web?

Porque la web es lo de menos. Lo que muestra es un patrón que sirve para casi cualquier proceso de una empresa: vos ponés el criterio (qué se hace, para quién, qué queda y qué se va) y la IA ejecuta.

Para un founder o un directivo, eso significa poder probar una idea (una landing, una herramienta interna, un flujo de trabajo) sin esperar turno del equipo técnico, y llegar a la conversación con el equipo con algo concreto en la mano.

¿Qué aprendí?

1. El criterio es tuyo y la ejecución la podés delegar. Claude escribe el código; decidir qué se queda y qué se va es trabajo mío.
2. Iterar en privado es barato. Diez versiones en una vista previa cuestan menos que una mala versión publicada.
3. Pedir revisiones con un rol concreto mejora el resultado. “Revisalo como un director de ventas” da mejores observaciones que “¿qué te parece?”.
4. El stack gratuito alcanza de sobra para una web personal con blog.

Es el mismo principio que aplico en ventas: las herramientas se adaptan a las personas, no al revés.

Si estás probando algo parecido en tu empresa, escribime y te cuento cómo lo hice.