GitHub Pages

Una vez que conocemos Git, GitHub, los repositorios y las principales herramientas de colaboración, podemos dar un paso más y aprender a publicar nuestros proyectos en Internet. GitHub Pages nos permite convertir un repositorio en un sitio web accesible desde cualquier dispositivo.

1. ¿Qué es GitHub Pages?

GitHub Pages es un servicio de GitHub que permite publicar sitios web directamente desde un repositorio. Está pensado principalmente para sitios web estáticos creados con HTML, CSS y JavaScript, sin necesidad de contratar un hosting independiente.

El funcionamiento es sencillo:
Los archivos de la página se almacenan en un repositorio de GitHub y GitHub Pages utiliza esos archivos para generar y publicar el sitio en una dirección web accesible desde Internet.

Por ejemplo, si tenemos un proyecto con archivos como index.html, style.css y script.js, podemos subirlos a un repositorio y utilizar GitHub Pages para convertir ese repositorio en una web pública.

Esto resulta especialmente útil para practicar desarrollo web, publicar proyectos personales, crear portfolios, documentación o páginas de proyectos.

1.1. ¿Para qué sirve GitHub Pages?

Entre sus usos más habituales se encuentran:

• Publicar proyectos web desarrollados con HTML, CSS y JavaScript.
• Crear un portfolio para mostrar proyectos y trabajos realizados.
• Publicar documentación de un proyecto o aplicación.
• Crear páginas personales o profesionales.
• Mostrar proyectos de programación almacenados en GitHub.
• Practicar desarrollo web sin necesidad de contratar un servidor.
• Crear sitios para proyectos Open Source.
• Publicar páginas de documentación o tutoriales.

Una de sus principales ventajas es que el proceso de publicación está integrado con GitHub. Cuando modificamos los archivos del proyecto y subimos los cambios al repositorio, GitHub Pages puede actualizar automáticamente la versión publicada del sitio.

2. ¿Cómo funciona GitHub Pages?

GitHub Pages funciona utilizando un repositorio de GitHub como fuente de los archivos que forman un sitio web. En lugar de subir los archivos a un hosting tradicional, los almacenamos en un repositorio y configuramos GitHub Pages para que publique su contenido.

El proceso básico puede entenderse de la siguiente manera:

Repositorio de GitHub → Archivos del proyecto → Configuración de GitHub Pages → Sitio web publicado

Por ejemplo, podemos tener un repositorio con esta estructura:

mi-web/
├── index.html
├── style.css
└── script.js

El archivo index.html contiene la estructura de la página, mientras que style.css y script.js agregan los estilos y la funcionalidad.

Una vez que configuramos GitHub Pages indicando desde qué rama y carpeta debe obtener los archivos, GitHub publica el contenido y genera una URL desde la que podemos acceder al sitio.

2.3. ¿GitHub Pages es gratis?

Sí, GitHub Pages permite publicar sitios web estáticos sin pagar un hosting adicional. Podemos utilizar HTML, CSS y JavaScript y acceder al sitio mediante una dirección como:

https://usuario.github.io/mi-sitio/
Lenguaje del código: JavaScript (javascript)

No es necesario comprar un dominio para utilizar GitHub Pages. Si queremos utilizar un dominio personalizado, como www.misitio.com, tendremos que registrar y pagar ese dominio por separado.

En resumen, podemos publicar una web en GitHub Pages utilizando la dirección github.io sin pagar por el alojamiento.

2.3. ¿Se puede acceder desde cualquier dispositivo?

Sí. Una web publicada con GitHub Pages puede visitarse desde cualquier dispositivo que tenga conexión a Internet y un navegador web, como computadoras, notebooks, tablets o teléfonos móviles.

Por ejemplo, una vez publicada nuestra web:

https://usuario.github.io/mi-sitio/
Lenguaje del código: JavaScript (javascript)

podemos abrir esa dirección desde distintos dispositivos y navegadores.

