Cómo crear un portafolio de tus proyectos en Github Pages

En el arte de la programación todos necesitamos una galería.

Imaginemos esto, estas aprendiendo a programar, contruyes tus propios proyectos, algunos los terminas, la mayoría no. En el proceso terminas con mas de veinte repositorios entre locales y remotos nadando por alli.

De repente, recibes una llamada para una entrevista en un empleo como desarrollador web. La adrenalina sube, te pones ansioso, quieres demostrar a estas personas tus habilidades y lo increíbles que son tus proyectos.

¿El problema? no tienes idea de como mostrar tu trabajo.

Debiste planear esto antes. ¿Ya lo habías pensado verdad? Necesitas un portafolio web.

Github Pages

Segun la documentación Github Pages es un servicio que te permite publicar contenido web de una manera fácil y sencilla. Básicamente, solo debes de subir tus archivos estáticos a un repositorio especial de github.io y listo. Todo funciona.

Hoy vas a aprender como publicar un portafolio web de tres simples archivos: portfolio.html, portfolio.css y portfolio.js.

Si, no te compliques la vida, todavía.

Creando el repositorio

1. Ingresa a tu cuenta de Github, luego puedes crear un nuevo repositorio desde github.com/new o presionando el botón New.
   

2. En el nombre del repositorio debes ingresar user.github.io reemplaza user por tu nombre de usuario. Configúralo como público.
   

Subiendo archivos

Navega hasta la carpeta donde guardas los archivos estáticos de tu proyecto.

Opción 1 ("low code")

1. En github.com dentro de tu repositorio nuevo, presiona el botón Upload Files y arrastra el contenido de tu carpeta local hasta el area indicada.
2. Deja un mensaje para tu commit y haz click en Commit Changes.

Opción 2 ("the dev way")

1. En la carpeta de tu proyecto abre una terminal.
   Si nunca has utilizado git en tu máquina o no sabes que es una llave SSH. Puedes hacer esto con la Opción 1.

2. En la terminal ingresa el comando git init. Esto iniciará un git dentro de la carpeta de tu proyecto.

3. En github.com dentro de tu repositorio, presiona el botón Clone or Download. Luego, copia la URL.
   

4. En la terminal de tu proyecto ingresa git remote add origin url. Reemplaza la url con la que copiaste de tu repositorio.

5. En la terminal verifica que el origin este listado con el comando: git remote -v. Deberias ver listada la url que copiaste.

6. Haz un commit de los archivos de tu proyecto agregándolos todos con git add . Luego ingresa el comando git commit -m "mi primer commit".

7. Haz un push al repositorio remoto: git push -u origin master.

Listo! Espera unos cinco minutos y deberías poder navegar a la url user.github.io reemplazando user por tu nombre de usuario y ver tu proyecto publicado.

Puedes tratar este repositorio como el homepage de tu portafolio y poner enlaces a otros proyectos.

Pero, ¿Cómo agregas más proyectos a tu portafolio?

Agregando Proyectos

Archivos Estáticos

Si tienes proyectos frontend básicos hechos con un conjunto de archivos html, css y js enlazados entre si. Puedes crear un repositorio nuevo siguiendo los pasos de la opción 2 de la sección anterior, luego:

1. Una vez tus archivos esten en github, ve a la pestaña de Settings dentro de tu repositorio.

2. Baja hasta la sección GitHub Pages y activa la opción Source y selecciona master branch.
   

3. Automáticamente se creara un nuevo proyecto en la dirección user.github.io/nombre-del-repositorio. Puedes utilizar estos enlaces en tu portafolio para mostrar tus mejores proyectos.

Websites con React

Supongamos que tienes un proyecto hecho con React en el cual has estado trabajando largo tiempo, incluso con un repositorio remoto en GitHub y varias ramas (todo un pro).

1. Agrega el paquete de node gh-pages con npm i -D gh-pages. Este comando instalara el paquete en las dependencias de desarrollo.
2. Edita el archivo package.json agregando dos scripts "deploy": "gh-pages -d build" y "predeploy": "npm run build"
3. Agrega la propiedad "homepage":"http://user.github.io/nombre-del-repositorio. Reemplazando user por tu usuario de GitHub y el nombre del repositorio remoto del proyecto.

{
    "homepage": "http://user.github.io/nombre-del-repositorio",
    ...
    "scripts": {
        "deploy": "gh-pages -d build",
        "predeploy": "npm run build"
    }
}

1. Agrega los ultimos cambios haciendo commit y push del proyecto.
2. Corre el comando npm run deploy para hacer el despliegue del proyecto y publicarlo en la hompage especificada.

Listo! En cinco minutos deberías de poder navegar a la url de homepage y ver tu proyecto de React desplegado!

Conclusión

A partir de aquí puedes agregar mas proyectos de frontend a tu portafolio desplegándolos en Github Pages y agregando los enlaces donde sea que los quieras mostrar.

De esta manera siempre estarás preparado para demostrar a los reclutadores no solamente el código sino también el resultado final de tus magníficas creaciones.