Cómo crear un portafolio de tus proyectos en Github Pages
Tags: github, portfolio, beginners, spanish
Published: 2020-01-27 04:42:50

---
title: Cómo crear un portafolio de tus proyectos en Github Pages
published: true
description: Muéstrale al mundo tus proyectos, crea tu portafolio web. Todo completamente gratis con Github Pages.
tags: github, portfolio, beginner, spanish
cover_image: https://i.imgur.com/nUWb8Im.jpg
---
>*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](https://pages.github.com/) 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.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/5sw3z47df77scjn1vsm7.png)

## Creando el repositorio
1. Ingresa a tu cuenta de Github, luego puedes crear un nuevo repositorio desde [github.com/new](https://github.com/new) o presionando el botón *New*.
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/fuuyt9pehsxxcidl9h46.png)

2. En el nombre del repositorio debes ingresar `user.github.io` reemplaza `user` por tu nombre de usuario. Configúralo como público.
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/i6rkfg40rzyzffgmua5u.png)

## 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`.
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/m8mziph0gbquidy6b8v7.png)

#### 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.
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/fbl24drwzu0cg3142tl7.png)
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`.
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/b9gxqx1he1tvp7znkbbm.png)

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"
    }
}
```
4. Agrega los ultimos cambios haciendo *commit* y *push* del proyecto.
5. 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.