La única consideración importante es que el sitio debe estar diseñado de forma responsive, es decir, adaptarse correctamente a diferentes tamaños de pantalla. Esto se consigue principalmente mediante CSS y técnicas como media queries.

Por lo tanto, GitHub Pages se encarga de publicar la web, mientras que nosotros debemos encargarnos de que su diseño se adapte correctamente a móviles, tablets y computadoras.

3. Requisitos para usar GitHub Pages

Para utilizar GitHub Pages no necesitamos contratar un hosting ni configurar un servidor web tradicional. Los requisitos básicos son bastante sencillos, especialmente si queremos publicar una página creada con HTML, CSS y JavaScript.

3.1. Cuenta de GitHub

Necesitamos tener una cuenta de GitHub para poder crear y administrar repositorios y configurar GitHub Pages.

Si ya hemos seguido el curso de GitHub, este paso debería estar completado.

3.2. Repositorio de GitHub

Debemos tener un repositorio GitHub donde se encuentren los archivos que queremos publicar.

El repositorio puede contener, por ejemplo:

mi-sitio/
├── index.html
├── style.css
├── script.js
└── imagenes/

El repositorio será la fuente desde la que GitHub Pages obtendrá los archivos del sitio.

3.3. Sitio web estático

GitHub Pages está orientado principalmente a sitios web estáticos. Podemos utilizar tecnologías como:

• HTML
• CSS
• JavaScript
• Imágenes y otros archivos estáticos

Por ejemplo, podemos publicar un portfolio, una documentación, una página personal o un proyecto desarrollado durante nuestro aprendizaje.

Una diferencia importante respecto de un hosting tradicional es que GitHub Pages no está pensado para ejecutar código del servidor como PHP ni para utilizar directamente una base de datos del lado del servidor.

3.4. Un archivo index.html

Aunque la estructura puede variar según el proyecto, normalmente necesitaremos un archivo index.html que funcione como página principal del sitio.

Por ejemplo:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Mi sitio web</title>
</head>
<body>

    <h1>Mi primera web con GitHub Pages</h1>

</body>
</html>Lenguaje del código: HTML, XML (xml)

Una vez que tenemos estos elementos, podemos pasar a la configuración de GitHub Pages y seleccionar desde qué rama y carpeta queremos publicar nuestro sitio.

4. ¿Cómo publicar en GitHub Pages paso a paso?

Una vez que tenemos nuestro proyecto dentro de un repositorio de GitHub, podemos utilizar GitHub Pages para convertir esos archivos en una página web accesible desde Internet.

El proceso es sencillo y no necesitamos contratar un hosting. En este ejemplo vamos a suponer que tenemos una web formada por archivos HTML, CSS y JavaScript y que todos ellos se encuentran dentro de nuestro repositorio.

4.1. Prepara tu página web

Antes de configurar GitHub Pages, debemos asegurarnos de que nuestro proyecto esté correctamente subido al repositorio.

Por ejemplo, podríamos tener:

mi-sitio/
├── index.html
├── contacto.html
├── style.css
├── script.js
└── imagenes/

El archivo más importante en este ejemplo es:

index.html
Lenguaje del código: CSS (css)

Este será el documento que el navegador cargará como página principal cuando alguien acceda a la dirección de nuestro sitio.

Si estamos trabajando desde nuestro ordenador con Git, podemos subir los archivos al repositorio utilizando:

git add .
git commit -m "Publicar sitio web"
git push
Lenguaje del código: JavaScript (javascript)

Una vez realizado el push, debemos comprobar que los archivos aparecen correctamente dentro de GitHub.

4.2. Entra en tu repositorio

Ve a GitHub y abre el repositorio donde tienes almacenada tu página web.

Por ejemplo:

github.com/tu-usuario/mi-sitio

Dentro del repositorio deberías poder ver los archivos de tu proyecto:

index.html
contacto.html
style.css
script.js
README.md
Lenguaje del código: CSS (css)

En este punto todavía no tenemos una web pública. Los archivos simplemente están almacenados en nuestro repositorio.

Para publicarlos necesitamos configurar GitHub Pages.

