Desplegar proyectos en GitHub Pages

Github Pages nos permite generar sitios web estáticos o serverless de proyectos a partir de nuestros repositorios publicados en Github de forma fácil y gratuita.

Para empezar es necesario tener una cuenta de usuario en la plataforma de Github y tener instalado Git en nuestra máquina.

Crear repositorio

Para el ejemplo crearemos un nuevo repositorio desde github.com/new.

Podemos hacer un clonado del proyecto  o irnos a nuestro editor de código, crear un directorio, añadir contenido y subir los cambios al nuevo repositorio. Vamos a hacer lo segundo.

Creamos un nuevo directorio para nuestro proyecto y accedemos al mismo.

Incluir contenido al proyecto

> mkdir desplegar-en-githubpages
> cd desplegar-en-githubpages

Para el ejemplo crearemos un archivo index.html desde nuestro editor de código en el cual incluiremos una estructura de html5 básica rápidamente mediante Emmet.

Obtenemos la siguiente estructura a la que añadiremos un mensaje de Hola Mundo que se pintará por pantalla.

Volvemos al terminal e inicializamos git.

> git init

Incluimos nuestros cambios por primera vez.

> git add index.html
> git commit -m "First Commit"
> git branch -M main
> git remote add origin https://github.com/[usuario]^*/[repositorio].git
> git push -u origin main

Habilitar GitHub Pages y desplegar proyecto

Volvemos a la página de GitHub y accedemos a la sección Pages de los Settings del repositorio. Seleccionamos una rama para habilitar GitHub Pages.

En la barra lateral de nuestro repositorio ahora podemos ver la sección de Enviroments y github-pages desplegando.

Si hacemos clic sobre la opción del entorno de GitHub Pages accedemos al historial desde donde podemos verificar si el despliegue se ha realizado y ver el proyecto desplegado en [usuario].github.io/[repositorio]