Publicar tu web gratis con GitHub Pages

Has hecho tu primera página con HTML y CSS y quieres enseñarla. GitHub Pages publica gratis una web estática (HTML, CSS, JavaScript e imágenes) directamente desde un repositorio de GitHub, con HTTPS incluido. Es ideal para un portafolio, la web de un proyecto o tus prácticas de clase.

Qué necesitas y qué no permite

• Una cuenta de GitHub y tu web en un repositorio (si aún no sabes cómo, empieza por Git y GitHub desde cero).
• Según la documentación de GitHub, con el plan gratuito GitHub Free Pages funciona en repositorios públicos. Para publicar desde repositorios privados hace falta un plan de pago. Ten en cuenta que en un repositorio público todo el código es visible.
• Solo sirve archivos estáticos: no ejecuta PHP, Python ni bases de datos en el servidor. El JavaScript sí funciona, porque se ejecuta en el navegador de quien visita la página.

Dos tipos de sitio

Solo puedes tener un sitio de usuario, pero tantos de proyecto como repositorios.

Publicarla paso a paso

1. Crea el repositorio en GitHub. Para un sitio de usuario, llámalo exactamente tu-usuario.github.io.
2. Sube tus archivos. La página de inicio debe llamarse index.html (GitHub Pages también acepta index.md o README.md como archivo de entrada).
3. En el repositorio, ve a Settings > Pages.
4. En Build and deployment, elige como origen Deploy from a branch, la rama main y la carpeta / (root) (o /docs si tienes la web en esa carpeta). Guarda.
5. Espera un par de minutos y recarga la página de ajustes: aparecerá la dirección de tu sitio.

A partir de ahí, cada vez que hagas git push con cambios, la web se actualiza sola.

Si tu proyecto necesita compilarse antes de publicarse (por ejemplo, un generador de webs estáticas o un proyecto de React), el origen debe ser un flujo de GitHub Actions que compile y publique el resultado. GitHub ofrece plantillas para los generadores más comunes.

Rutas que fallan al publicar

El error más común: en tu ordenador todo se ve bien y publicado faltan las imágenes o los estilos.

• Mayúsculas: Windows no distingue Foto.jpg de foto.jpg, pero el servidor sí. Usa siempre minúsculas en los nombres de archivo.
• Rutas que empiezan por / en un sitio de proyecto: /estilos.css apunta a tu-usuario.github.io/estilos.css, fuera de tu carpeta /mi-web/. Usa rutas relativas como estilos.css o img/foto.jpg.
• Espacios y tildes en nombres de archivo: evítalos (mi-foto.jpg, no mi foto ñ.jpg).

Antes de publicar, revisa

• Que no subes datos privados: contraseñas, claves de API, tu DNI o documentos personales. En un repositorio público cualquiera puede leer el historial completo, incluso lo que hayas borrado después.
• El peso de las imágenes: una foto del móvil puede ocupar varios megas. Redúcela con nuestro compresor de imágenes para que la web cargue rápido.
• El icono de la pestaña (favicon): puedes crearlo con nuestro creador de iconos ICO.
• Los límites de uso: según GitHub, el sitio publicado no puede pasar de 1 GB, tiene un límite flexible de ancho de banda de 100 GB al mes y Pages no está pensado para tiendas online, negocios en línea ni para enviar información confidencial como contraseñas o datos de tarjetas. Para eso existen alojamientos específicos.

Si quieres usar tu propio dominio (por ejemplo, tunombre.es), GitHub Pages lo permite configurándolo en Settings > Pages > Custom domain y en el panel de tu proveedor de dominio, siguiendo la documentación de GitHub.