4.3. Entra en Settings

Dentro del repositorio encontrarás en la parte superior la opción:

Settings

Haz clic sobre ella para acceder a la configuración del repositorio.

GitHub organiza diferentes opciones dentro de esta sección. Entre ellas se encuentra la configuración relacionada con GitHub Pages.

4.4. Entra en Pages

Dentro de Settings, busca en el menú lateral la opción:

Pages

Al entrar encontrarás una sección llamada:

Build and deployment

Dentro de ella aparecerá una opción denominada:

Source

Normalmente podremos seleccionar algo parecido a:

Source

[ Deploy from a branch ▼ ]
Lenguaje del código: JavaScript (javascript)

Selecciona:

Deploy from a branch
Lenguaje del código: JavaScript (javascript)

Esta opción permite que GitHub Pages publique directamente los archivos de una rama de nuestro repositorio.

Para una página sencilla creada con HTML, CSS y JavaScript, esta configuración es suficiente y no necesitamos utilizar GitHub Actions.

4.5. Selecciona la rama que quieres publicar

Después de seleccionar Deploy from a branch, aparecerán nuevas opciones para indicar desde qué rama y carpeta se debe publicar el sitio.

Por ejemplo:

Branch

main       /(root)       Save

En Branch, seleccionamos:

main

Y en la carpeta:

/(root)

La configuración quedaría:

Branch: main
Folder: /(root)
Lenguaje del código: HTTP (http)

Después hacemos clic en:

Save

Con esta configuración le estamos indicando a GitHub Pages que debe utilizar los archivos que se encuentran en la carpeta principal de la rama main.

Por ejemplo, si nuestro repositorio tiene:

main
│
├── index.html
├── style.css
└── script.js
Lenguaje del código: CSS (css)

GitHub Pages utilizará esos archivos para generar nuestro sitio.

4.6. GitHub comenzará a publicar el sitio

Después de pulsar Save, GitHub comenzará automáticamente el proceso de publicación.

Es posible que la página no esté disponible inmediatamente. La primera publicación puede tardar unos minutos.

En la sección Settings → Pages podremos comprobar el estado de la publicación.

Cuando el proceso haya terminado, GitHub mostrará un mensaje indicando que el sitio está publicado y proporcionará su dirección web.

También aparecerá una opción como:

Visit site

Al hacer clic podremos abrir nuestra página publicada.

4.7. ¿Cuál será la URL de nuestra página?

La dirección dependerá principalmente de nuestro nombre de usuario y del nombre del repositorio.

Por ejemplo, si nuestro usuario fuera:

manuel

y el repositorio:

mi-sitio

la dirección normalmente sería:

https://manuel.github.io/mi-sitio/
Lenguaje del código: JavaScript (javascript)

Al acceder a esa dirección, GitHub Pages buscará la página principal del proyecto y cargará:

index.html
Lenguaje del código: CSS (css)

Por lo tanto:

https://manuel.github.io/mi-sitio/
Lenguaje del código: JavaScript (javascript)

sería la dirección pública de nuestro sitio.

4.8. Comprobar que todo funciona correctamente

Después de publicar nuestra página, conviene comprobar que todos los recursos funcionan correctamente.

Debemos revisar especialmente:

• Que index.html se cargue correctamente.
• Que los estilos CSS se apliquen.
• Que los archivos JavaScript funcionen.
• Que las imágenes aparezcan.
• Que los enlaces internos funcionen.
• Que las rutas de los archivos sean correctas.

Por ejemplo, si tenemos:

mi-sitio/
├── index.html
├── style.css
└── imagenes/
    └── logo.png

Desde index.html deberíamos utilizar una ruta coherente con esa estructura:

<img src="imagenes/logo.png" alt="Logo">
Lenguaje del código: HTML, XML (xml)

Si una ruta funciona en nuestro ordenador pero no funciona después de publicar la página, debemos revisar cómo estamos utilizando las rutas de archivos.

4.9. Resumen del proceso

En definitiva, publicar una web con GitHub Pages consiste en:

