Si acabas de terminar de construir tu primer sitio HTML y no quieres pagar por un hosting web, GitHub Pages es la forma más fácil de ponerlo en línea gratis. Aprender a alojar un sitio web HTML estático en GitHub Pages toma solo unos minutos, no requiere ningún lenguaje del lado del servidor y te da una URL real y funcional que puedes compartir con cualquiera: sin tarjeta de crédito, sin plan de hosting y sin archivos de configuración con los que pelear.

GitHub Pages es un servicio gratuito de alojamiento de sitios estáticos integrado en cada repositorio de GitHub. Está diseñado para el tipo de proyecto que los diseñadores web principiantes construyen primero: un sitio sencillo hecho de HTML, CSS y JavaScript, sin necesidad de base de datos ni backend. En lugar de pagar a un proveedor de hosting, simplemente subes tus archivos a un repositorio de GitHub, activas un ajuste y GitHub publica el sitio por ti, con HTTPS gratuito y la opción de conectar después tu propio dominio personalizado.

En esta guía aprenderás exactamente cómo preparar los archivos de tu sitio web, crear un repositorio de GitHub, subir tu sitio a través del sitio web de GitHub (sin necesidad de línea de comandos) y activar GitHub Pages para publicarlo en vivo. Al terminar, tendrás un sitio web público funcionando y sabrás cómo actualizarlo cuando quieras.

¿Por Qué Alojar un Sitio Web Estático en GitHub Pages?

Antes de entrar en los pasos, conviene saber por qué tantos principiantes y desarrolladores profesionales eligen GitHub Pages para el alojamiento de sitios estáticos:

  • Es completamente gratuito: no hay factura de hosting, ni siquiera con un dominio personalizado.
  • Incluye HTTPS gratuito: tu sitio obtiene automáticamente el candado de seguridad.
  • Es apto para principiantes: puedes subir archivos directamente desde el navegador, sin línea de comandos.
  • Funciona también como control de versiones: cada cambio a tu sitio queda guardado en el historial de tu repositorio de GitHub.
  • Es confiable: GitHub Pages funciona sobre la infraestructura de GitHub, por lo que la disponibilidad no es algo que debas administrar tú mismo.

La contrapartida es que GitHub Pages solo aloja sitios estáticos: HTML, CSS y JavaScript simples. Si tu proyecto necesita un lenguaje del lado del servidor como PHP o una base de datos, necesitarás otro proveedor. Para sitios de portafolio, páginas de aterrizaje, documentación y sitios de negocios sencillos, sin embargo, es difícil de superar.

Lo que Necesitarás Antes de Empezar

  • Una cuenta gratuita de GitHub
  • Los archivos de tu sitio web: como mínimo, un archivo index.html
  • Un navegador web moderno

Paso 1: Prepara los Archivos de Tu Sitio Web

Un sitio estático sencillo normalmente usa una estructura de archivos como esta:

my-website/
├── index.html
├── style.css
└── script.js

El archivo llamado index.html es importante porque GitHub Pages lo carga automáticamente como la página de inicio de tu sitio. Asegúrate de que esté en la carpeta que elijas como fuente de publicación en un paso posterior.

Usa Rutas Relativas, No Rutas Absolutas

Mantén relativas las rutas de tus archivos para que el sitio funcione correctamente una vez publicado:

<link rel="stylesheet" href="style.css">
<script src="script.js" defer></script>

Evita las diagonales iniciales como /style.css cuando tu sitio se publique desde un repositorio de proyecto. Los sitios de proyecto de GitHub Pages se publican bajo una subcarpeta (el nombre de tu repositorio), así que una ruta absoluta que apunte a la raíz del dominio se romperá. Las rutas relativas son más portátiles y funcionarán sin importar la estructura final de la URL.

Paso 2: Crea un Repositorio de GitHub

  1. Inicia sesión en GitHub.
  2. Selecciona New repository en el menú de tu cuenta.
  3. Ingresa un nombre para el repositorio.
  4. Elige si el repositorio será público o privado, según las necesidades de tu proyecto.
  5. Selecciona Create repository.

El nombre del repositorio determina la URL de tu sitio:

  • Sitio de usuario personal: nombra el repositorio exactamente como tu nombre de usuario de GitHub, con este formato:
    username.github.io
  • Sitio de proyecto: usa cualquier otro nombre de repositorio y GitHub lo publicará en una URL como:
    https://username.github.io/repository-name/

Paso 3: Sube los Archivos de Tu Sitio Web

Abre tu nuevo repositorio, selecciona Add file y luego elige Upload files. Arrastra index.html, style.css, script.js y cualquier carpeta de imágenes al área de carga.

Antes de confirmar tus cambios, verifica que:

  • index.html esté incluido en la carga.
  • Los nombres de archivos y carpetas usen las mismas mayúsculas y minúsculas que las rutas a las que hace referencia tu HTML.
  • Las imágenes estén dentro del repositorio y se enlacen con rutas relativas.
  • No se incluyan claves secretas, contraseñas ni archivos de configuración privados.

