GitHub Pages es una herramienta gratuita de GitHub que permite alojar sitios web estáticos directamente desde un repositorio. En pocas palabras, es una manera sencilla de poner en línea tu sitio sin necesidad de servidores, configuraciones complicadas o costos. Es especialmente útil para quienes quieren mostrar su portafolio, crear una página personal o publicar documentación de un proyecto.

¿Qué es una página web estática?

Una página estática es aquella que se compone de archivos HTML, CSS y JavaScript que se envían directamente al navegador, sin procesamiento en el servidor. Esto significa que no cambia de contenido en función del usuario o de la interacción. Es simple, rápida y funciona perfecto para contenido que no necesita una base de datos ni otras funcionalidades avanzadas.

Requisitos previos

Para desplegar tu sitio en GitHub Pages, necesitarás:

• Tener una cuenta en GitHub.
• Tener tu página web estática lista con los archivos HTML, CSS y, si deseas, JavaScript.

En este artículo, vamos a ver paso a paso cómo crear un repositorio en GitHub, subir tus archivos y activar GitHub Pages para que tu sitio esté en línea rápidamente.

Paso 1: Crear un Repositorio en GitHub

Para comenzar, necesitamos un repositorio en GitHub donde alojaremos los archivos de nuestro sitio web. Te explico paso a paso cómo crearlo y subir el proyecto desde nuestro local.

• Ingresa a tu cuenta de GitHub y dirígete a la página principal.
• En la esquina superior derecha, haz clic en el botón "+" y selecciona "New repository".
• Asigna un nombre a tu repositorio (por ejemplo, calculadora).

Configuración del Repositorio

En esta captura de pantalla se observa el proceso de creación de un nuevo repositorio en GitHub:

• Repository name: El nombre del repositorio, en este caso calculadora, que será la identificación del proyecto en GitHub.
• Description: Una breve descripción opcional para explicar la funcionalidad o propósito del proyecto, en este caso, calculadora básica.
• Public: Indica que el repositorio será público, permitiendo que cualquier usuario de internet pueda verlo. También puede ser privado según las necesidades del usuario, limitando el acceso solo a los colaboradores.
• Add a README file: Opción para incluir un archivo README. Aunque es opcional, se recomienda agregarlo para describir el proyecto en detalle y proporcionar información importante sobre el uso del repositorio.

Haz clic en "Create repository" para finalizar.

¡Listo! Ahora tienes un repositorio vacío en GitHub donde subirás tu sitio web.

Paso siguiente en la Consola

Luego, GitHub te mostrará una ventana con los pasos a seguir en la consola.

Después de crear el repositorio en GitHub, se proporciona un enlace (subrayado en rojo) que corresponde a la URL del repositorio recién creado. Esta URL será utilizada para vincular el repositorio local al remoto. Además, GitHub muestra los pasos detallados (subrayados en verde) para inicializar un repositorio desde la línea de comandos. Estos pasos incluyen los comandos necesarios para configurar el repositorio local, añadir archivos, y hacer el primer push hacia GitHub.

Paso 2: Subir los Archivos al Repositorio

Existen varias maneras de subir tus archivos, pero aquí te explicamos cómo hacerlo directamente desde tu computadora usando la línea de comandos. Este método es útil si ya tienes el proyecto en tu computadora y quieres vincularlo a GitHub.

En esta imagen, se muestran los comandos necesarios para inicializar un repositorio local de Git, añadir archivos y subirlos a un repositorio en GitHub.

• git init: Inicializa un repositorio de Git en el directorio actual.
• git add y git commit -m "first commit": Añaden todos los archivos al área de preparación y crean un commit con el mensaje "first commit".
• git branch -M main: Cambia la rama principal a "main".
• git remote add origin <URL>: Vincula el repositorio local al repositorio remoto en GitHub usando la URL proporcionada.
• git push -u origin main: Envía el commit a la rama "main" en GitHub, estableciendo el seguimiento remoto.

El recuadro final indica que los archivos han sido subidos exitosamente al repositorio en GitHub.

Paso 3: Configurar GitHub Pages en el Repositorio

Ahora que tus archivos están en GitHub, vamos a activar GitHub Pages para que tu sitio esté disponible en línea.

Acceder a la Configuración de GitHub Pages

1. Dentro de tu repositorio en GitHub, haz clic en Settings (Configuración), en la parte superior del repositorio.

Desplázate hasta la sección Pages (Páginas). Aquí es donde configuraremos GitHub Pages para que aloje el sitio.

Seleccionar la Rama main para Publicar el Sitio

1. En la sección Source (Origen), selecciona la rama main.
2. Haz clic en Save (Guardar) para aplicar la configuración.

Obtener la URL Pública del Sitio

Una vez guardada la configuración, GitHub generará una URL para tu sitio web.

Nota: GitHub puede tardar unos minutos en activar la URL. Una vez activada, podrás acceder a ella desde cualquier navegador para ver tu sitio en línea.

Conclusión

En este artículo, hemos repasado el proceso para desplegar una página web estática en GitHub Pages paso a paso. Comenzamos creando un repositorio en GitHub, vinculamos el proyecto local al repositorio remoto y subimos los archivos del sitio. Luego, configuramos GitHub Pages para que el sitio esté disponible en línea y verificamos que todo funcionara correctamente.

GitHub Pages es una alternativa práctica para alojar sitios web estáticos de forma sencilla y sin costo. Te invitamos a probar este método si tienes un proyecto que quieras compartir en la web, ya sea un portafolio, una página informativa o cualquier otro tipo de contenido estático.