1. Crear el repositorio
        ↓
2. Subir los archivos de la web
        ↓
3. Entrar en Settings
        ↓
4. Entrar en Pages
        ↓
5. Seleccionar "Deploy from a branch"
        ↓
6. Elegir main
        ↓
7. Elegir /(root)
        ↓
8. Pulsar Save
        ↓
9. Esperar la publicación
        ↓
10. Abrir la URL de la web
Lenguaje del código: JavaScript (javascript)

Una vez configurado, GitHub Pages se encarga de publicar los archivos del repositorio y mantener disponible el sitio, mientras nosotros podemos continuar utilizando Git para modificar y actualizar el proyecto.

5. Actualización de la página

Una de las ventajas de utilizar GitHub Pages es que podemos seguir modificando nuestra página web después de haberla publicado. No es necesario volver a configurar GitHub Pages cada vez que hacemos un cambio.

Por ejemplo, imaginemos que ya tenemos publicada nuestra página y decidimos modificar su diseño. Podemos cambiar los colores, el tamaño de los textos, agregar nuevas secciones, modificar el menú o incluso crear nuevas páginas.

5.1. ¿Qué sucede cuando modificamos el diseño?

Supongamos que tenemos un archivo:

style.css
Lenguaje del código: CSS (css)

y cambiamos el diseño de nuestra página:

body {
    font-family: Arial, sans-serif;
    background: #222;
}

h1 {
    font-size: 40px;
}
Lenguaje del código: CSS (css)

El cambio se realiza primero en nuestro ordenador. La página publicada en GitHub Pages no cambia automáticamente solamente porque hayamos modificado el archivo localmente.

Tenemos que guardar los cambios y enviarlos nuevamente al repositorio de GitHub.

Si utilizamos Git, podemos hacerlo con:

git add .
git commit -m "Actualizar diseño"
git push
Lenguaje del código: JavaScript (javascript)

El proceso sería:

Modificar el diseño
        ↓
Guardar los archivos
        ↓
git add
        ↓
git commit
        ↓
git push
        ↓
GitHub recibe los cambios
        ↓
GitHub Pages vuelve a publicar
        ↓
La web muestra el nuevo diseño

5.2. ¿Hay que volver a configurar GitHub Pages?

No.

Una vez que GitHub Pages ya está configurado para utilizar una determinada rama y carpeta, podemos realizar todos los cambios que necesitemos dentro de esa ubicación sin tener que repetir la configuración.

Por ejemplo, si configuramos:

Branch: main
Folder: /(root)
Lenguaje del código: HTTP (http)

y posteriormente modificamos:

index.html
style.css
script.js
Lenguaje del código: CSS (css)

solo tenemos que subir esos cambios al repositorio.

5.3. ¿Qué pasa con la URL?

La dirección de nuestra página no cambia por modificar el contenido o el diseño.

Por ejemplo, si nuestra web está publicada en:

https://tu-usuario.github.io/mi-sitio/
Lenguaje del código: JavaScript (javascript)

podemos modificar completamente el diseño y la URL seguirá siendo la misma.

Esto permite compartir una única dirección mientras el contenido del sitio va evolucionando.

5.4. ¿Cuánto tarda en aparecer el cambio?

Después de ejecutar git push, GitHub necesita procesar los cambios y volver a publicar el sitio. Normalmente el cambio aparece después de unos instantes, aunque en determinadas ocasiones puede tardar algunos minutos.

Si no vemos inmediatamente el nuevo diseño, podemos esperar un poco y volver a cargar la página.

También puede ser necesario hacer una recarga forzada del navegador si este está mostrando una versión anterior de algún archivo.

5.5. ¿Qué ocurre con los visitantes?

Los visitantes que entren posteriormente a la URL accederán a la versión actualizada que GitHub Pages haya publicado.

Por ejemplo, si primero teníamos:

Fondo blanco
Texto negro

y después modificamos style.css para utilizar:

Fondo oscuro
Texto claro

una vez publicados los cambios, la página mostrará el nuevo diseño.

