Publicación de sitios estáticos

GitHub Pages

Cómo publicar una página web desde un repositorio de GitHub

1 ¿Qué es GitHub Pages?

GitHub Pages es un servicio de GitHub que permite publicar una página web directamente desde un repositorio. Coge los archivos HTML, CSS y JavaScript que tienes ahí subidos y los publica con una URL pública de forma automática.

No hace falta contratar ningún servidor ni tocar configuraciones. Solo hay que subir el archivo y GitHub se encarga del resto. Eso sí, solo funciona con contenido estático, no admite lenguajes de servidor (por ejemplo: Python).

Sirve para publicar una página personal, la web de un proyecto, documentación técnica, un blog...

2 Tipos de sitios

Hay dos tipos de sitios que puedes crear con GitHub Pages:

Sitio de usuario u organización

El repositorio tiene que llamarse <usuario>.github.io. Solo puedes tener uno por cuenta. La URL será https://usuario.github.io.

Sitio de proyecto

El repositorio puede tener cualquier nombre y puedes crear uno por proyecto. La URL sería https://usuario.github.io/nombre-repositorio.


3 Paso 1 — Crear el repositorio

  1. Pulsar el botón "+" y elegir "New repository"
  2. Elegir el propietario con el menú desplegable
  3. Ponerle un nombre al repositorio
  4. Seleccionar que sea público
  5. Activar la opción de añadir un README
  6. Hacer clic en "Create repository"

4 Paso 2 — Subir el HTML y activar Pages

GitHub Pages busca de forma automática un archivo llamado index.html(El archivo principal tiene que tener este nombre)

  1. Dentro del repositorio, pulsar "Add file" y elegir "Upload files"
  2. Subir el archivo index.html
  3. Hacer clic en "Commit changes" para guardar
  4. Ir a Settings > Pages
  5. En el apartado Branch, seleccionar la rama main y pulsar Save

5 Paso 3 — Ver el sitio publicado

Para ver la URL hay que volver a Settings > Pages.

Ahí aparecerá un mensaje que dice "Your site is ready to be published at https://tuusuario.github.io/nombre-repositorio".

Si haces clic en la URL, se abrirá tu sitio publicado. Si no se ve, espera unos minutos y vuelve a intentarlo. A veces tarda un poco en actualizarse.


6 Límites de uso

GitHub Pages es gratuito pero tiene sus límites. No está pensado para montar una tienda online, es para sitios personales, documentación o proyectos pequeños.

QuéLímite
Tamaño del repositorio1 GB recomendado como máximo
Peso del sitio publicadoNo puede superar 1 GB
Ancho de banda mensual100 GB (flexible)
Compilaciones por hora10 (flexible)
Tiempo máximo de despliegue10 minutos
Como dato: si el repositorio pesa más de 1 GB GitHub Pages puede seguir funcionando, pero avisan de que no está pensado para eso y pueden cortar el servicio.

7 HTTPS y seguridad

GitHub Pages ya usa HTTPS en los sitios con dominio github.io. Debido a que la conexión va cifrada, el navegador no muestra el aviso de "sitio no seguro".

Si se tiene un dominio personalizado, se puede forzar HTTPS desde Settings > Pages con la casilla "Enforce HTTPS".

Es importante decir que GitHub Pages no es para manejar contraseñas ni datos de pago. Aunque tenga HTTPS, sigue siendo un sitio estático público.

8 Errores típicos

Hay algunos fallos que se repiten bastante cuando se empieza con GitHub Pages:

El sitio da error 404

La mayoria de veces es porque el archivo no se llama exactamente index.html. Con mayúscula o cualquier variación no funciona.

Los cambios no se ven

Sobretodo porque puede tardar un rato en actualizarse y Si sigue igual, vacía la caché con Ctrl + Shift + R.

El sitio no se publica solo

Quien hizo el commit tiene que tener permisos de administrador y el correo verificado en GitHub.

El repositorio es privado y no funciona

GitHub Pages solo funciona en repositorios públicos con cuenta gratuita. Si está en privado hay que pasarlo a público o tener una cuenta de pago.