Cómo subir mi página web a GitHub Pages (gratis) paso a paso

Para subir tu página web a GitHub y publicarla gratis, creas un repositorio, subes tus archivos y activas GitHub Pages en la configuración. En unos minutos tu sitio queda en tuusuario.github.io/tu-repo. Es ideal para páginas estáticas (HTML, CSS, JavaScript) y portafolios; abajo te explicamos también sus límites, porque no sirve para todo.

GitHub es un sitio donde se guarda código. GitHub Pages es su servicio para publicar ese código como página web.

GitHub Pages: ¿es gratis?

Sí, con condiciones. Según la documentación de GitHub Pages y sus límites de uso, a noviembre de 2026:

Concepto	Condición
Cuenta gratuita	Publica desde repositorios públicos
Repositorios privados	Requiere plan de pago de GitHub
Tamaño del sitio	Hasta 1 GB
Transferencia	Límite suave de 100 GB al mes
Builds	Límite suave de 10 por hora (sin aplicar a GitHub Actions propios)
Uso comercial	No permitido como hosting gratis para tiendas, negocios en línea o SaaS
Datos sensibles	No debe usarse para contraseñas o tarjetas

Ojo con “público”: todo tu código y archivos los podrá ver cualquiera. No subas llaves ni documentos privados.

GitHub Pages: cómo publicar (sin instalar nada)

1. Crea una cuenta en github.com.
2. Da clic en + (arriba a la derecha) → New repository. Ponle nombre, por ejemplo mi-pagina, y márcalo como Public. Da clic en Create repository.
3. En el repositorio, da clic en Add file → Upload files. Arrastra todos tus archivos. Debe haber un index.html en la raíz.
4. Da clic en Commit changes para guardar.
5. Ve a Settings → Pages.
6. En Build and deployment, en Source, elige Deploy from a branch. Selecciona la rama main y la carpeta / (root). Da clic en Save.
7. Espera uno o dos minutos y recarga. Arriba aparecerá la dirección: https://tuusuario.github.io/mi-pagina/.

Si nombras el repositorio exactamente tuusuario.github.io, la página queda en la raíz: https://tuusuario.github.io.

Los nombres de menú corresponden a la interfaz de GitHub a noviembre de 2026.

Para actualizarla

Sube los archivos nuevos con Add file → Upload files (reemplazan a los anteriores) y haz commit. GitHub vuelve a publicar solo.

Cómo publicar mi página web en GitHub si es React o Vite

GitHub Pages no corre npm run build por ti con la opción de rama. Tienes dos caminos:

Opción A: subir la carpeta ya construida. En tu computadora:

npm install
npm run build

Sube el contenido de dist a un repositorio y publícalo como arriba.

Opción B: GitHub Actions. En Settings → Pages → Source elige GitHub Actions y usa el flujo sugerido para sitios estáticos, que construye y publica cada vez que subes cambios.

Dos detalles que rompen apps de Vite en GitHub Pages:

• La ruta base. Si tu sitio vive en /mi-pagina/, configura Vite:

// vite.config.js
export default { base: "/mi-pagina/" };

Sin esto, la página carga en blanco porque busca los archivos en la raíz.

• Rutas internas (React Router): al recargar /contacto sale 404, porque Pages no sabe que todo debe ir a index.html. Un truco común es copiar index.html como 404.html en el build.

Conectar tu dominio a GitHub Pages

1. En Settings → Pages → Custom domain, escribe www.tunegocio.mx y guarda.
2. En tu registrador de dominio crea los registros que indica la guía de dominios de GitHub:
   • Un CNAME de www apuntando a tuusuario.github.io.
   • Para el dominio sin www, los registros A con las IPs que lista GitHub en esa guía.
3. Espera la propagación y activa Enforce HTTPS en la misma pantalla.

Si no sabes qué es un registro DNS, empieza por cómo subir tu página web a internet.

Formularios de contacto en GitHub Pages

Como GitHub Pages solo sirve archivos, un formulario de contacto no tiene a dónde “enviar” los datos. Las opciones habituales:

• Un botón de WhatsApp o un enlace mailto: en lugar de formulario. Es lo más simple y no depende de nadie.
• Un servicio externo de formularios: tu formulario manda los datos a ese servicio, que te los reenvía por correo. Revisa su plan gratuito, qué hace con los datos y si muestra publicidad.
• Una función en otro servicio (por ejemplo, una Edge Function de Supabase o un Worker de Cloudflare) si necesitas guardar los datos en tu propia base.

Si pides nombre, teléfono o correo, incluye un aviso de privacidad en el sitio.

Qué revisar antes de publicar

Como el repositorio de una cuenta gratuita es público, revisa:

1. Que no haya archivos de más: borradores, documentos internos, archivos .env o respaldos de base de datos.
2. El historial: si alguna vez subiste un archivo con una contraseña y luego lo borraste, sigue visible en commits anteriores. En ese caso, cambia la contraseña o llave de inmediato.
3. Los metadatos de la página: <title>, descripción y favicon, que es lo que se ve en Google y al compartir el enlace.
4. Que el sitio cargue en el celular y que los enlaces internos funcionen tanto con www como sin él, si conectaste dominio.

Para que Google encuentre tu página, sigue los pasos de cómo publicar mi página web en Google.

Errores comunes

• Página en blanco: falta base en Vite o subiste el código fuente en vez de dist.
• 404 en la página principal: no hay index.html en la carpeta elegida, o tiene otro nombre (Index.html cuenta como distinto).
• Imágenes que no cargan: rutas con / inicial o mayúsculas distintas.
• Repositorio privado sin plan de pago: Pages no aparece disponible.
• Usarlo para una tienda: va contra las condiciones de GitHub. Mira otras opciones en desplegar app web gratis o Netlify.

Cuándo pedir ayuda

Una página estática en GitHub Pages es un buen ejercicio para hacerlo tú mismo. Si tu sitio es de un negocio que vende, necesita formularios, login o una base de datos, conviene otro hosting y una configuración pensada para eso. En Black Engine lo revisamos por WhatsApp y te recomendamos dónde publicarlo.