Por lo tanto, podemos pensar en GitHub Pages como una conexión entre nuestro repositorio y nuestra web publicada:

Repositorio actualizado → GitHub Pages publica los cambios → Los visitantes ven la nueva versión.

6. ¿Se puede usar un dominio personalizado?

Sí. GitHub Pages permite utilizar un dominio personalizado en lugar de la dirección github.io que proporciona por defecto.

Sin embargo, hay algo importante que debemos tener en cuenta: GitHub Pages no es un registrador de dominios. Desde la opción Custom domain no podemos comprar ni registrar un dominio.

Primero debemos adquirir o registrar el dominio con un registrador de dominios y, posteriormente, conectarlo con nuestro sitio de GitHub Pages.

Por ejemplo, podemos registrar:

www.misitio.comLenguaje del código: CSS (css)

y después configurarlo para que muestre la página que tenemos publicada en GitHub Pages.

El proceso general sería:

Registrar el dominio
        ↓
Configurar los DNS
        ↓
Entrar en GitHub Pages
        ↓
Custom domain
        ↓
Introducir nuestro dominio
        ↓
GitHub verifica el dominio
        ↓
Nuestra web queda disponible con el dominio personalizado

6.1. Registrar un dominio personalizado

El primer paso es registrar el dominio que queremos utilizar mediante un registrador de dominios.

Por ejemplo, podríamos registrar:

misitio.comLenguaje del código: CSS (css)

Una vez registrado, tendremos acceso a un panel desde el que podremos administrar diferentes configuraciones del dominio, entre ellas sus registros DNS.

El dominio debe estar registrado antes de utilizar la opción Custom domain de GitHub Pages.

6.2. ¿Qué hace Custom domain en GitHub Pages?

La opción:

Settings → Pages → Custom domain

no sirve para comprar un dominio. Su función es indicarle a GitHub Pages qué dominio propio queremos asociar con nuestro sitio.

Por ejemplo, si ya hemos registrado:

misitio.comLenguaje del código: CSS (css)

podemos introducirlo en:

Custom domain
[ misitio.com ]Lenguaje del código: CSS (css)

GitHub nos permitirá posteriormente comprobar y configurar la conexión entre ese dominio y nuestro sitio.

6.3. Configurar los registros DNS

Después de registrar el dominio, debemos configurar sus registros DNS desde el proveedor donde administramos el dominio.

Estos registros permiten indicar que nuestro dominio debe dirigir a GitHub Pages.

La configuración concreta depende de si queremos utilizar el dominio raíz:

misitio.comLenguaje del código: CSS (css)

o un subdominio como:

www.misitio.comLenguaje del código: CSS (css)

Por eso, antes de realizar esta configuración, debemos tener acceso al panel DNS del dominio.

En términos sencillos, el proceso puede entenderse así:

misitio.com
     ↓
Registros DNS
     ↓
GitHub Pages
     ↓
Nuestra página webLenguaje del código: CSS (css)

6.4. ¿Qué sucede después de conectar el dominio?

Una vez que el dominio está correctamente configurado y GitHub Pages lo ha verificado, los visitantes podrán acceder a nuestra página utilizando nuestro propio dominio.

Por ejemplo, en lugar de:

https://tu-usuario.github.io/mi-sitio/Lenguaje del código: JavaScript (javascript)

podrán acceder mediante:

https://misitio.com/Lenguaje del código: JavaScript (javascript)

El sitio continúa estando publicado mediante GitHub Pages; simplemente estamos utilizando una dirección personalizada para acceder a él.

6.5. ¿Se mantiene GitHub Pages?

Sí. Utilizar un dominio personalizado no significa que dejemos de utilizar GitHub Pages.

GitHub continúa obteniendo los archivos del repositorio y publicando nuestra página. Podemos seguir modificando el proyecto y enviando los cambios mediante Git:

git add .
git commit -m "Actualizar sitio"
git pushLenguaje del código: JavaScript (javascript)

La web seguirá estando disponible mediante nuestro dominio personalizado.