Ingresa un mensaje de commit breve y claro, algo como Add website files, y luego selecciona Commit changes.

Consejo: Para proyectos más grandes o sitios que actualizarás con frecuencia, usar Git desde la línea de comandos es más rápido que subir archivos desde el navegador cada vez. Consulta Domina Git: Comandos Básicos para el Control de Versiones si quieres aprender el flujo de trabajo por línea de comandos.

Paso 4: Habilita GitHub Pages

  1. Abre Settings del repositorio.
  2. Selecciona Pages en Code and automation.
  3. En Build and deployment, elige Deploy from a branch.
  4. Selecciona la rama que contiene los archivos de tu sitio web, normalmente main.
  5. Selecciona la carpeta que contiene index.html, normalmente / (root).
  6. Selecciona Save.

GitHub mostrará la URL publicada de tu sitio cuando termine el despliegue. El primer despliegue puede tardar uno o dos minutos. Después de eso, cualquier nuevo commit a la rama seleccionada republicará automáticamente el sitio actualizado: no hay un botón de “desplegar” aparte al que hacer clic.

Paso 5: Prueba Tu Sitio Publicado

Abre la URL que aparece en los ajustes de Pages de tu repositorio y recórrelo como lo haría un visitante. Revisa:

  • Los enlaces de navegación
  • Las imágenes y otros recursos
  • Las hojas de estilo
  • Las interacciones de JavaScript
  • El diseño en móvil
  • Los errores de la consola del navegador (abre las herramientas de desarrollo y mira la pestaña Console)

Si tu sitio funcionaba localmente pero algo se ve roto en GitHub Pages, la causa más común son las rutas de los archivos. Una ruta como images/photo.jpg es relativa a la ubicación de la página actual, mientras que /images/photo.jpg parte de la raíz del dominio, y en un sitio de proyecto esa raíz incluye el nombre de tu repositorio.

Paso 6: Agrega un Dominio Personalizado (Opcional)

GitHub Pages también admite dominios personalizados sin costo adicional. En los ajustes de Pages de tu repositorio, ingresa tu dominio en Custom domain y guárdalo. Luego agrega los registros DNS que GitHub solicita en tu registrador de dominios o proveedor de DNS.

Una vez que los cambios de DNS se hayan propagado, lo que puede tardar desde unos minutos hasta 24 horas, regresa a los ajustes de Pages y habilita HTTPS cuando la opción esté disponible. Prueba tanto tu dominio personalizado como la URL original de github.io antes de redirigir o eliminar algo, para que siempre tengas una alternativa funcional.

Problemas Comunes y Cómo Resolverlos

La Página Muestra un Error 404

Confirma que la rama y la carpeta que seleccionaste para la publicación realmente contienen index.html. Revisa también que los ajustes de Pages de tu repositorio apunten a la rama y a la carpeta correctas.

El CSS o el JavaScript No Se Cargan

Revisa con cuidado los nombres y las rutas de los archivos en busca de errores de ortografía y diferencias de mayúsculas y minúsculas. Confirma que estás usando rutas relativas y que los archivos a los que se hace referencia realmente se incluyeron en tu carga.

Faltan Imágenes

Asegúrate de que los archivos de imagen estén dentro del repositorio y de que cada valor de src coincida con la ubicación exacta del archivo y sus mayúsculas y minúsculas. Evita los espacios y las mayúsculas inconsistentes en los nombres de archivo: son una fuente común de enlaces de imagen rotos.

Los Cambios No Aparecen

Revisa tu último commit y el estado del despliegue en los ajustes de Pages. Luego actualiza la página o ábrela en una ventana privada o de incógnito, ya que tu navegador puede estar mostrándote una versión en caché del sitio anterior.

Conclusión

Alojar un sitio web HTML estático en GitHub Pages es una de las formas más rápidas y económicas para que un diseñador web principiante ponga un proyecto real en internet. Todo lo que se necesita es un repositorio de GitHub, un archivo index.html en el lugar correcto y una fuente de publicación configurada en los ajustes de Pages de tu repositorio: sin factura de hosting, sin administración de servidores y sin línea de comandos si prefieres subir archivos desde el navegador.

Una vez habilitado GitHub Pages, actualizar tu sitio es tan simple como hacer commit de archivos nuevos a la rama seleccionada; GitHub republica automáticamente el sitio en vivo por ti. A partir de aquí, puedes agregar un dominio personalizado, HTTPS gratuito y, eventualmente, un flujo de trabajo de Git por línea de comandos a medida que tus proyectos se vuelvan más complejos.

Ya sea que publiques un portafolio, una página de aterrizaje o tu primerísimo proyecto de programación, ahora sabes exactamente cómo alojar gratis un sitio web HTML estático en GitHub Pages. Para ver las opciones y limitaciones actuales, consulta la documentación oficial de GitHub Pages y su guía para crear un sitio de GitHub Pages.