Prefacio
Después de crear un sitio con herramientas de IA como ChatGPT, Canva, Gemini Canvas, Claude Artifacts o Sider Web Creator, la siguiente gran pregunta es cómo gestionar el alojamiento web en GitHub Pages para que puedas visitar el sitio a través de tu propio dominio. Esta guía te lleva paso a paso a través del proceso, desde la exportación de un proyecto en Sider Web Creator hasta la obtención de un sitio web completo bajo tu dominio personal, al tiempo que desmitifica tanto el alojamiento web como la configuración de GitHub Pages.
🎯 Qué aprenderás
Cómo descargar y comprender correctamente los archivos del proyecto generado por IA antes de elegir un flujo de trabajo de alojamiento web de GitHub Pages.
Instrucciones paso a paso para implementar el sitio de forma gratuita en GitHub Pages.
Cómo comprar y vincular tu propio dominio personalizado dentro de la configuración de GitHub Pages y conectarlo a los registros DNS de mejores prácticas.
Consejos profesionales para que el sitio se vea completamente profesional y confiable una vez que la configuración de GitHub Pages esté activa.
La mayoría de las plataformas de alojamiento estático, incluido GitHub Pages, esperan una carpeta de compilación limpia, por lo que primero debes recopilar tus archivos.
1.1 Descarga los archivos del proyecto
Después de que Web Creator termine de generar el sitio, haz clic en el botón Descargar en la esquina superior derecha.
Espera mientras el sistema empaqueta tu proyecto.
Recibirás un archivo .zip listo para cargar en GitHub Pages.
Extrae el zip en cualquier lugar de tu computadora.
1.2 Comprende la estructura de archivos (¡Importante!)
mi-sitio-web/
├── dist/ ⭐ Compilación de producción para **GitHub Pages**
│ ├── index.html → Página de inicio
│ ├── assets/ → Estilos y scripts
│ └── …
├── src/ 📝 Carpeta de código fuente
├── package.json 📦 Configuración del proyecto
└── …otros archivos
Recordatorio clave: Solo el contenido dentro de dist/ se publica en GitHub Pages.
1.3 Prueba de vista previa local
Ingresa a la carpeta dist/.
Haz doble clic en index.html.
El sitio se abre en tu navegador.
Verifica que todo funcione antes de subir a GitHub Pages.
🚀 Paso 2: Elige una plataforma de implementación
Si bien GitHub Pages es el héroe de esta guía, aquí hay una comparación rápida:
| |
|---|
🌟 GitHub Pages (enfoque de esta guía) | Totalmente gratis • Implementación de arrastrar y soltar o git push • HTTPS gratuito • CDN global • Dominios personalizados • CI nativa con GitHub Actions |
| Red perimetral global • 100% gratis • Increíblemente rápido |
| Interfaz de usuario pulida • Rica en funciones |
📤 Paso 3: Implementar en GitHub Pages (Guía detallada)
Aunque GitHub Pages vive dentro de una plataforma para desarrolladores, piénsalo como un alojamiento web ultramoderno con la comodidad de presionar un botón.
3.1 Regístrate y crea un repositorio
Visita github.com e inicia sesión.
Haz clic en + Nuevo repositorio.
Nómbralo mi-sitio-web y elige Público (o Privado si tienes un plan pago; GitHub Pages ahora admite repositorios privados).
Deja Inicializar con README sin marcar si planeas subir más tarde.
3.2 Agrega los archivos de tu sitio
Método A: Carga de arrastrar y soltar (mejor para principiantes)
En la pestaña Código del repositorio, haz clic en Agregar archivo → Cargar archivos.
Suelta todo dentro de dist/.
Desplázate hacia abajo y haz clic en Confirmar cambios.
Método B: Git CLI (mejor para desarrolladores)
# Clona el repositorio vacío
git clone https://github.com/<user>/mi-sitio-web.git
cd mi-sitio-web
# Copia la salida de compilación
cp -r /ruta/a/dist/* .
# Confirma y sube
git add .
git commit -m "Implementación inicial de **GitHub Pages**"
git push origin main
Cualquiera de los caminos te deja con archivos estáticos en la raíz del repositorio, perfecto para GitHub Pages.
3.3 Habilita GitHub Pages
Ve a Configuración → Pages.
En Fuente elige Implementar desde una rama → main (/root).
Haz clic en Guardar. GitHub Pages se compila en ~30 s y devuelve una URL como https://<user>.github.io/mi-sitio-web/.
3.4 Obtén tu URL predeterminada
Visita el enlace para confirmar que todo se carga. GitHub Pages sirve automáticamente a través de CDN global.
🌐 Paso 4: Compra y vincula tu propio dominio
4.1 Compra un dominio
Registradores sugeridos (todos funcionan bien con GitHub Pages): Namecheap, GoDaddy, Alibaba Cloud, Tencent Cloud. Elige un .com corto siempre que sea posible.
4.2 Agrega el dominio en GitHub Pages
Aún en Configuración → Pages, encuentra Dominio personalizado.
Ingresa misitio web.com o www.misitioweb.com.
Haz clic en Guardar. GitHub Pages escribe un archivo CNAME automáticamente.
4.3 Configura los registros DNS
| | |
|---|
| | 185.199.108.153, 185.199.109.153, 185.199.110.153, 185.199.111.153
|
| | |
Espera de 10 minutos a 24 horas para la propagación. Estas IPs son constantes para GitHub Pages. |
4.4 Aplica HTTPS
Después de que se propague el DNS, actualiza la configuración de Pages y activa Aplicar HTTPS. Los certificados Let’s Encrypt se emiten automáticamente.
✨ Paso 5: Haz que el sitio se vea profesional
5.1 Agrega un favicon personalizado
Prepara un icono de 32×32 px llamado favicon.ico.
Colócalo en la raíz del repositorio.
Confirma y sube; GitHub Pages lo sirve instantáneamente.
5.2 Inserta metainformación personalizada
Edita index.html en la raíz del repositorio:
<meta name="description" content="Your website description on **GitHub Pages**">
<meta name="author" content="Your Name">
5.3 Analítica (opcional)
Pega fragmentos de GA / Plausible dentro de <head>; GitHub Pages respeta los encabezados de almacenamiento en caché.
🔧 Solución de problemas
¿Página en blanco? Confirma que index.html está en la raíz del repositorio y que las rutas de los activos son relativas.
¿El dominio se redirige a .github.io? Vuelve a verificar los registros A/CNAME y espera el TTL completo.
¿El interruptor HTTPS está desactivado? El DNS aún no es correcto; verifica con dig.
🎉 Resumen
¡Felicitaciones! Ahora tienes:
✅ Has descargado con éxito tu sitio web generado por IA listo para el alojamiento de GitHub Pages.
✅ Lo has implementado de forma gratuita en GitHub Pages.
✅ Has asegurado tu propio dominio personalizado.
✅ Has pulido el entorno de GitHub Pages para que se vea completamente profesional.
Tu sitio ahora está:
🌐 En línea 24/7, impulsado por la CDN de GitHub Pages.
🏷️ Servido bajo un dominio profesional.
🔒 Protegido por el cifrado HTTPS.
⚡ Globalmente rápido gracias a los nodos perimetrales de GitHub Pages.
🗝️ Totalmente poseído y controlado por ti.
💡 Próximos pasos
Optimización SEO: agrega palabras clave específicas y meta descripciones para mejorar las clasificaciones de búsqueda para tu configuración de GitHub Pages.
Compartir en redes sociales: integra botones para compartir en las principales plataformas.
Actualizaciones continuas: confirma los cambios regularmente; GitHub Pages se vuelve a implementar automáticamente.
Copias de seguridad: habilita la protección del repositorio de GitHub o duplica el repositorio.
Ahora eres un verdadero propietario de un sitio web: ¡comparte tu enlace de GitHub Pages y muestra tu creación al mundo!