6.6. ¿GitHub Pages proporciona HTTPS?

Sí. GitHub Pages proporciona soporte para HTTPS y, en el caso de los sitios publicados mediante el dominio github.io, HTTPS se habilita automáticamente.

Por ejemplo, si nuestro sitio está publicado en:

https://tu-usuario.github.io/mi-sitio/Lenguaje del código: JavaScript (javascript)

no necesitamos comprar un certificado SSL ni instalarlo manualmente. GitHub se encarga de proporcionar la conexión HTTPS.

6.6.1. ¿Qué ocurre con un dominio personalizado?

Si utilizamos un dominio propio, por ejemplo:

https://www.misitio.com/Lenguaje del código: JavaScript (javascript)

el proceso es ligeramente diferente.

Primero debemos:

1. Registrar el dominio.
2. Configurar correctamente sus registros DNS.
3. Agregar el dominio en Settings → Pages → Custom domain.
4. Esperar a que GitHub verifique la configuración y genere el certificado.

Cuando la configuración DNS es correcta, GitHub solicita automáticamente un certificado TLS para el dominio. Este proceso puede tardar un tiempo; en algunos casos, la opción para aplicar HTTPS puede tardar hasta 24 horas en estar disponible.

6.6.2. ¿Qué es Enforce HTTPS?

Dentro de:

Settings → Pages

podemos encontrar la opción:

Enforce HTTPS

Esta opción permite forzar que todas las solicitudes realizadas mediante HTTP sean redirigidas a HTTPS.

Por ejemplo:

http://www.misitio.com/
          ↓
https://www.misitio.com/Lenguaje del código: JavaScript (javascript)

GitHub se encarga del certificado TLS; nosotros no tenemos que instalarlo manualmente.

En un dominio personalizado, puede ser necesario esperar a que GitHub termine de generar el certificado antes de que aparezca disponible la opción Enforce HTTPS.

6.6.3. ¿Qué debemos recordar?

Podemos resumirlo de esta manera:

Dominio github.io
        ↓
HTTPS disponible automáticamente
        ↓
No necesitamos configurar un certificadoLenguaje del código: CSS (css)

En cambio, con un dominio personalizado:

Registrar dominio
        ↓
Configurar DNS
        ↓
Custom domain en GitHub
        ↓
GitHub verifica el dominio
        ↓
GitHub genera el certificado TLS
        ↓
HTTPS disponible
        ↓
Enforce HTTPS

Por lo tanto, no necesitamos comprar ni instalar nuestro propio certificado SSL para utilizar HTTPS en GitHub Pages. GitHub gestiona el certificado, siempre que el dominio personalizado esté correctamente configurado.

6.7. En resumen

Debemos diferenciar dos procesos:

Registrar el dominio:

Registrador de dominios
        ↓
Comprar/registrar misitio.com

Conectar el dominio con GitHub Pages:

GitHub Pages
        ↓
Custom domain
        ↓
Configurar DNS
        ↓
misitio.com → Nuestra webLenguaje del código: CSS (css)

Por lo tanto, primero necesitamos tener un dominio registrado y después podemos utilizar Custom domain para conectarlo con nuestra página de GitHub Pages.

7. Ventajas y limitaciones de GitHub Pages

GitHub Pages es una herramienta muy útil para publicar sitios web directamente desde un repositorio de GitHub. Sin embargo, como cualquier servicio, tiene ventajas y limitaciones que debemos conocer antes de utilizarlo.

7.1. Ventajas de GitHub Pages

7.1.1. Es gratuito

Una de sus principales ventajas es que permite publicar sitios web sin necesidad de contratar un hosting tradicional para proyectos compatibles con GitHub Pages.

Esto resulta especialmente interesante para quienes están aprendiendo desarrollo web y quieren publicar sus primeros proyectos en Internet.

7.1.2. Se integra con Git y GitHub

GitHub Pages está directamente relacionado con nuestro repositorio. Podemos desarrollar nuestra página, guardar los cambios con Git y enviarlos a GitHub mediante:

