🧑‍💻 Cómo creé un sitio web con Codex

Sigo compartiendo novedades sobre cómo va mi aprendizaje de redes neuronales.

La semana pasada me dediqué de lleno al vibe coding. Para practicar, elegí una tarea real: crear un landing page para mis servicios de consultoría.

Antes tenía una página en Taplink, pero no me gustaban el diseño, la funcionalidad y el pago mensual. Así que decidí hacer mi propio sitio web con Codex de OpenAI.

¿Por qué Codex? En mi opinión, para este tipo de tareas casi no le va a la zaga a Claude, pero cuesta menos de $20 al mes.

🙈 Proceso paso a paso para principiantes

1️⃣ Encontré sitios que me gustaron por su estructura y diseño.

2️⃣ Preparé textos, fotos y enlaces. Se lo di todo a Codex junto con las referencias.

3️⃣ En unos 15 minutos obtuve la primera versión del sitio, que ya se podía publicar.

4️⃣ Luego la perfeccioné a través del chat: cambié textos y títulos, eliminé bloques innecesarios, ajusté el diseño.

5️⃣ Le pedí que adaptara el maquetado para computadoras, tabletas y teléfonos inteligentes.

6️⃣ Creé un repositorio en GitHub y subí el proyecto allí. Después de la autorización, Codex puede hacerlo por sí mismo.

7️⃣ Me registré en Vercel, conecté GitHub e importé el proyecto. Ahora, después de cada cambio en el código, el sitio se actualiza automáticamente.

8️⃣ Compré un dominio en Beget. En mi caso, costó más barato que en Reg.ru.

9️⃣ Conecté el dominio a Vercel y configuré los registros DNS que vinculan el dominio con el hosting.
Después de un tiempo, el sitio estuvo disponible en Internet.
Antes de publicar, también conviene verificar:
— la versión móvil;
— los botones y enlaces;
— los formularios de contacto;
— la corrección de los textos;
— el funcionamiento de HTTPS.

🚀 Nivel avanzado

🔟 Verifiqué el sitio con Page Speed Insight y obtuve un informe sobre la velocidad de carga.

1️⃣1️⃣ Le pasé las recomendaciones a Codex. Él optimizó el código, las imágenes y la carga de la página. Después de eso, el sitio comenzó a abrirse notablemente más rápido en teléfonos antiguos.

1️⃣2️⃣ Le pedí que hiciera una optimización SEO básica:
— configurar títulos y descripciones de las páginas;
— mejorar la estructura de los textos;
— añadir descripciones a las imágenes;
— crear robots.txt;
— crear un mapa del sitio.

Además, conviene conectar la analítica, Google Search Console y enviar el mapa del sitio para su indexación.

La primera vez, todo el proceso me llevó unas 8 horas.
Cualquier cambio en el sitio ya hecho toma de 1 a 5 minutos. Incluso si decido cambiar completamente el diseño, basta con describir la tarea en el chat. Codex actualizará el código y Vercel publicará automáticamente la nueva versión.

El resultado se puede ver en las imágenes de arriba ☝️ La fuente y los iconos los eligió Codex.

¿Quieres repetir este camino? Te recomiendo el curso de vibe coding. Allí está todo lo mismo, pero con instrucciones en video detalladas:
👉 [enlace al curso]

🎁 10% de descuento con el código promocional: IRESHEV