Cómo publicar un sitio web gratis con GitHub Pages (Introducción a sitios estáticos)

En esta serie de introducción a Git/GitHub, hemos aprendido todo el flujo, desde la creación de una cuenta y las operaciones básicas de comandos, hasta el flujo fundamental del desarrollo en equipo usando ramas.

Para concluir la serie, en esta ocasión presentaremos una increíble función llamada GitHub Pages, que te permite publicar el proyecto que gestionas en GitHub como un sitio web gratuito para todo el mundo. Es el método ideal para publicar sitios de portafolio, páginas de demostración de aplicaciones web que hayas creado, etc. ¡Domina este último paso y muestra tus creaciones al mundo!

¿Qué es GitHub Pages? ¿Qué tiene de especial?

GitHub Pages es un servicio de alojamiento de sitios estáticos que ofrece GitHub. Un sitio estático es un sitio web compuesto únicamente por archivos que no requieren procesamiento del lado del servidor, como HTML, CSS y JavaScript. Aunque no permite la integración con PHP o bases de datos, es más que suficiente y potente para muchos usos, como portafolios, blogs y sitios de documentación de proyectos.

Las principales ventajas de GitHub Pages son las siguientes:

• Completamente gratis: Si el repositorio es público, no hay ningún coste de alojamiento.
• Configuración increíblemente fácil: Puedes publicar tu sitio con solo unos pocos clics desde la pantalla de configuración del repositorio.
• También se pueden usar dominios personalizados: Se te proporciona un dominio `github.io` de forma gratuita, pero también puedes configurar tu propio dominio personalizado.
• Integración fluida con Git: Simplemente haciendo `git push` de tus cambios locales, el contenido se refleja automáticamente en el sitio web publicado.

¡Dos tipos de publicación! Sitios de usuario y sitios de proyecto

GitHub Pages ofrece dos tipos de métodos de publicación según el uso que se le quiera dar.

1. Sitio de usuario (o de organización)
   • URL: `tu-nombre-de-usuario.github.io`
   • Características: Solo se puede crear uno por cuenta. El nombre del repositorio debe ser obligatoriamente "`nombre-de-usuario.github.io`". Es ideal para usarlo como página principal de un portafolio personal o un blog.
2. Sitio de proyecto
   • URL: `tu-nombre-de-usuario.github.io/nombre-del-repositorio/`
   • Características: Se puede crear uno por cada repositorio normal. No hay límite en el número que se puede crear. Es adecuado para usarlo como página de demostración para proyectos individuales o como sitio de documentación.

En esta ocasión, explicaremos cómo publicar un "sitio de proyecto", que puedes probar fácilmente con cualquier repositorio.

¡En la práctica! Pasos para publicar un sitio de proyecto

Vamos a probar a publicar como sitio web el repositorio `my-first-repo` que creamos en los artículos anteriores.

Paso 1: Ve a la "Configuración" del repositorio que quieres publicar

Primero, abre la página del repositorio que quieres publicar en GitHub y haz clic en la pestaña "Settings".

[Imagen: La pestaña "Settings" resaltada en la lista de pestañas del repositorio de GitHub.]

Paso 2: En la sección "Pages", selecciona la fuente de publicación

En el menú de la izquierda de la página de Configuración, haz clic en "Pages". Presta atención a la configuración de "Source" en la sección "Build and deployment".

[Imagen: "Deploy from a branch" seleccionado como fuente para GitHub Pages.]

Confirma que "Deploy from a branch" esté seleccionado. Este es el método más básico, que significa "publicar el sitio a partir de una rama específica".

Paso 3: Selecciona la rama a publicar y guarda

En la sección "Branch", configura qué rama quieres publicar. Como queremos publicar el código de la rama `main`, la configuraremos de la siguiente manera:

• Branch: Selecciona `main`
• Folder: Selecciona `/(root)`

Una vez configurado, haz clic en el botón "Save".

[Imagen: `main` seleccionado como rama, `/(root)` como carpeta, y el botón "Save" siendo pulsado.]

Paso 4: Comprueba la URL publicada

Al pulsar el botón Save, la página se recargará y en la parte superior aparecerá un banner verde que dice "Your site is live at ...". Puede que tarde 1 o 2 minutos hasta que el sitio esté disponible en internet.

[Imagen: El banner verde "Your site is live at..." que se muestra en la parte superior de la configuración de GitHub Pages.]

Prueba a hacer clic en la URL que aparece. Si se muestra la página "Hello, World!" que creaste anteriormente como un sitio web accesible para cualquiera en internet, ¡lo has conseguido!

Cómo actualizar el sitio

Lo bueno de GitHub Pages es que la actualización es muy sencilla. Simplemente modifica los archivos en tu local y haz push de esos cambios a la rama que has configurado para la publicación (en este caso, `main`), y en unos minutos el contenido se reflejará automáticamente en el sitio publicado.

Vamos a probarlo. Modifica el contenido de tu `index.html` local.

echo "<h1>¡Mi sitio web está actualizado!</h1>" > index.html

Haz `add` y `commit` del cambio.

git add index.html
git commit -m "Actualizar index.html para GitHub Pages"

Finalmente, haz `push` del cambio.

git push origin main

Una vez completado el push, espera 1 o 2 minutos y luego recarga la URL del sitio que publicaste antes. El contenido de la página debería haberse actualizado.

Conclusión: ¡Muestra tus creaciones al mundo con GitHub!

En esta serie de introducción a GitHub, has experimentado todo el flujo, desde la creación de una cuenta, las operaciones básicas de Git y el flujo de desarrollo en equipo, hasta finalmente publicar tu propio sitio web. Este es un gran paso adelante como creador web.

Los conocimientos que has adquirido aquí te servirán como una base sólida para tus futuras actividades de desarrollo. Te animamos a que publiques tu propio portafolio o nuevos proyectos con GitHub Pages y los muestres a gente de todo el mundo. ¡Esperamos que tu vida como desarrollador sea más cómoda y creativa!