git add .
git commit -m "Actualizar sitio"
git pushLenguaje del código: JavaScript (javascript)

Después de que los cambios sean publicados, GitHub Pages puede actualizar nuestra web.

Esto nos permite utilizar el mismo flujo de trabajo para desarrollar, versionar y publicar el proyecto.

7.1.3. No necesitamos administrar un servidor

No tenemos que instalar ni mantener un servidor web tradicional. GitHub se encarga de la infraestructura necesaria para servir los archivos publicados.

Para un sitio estático, esto simplifica considerablemente el proceso de publicación.

7.1.4. Proporciona HTTPS

Los sitios de GitHub Pages pueden utilizar HTTPS, lo que permite acceder a ellos mediante una conexión cifrada.

Por ejemplo:

https://tu-usuario.github.io/mi-sitio/Lenguaje del código: JavaScript (javascript)

Además, podemos utilizar un dominio personalizado y configurarlo para trabajar con HTTPS.

7.1.5. Permite utilizar un dominio personalizado

Si tenemos un dominio propio, podemos conectarlo con GitHub Pages.

Por ejemplo:

https://www.misitio.com/Lenguaje del código: JavaScript (javascript)

De esta manera, no estamos obligados a utilizar únicamente la dirección github.io.

7.1.6. Es práctico para proyectos y portfolios

GitHub Pages resulta especialmente apropiado para publicar:

• Portfolios personales.
• Proyectos de aprendizaje.
• Documentación.
• Landing pages.
• Sitios personales.
• Documentación de proyectos Open Source.
• Proyectos realizados con HTML, CSS y JavaScript.

7.2. Limitaciones de GitHub Pages

Aunque GitHub Pages es muy útil, no está pensado para cualquier tipo de aplicación web.

7.2.1. Está orientado principalmente a sitios estáticos

GitHub Pages está diseñado principalmente para servir archivos estáticos.

Podemos utilizar:

HTML
CSS
JavaScript
Imágenes
Fuentes
Otros archivos estáticos

Pero no debemos confundirlo con un servidor capaz de ejecutar cualquier lenguaje en el backend.

7.2.2. No ejecuta PHP, Python o Node.js en el servidor

GitHub Pages no funciona como un hosting tradicional donde podemos ejecutar código del lado del servidor.

Por ejemplo, no podemos colocar un archivo:

login.phpLenguaje del código: CSS (css)

esperando que GitHub Pages lo ejecute como PHP.

Lo mismo ocurre con aplicaciones que necesitan ejecutar código de servidor mediante Node.js, Python u otras tecnologías backend.

7.2.3. No proporciona una base de datos del servidor

GitHub Pages tampoco proporciona una base de datos para nuestra aplicación.

Por lo tanto, no es la opción adecuada para una aplicación que necesite almacenar y procesar información mediante un backend tradicional.

Por ejemplo, una aplicación que necesite:

Usuario
   ↓
Formulario
   ↓
Servidor
   ↓
Base de datos

necesitará otros servicios para gestionar esa parte del sistema.

7.2.4. No sustituye a un hosting para cualquier proyecto

GitHub Pages puede ser suficiente para una página estática, pero un proyecto más complejo puede necesitar servicios adicionales.

Por ejemplo, una aplicación con:

• Autenticación de usuarios.
• Procesamiento en el servidor.
• Base de datos.
• APIs propias.
• Procesos backend.
• Ejecución de código del lado del servidor.

necesitará una arquitectura diferente o servicios adicionales.

7.3. ¿Cuándo conviene utilizar GitHub Pages?

GitHub Pages es especialmente interesante cuando nuestro proyecto consiste principalmente en archivos estáticos y queremos aprovechar la integración con GitHub.

Por ejemplo:

HTML + CSS + JavaScript
             ↓
       Repositorio GitHub
             ↓
        GitHub Pages
             ↓
       Web publicada

