Publicar una página web hecha con ChatGPT u otra inteligencia artificial es más sencillo cuando separas el proyecto en tres etapas: generar archivos correctos, revisarlos y subirlos al servidor. No necesitas ser programador para publicar una página informativa básica, aunque sí conviene entender qué archivo hace cada cosa y seguir buenas prácticas de seguridad.

En esta guía aprenderás cómo pasar de una idea escrita en un prompt a un sitio visible en internet utilizando un plan de hospedaje web y el Administrador de archivos de cPanel. El procedimiento funciona con WhataHosting y con otros proveedores que ofrezcan cPanel o una herramienta equivalente.

Qué necesitas antes de comenzar

• Un nombre de dominio, por ejemplo tumarca.com.
• Un servicio de hospedaje web activo, ya sea de WhataHosting o de otro proveedor.
• Acceso a cPanel o al panel de administración del hosting.
• Una cuenta en ChatGPT u otra herramienta de inteligencia artificial capaz de generar código.
• Un editor de texto opcional, como Visual Studio Code, para revisar los archivos.
• Una copia de seguridad si el dominio ya tiene un sitio publicado.

Si todavía no tienes alojamiento, revisa nuestra guía para elegir el mejor hospedaje web. Una página estática suele funcionar bien en un plan compartido; los proyectos con bases de datos, aplicaciones o tráfico elevado pueden requerir Cloud Hosting o un VPS.

Publicar una página web hecha con ChatGPT en 10 pasos

1. Define el objetivo y el contenido de la página

Antes de pedir código a la IA, define qué debe lograr la página. Indica el tipo de negocio, la audiencia, las secciones necesarias, los colores, el tono, la llamada a la acción y los datos que deben aparecer.

Una solicitud precisa produce archivos más útiles. No incluyas contraseñas, llaves de API, información de clientes ni otros datos confidenciales en el prompt.

2. Pide a la IA una página estática en HTML, CSS y JavaScript

Para una landing page o sitio informativo sencillo, el formato más fácil de publicar en un hosting convencional es:

• index.html: estructura y contenido principal.
• styles.css: colores, tipografías, espacios y diseño adaptable.
• script.js: interacciones como menú móvil, preguntas frecuentes o validaciones básicas.
• Carpeta images: logotipo, fotografías e ilustraciones.

Puedes copiar y adaptar este prompt:

Actúa como diseñador y desarrollador web.
Crea una página web estática, moderna, rápida y adaptable a móviles para [TIPO DE NEGOCIO].

Objetivo: [OBJETIVO PRINCIPAL].
Audiencia: [TIPO DE CLIENTE].
Secciones: encabezado, portada, beneficios, servicios, testimonios, preguntas frecuentes, llamada a la acción y pie de página.
Colores de marca: [COLORES].
Tono: [PROFESIONAL / CERCANO / TÉCNICO].

Entrega el proyecto en tres archivos separados:
1. index.html
2. styles.css
3. script.js

Requisitos:
- HTML semántico y accesible.
- Diseño responsive.
- Un solo H1 y jerarquía correcta de H2 y H3.
- Meta title y meta description.
- Imágenes con texto alternativo.
- Enlaces internos claros.
- Sin librerías externas innecesarias.
- Sin claves, contraseñas ni datos sensibles.
- Incluye instrucciones para guardar y probar cada archivo localmente.

3. Solicita los archivos en un formato fácil de descargar

Si la herramienta puede generar archivos descargables, pídele que entregue una carpeta o archivo ZIP con la estructura completa. Si solo muestra bloques de código, crea en tu computadora una carpeta para el proyecto y guarda cada bloque con su nombre y extensión exactos.

La estructura mínima debe verse así:

mi-sitio/
├── index.html
├── styles.css
├── script.js
└── images/
    ├── logo.webp
    └── portada.webp

Evita guardar los archivos como index.html.txt. En Windows activa la visualización de extensiones conocidas para comprobar el nombre real. Las imágenes deberían utilizar formatos optimizados como WebP, JPEG o PNG.

4. Prueba el sitio en tu computadora

Abre index.html en un navegador y revisa todas las secciones. Confirma que las imágenes aparezcan, los botones funcionen y no existan textos provisionales. Cambia el tamaño de la ventana para comprobar la versión móvil.

Prueba también los enlaces, teléfonos y direcciones de correo. Un formulario visual no enviará mensajes por sí solo: necesita un servicio de formularios o programación del lado del servidor. Pídele a la IA que explique cualquier integración antes de utilizarla.

5. Comprime los archivos en formato ZIP

Selecciona el contenido del proyecto y crea un archivo .zip. Lo ideal es que index.html quede en la raíz del ZIP, no dentro de varias carpetas anidadas. Esto simplifica la extracción en cPanel.

6. Inicia sesión en cPanel

Tu proveedor de hosting debe entregarte una dirección de acceso, usuario y contraseña. Dependiendo de la configuración, puedes entrar desde el portal de clientes o mediante una dirección como tudominio.com/cpanel.

Utiliza una contraseña única y activa la autenticación de dos factores si está disponible. No compartas las credenciales con la IA ni las pegues en conversaciones.