Para aprender desarrollo web, publicar un portfolio o mostrar proyectos realizados con HTML, CSS y JavaScript, puede ser una solución sencilla porque combina repositorio, control de versiones y publicación web dentro del mismo flujo de trabajo.

En cambio, cuando el proyecto necesita un backend, una base de datos o procesamiento del lado del servidor, debemos considerar otras soluciones que proporcionen esas capacidades.

8. ¿La web aparece en Google?

Sí, una web publicada con GitHub Pages puede aparecer en Google y otros buscadores, pero publicar el sitio no garantiza que aparezca inmediatamente en los resultados de búsqueda.

Cuando publicamos una página con GitHub Pages, esta queda disponible públicamente mediante una URL, por ejemplo:

https://usuario.github.io/mi-sitio/Lenguaje del código: JavaScript (javascript)

Esto significa que cualquier persona puede acceder a ella desde un navegador. Sin embargo, Google necesita descubrir, rastrear e indexar la página antes de mostrarla como resultado de búsqueda.

8.1. Publicar una web no es lo mismo que indexarla

Es importante diferenciar estos dos conceptos:

• Publicar: GitHub Pages hace que nuestra web esté disponible en Internet.
• Indexar: Google analiza la página y decide incorporarla a su índice para poder mostrarla en sus resultados.

Por ejemplo, podemos publicar:

https://usuario.github.io/mi-sitio/Lenguaje del código: JavaScript (javascript)

y comprobar que la página funciona correctamente desde Chrome, Firefox o cualquier otro navegador. Pero eso no significa que al buscar inmediatamente el nombre del sitio en Google vaya a aparecer.

8.2. ¿Cómo hacer que Google encuentre la web?

Una vez publicada, podemos facilitar el trabajo de los buscadores siguiendo algunas buenas prácticas:

1. Utilizar títulos y contenidos descriptivos.
2. Crear correctamente las etiquetas <title> y <meta name="description">.
3. Utilizar encabezados HTML como <h1>, <h2> y <h3> de forma ordenada.
4. Crear enlaces internos entre las diferentes páginas del sitio.
5. Comprobar que las páginas sean accesibles públicamente.
6. Crear un sitemap.xml cuando el sitio tenga varias páginas.
7. Utilizar Google Search Console para comprobar cómo Google descubre y rastrea el sitio.

Por ejemplo, una página sencilla puede tener:

<head>
    <title>Curso de JavaScript</title>
    <meta name="description" content="Aprende JavaScript desde cero con ejemplos prácticos.">
</head>Lenguaje del código: HTML, XML (xml)

Estos elementos ayudan a los buscadores a comprender de qué trata la página.

8.3. ¿Cuánto tarda en aparecer en Google?

No existe un tiempo fijo. Una página nueva puede tardar desde un período relativamente corto hasta más tiempo en ser descubierta e indexada.

Además, estar indexada no significa necesariamente aparecer entre los primeros resultados. La posición que ocupa una página depende de numerosos factores relacionados con el contenido, la búsqueda realizada, la competencia y otros aspectos del posicionamiento.

Por eso, si acabamos de publicar nuestra web en GitHub Pages y todavía no aparece en Google, no significa que GitHub Pages esté funcionando mal.

8.4. ¿GitHub Pages ayuda al SEO?

GitHub Pages permite publicar una web accesible mediante HTTPS y con un dominio propio si configuramos un dominio personalizado. Esto proporciona una base técnica válida para que una web pueda ser rastreada por los buscadores.

Sin embargo, GitHub Pages por sí mismo no posiciona una página en Google. El posicionamiento depende principalmente del contenido, la estructura del sitio, la experiencia del usuario y otros factores SEO.

En resumen:

GitHub Pages
      ↓
Publica la web en Internet
      ↓
Google descubre y rastrea la web
      ↓
Google puede indexarla
      ↓
La página puede aparecer en los resultados

Por lo tanto, sí podemos tener una web publicada con GitHub Pages que aparezca en Google, pero debemos distinguir entre tener una URL pública, conseguir que Google la indexe y lograr que tenga visibilidad en los resultados de búsqueda.