Paso a paso para empezar con GitHub y publicar páginas en Vercel
Tags: github, vercel, ssh, website
Published: 2020-09-04 02:12:54


**1.** Abrimos una cuenta en [**GitHub**](https://github.com/)

**2.** En GitHub, vamos al ícono de nuestro perfil y abrimos la configuración: [https://github.com/settings/profile](https://github.com/settings/profile)
 
**3.** Hacemos clic en **SSH and GPG keys**: 
![SSH and GPG keys step](https://dev-to-uploads.s3.amazonaws.com/i/p1ny2gaehmxldapbv5xb.png)

**4.** Dejamos eso por un momento y descargamos **Git** desde [acá](https://git-scm.com/downloads). Eso nos va a permitir tener la consola de Git en nuestro equipo.

**5.** [Acá](https://www.stanleyulili.com/git/how-to-install-git-bash-on-windows/) buen recurso para leer sobre la instalación de Git.
También podemos hacer clic en **Next** en todas las ventanas y usar la instalación predeterminada. Lo importante en este caso es que esté seleccionado **Git Bash** en los componentes que queremos que se instalen:

![Git Bash - instalación](https://dev-to-uploads.s3.amazonaws.com/i/krau2d7gwd5v0t136nxo.png)

**6.** Ahora, nos paramos sobre cualquier carpeta del explorador de carpetas de Windows y hacemos clic con el botón derecho, para que se abra el menú contextual:

![Git Bash en menú contextual](https://dev-to-uploads.s3.amazonaws.com/i/lsiq03slfyr1nzki1qwy.png)

**7.** Elegimos *Git Bash Here* para que se abra la consola. Ahí buscamos si ya tenemos creada una llave SSH. Para eso, escribimos un comando al lado del símbolo $ que aparece en la consola. Ponemos ls -al ~/.ssh y vemos si aparece algún resultado tal como los siguientes:

![Claves SSH](https://dev-to-uploads.s3.amazonaws.com/i/sbizwxp2ej49fpvrdhe0.png)

**8.** Si no tenemos ninguna de esas, tenemos que creearla. Para eso, en la misma consola, escribimos este comando: **ssh-keygen -t rsa -b 4096 -C “tu_direccion_de_correo@gmail.com”** (lo que va entre comillas es la dirección que hayan usado para crear su cuenta de GitHub en el punto 1 de esta guía.

**9.** Esperamos que se ejecute todo el proceso y, cuando aparezca la pregunta  **"Enter a file in which to save the key"** presionamos *Enter* en el teclado para que se guarde en el lugar predeterminado. Cuando aparece **PASSPHRASE** o **NAME**, solo presionamos *Enter* para no tener que recordar después una clave asociada. O sea, ejecutamos todo el proceso predeterminado hasta que finaliza.

**10.** Va a aparecer un bloque largo de texto en la consola que empieza con **ssh-rsa** y termina con la dirección de correo electrónico que le hayan pasado. Esa es nuestra **clave SSH** que vamos a usar para GitHub.

**11.** Volvemos a [GitHub](https://github.com/) a la página que habíamos dejado abierta: [https://github.com/settings/keys](https://github.com/settings/keys) (pasos 1, 2 y 3 de esta guía).

**12.** Hacemos clic en:

![nueva clave SSH](https://dev-to-uploads.s3.amazonaws.com/i/y4u7p8guf8yi3czyywnr.png)

**13.** Ahí pegamos el contenido de nuestra llave SSH (el texto largo que está en nuestra consola). [Este es un buen artículo](https://medium.com/@ancizj393/crear-una-clave-ssh-en-git-y-vincular-en-tu-cuenta-de-github-e7a6b22bc93f) para leer sobre este tema por si tienen dudas en algún paso. 

**14.** Una vez vinculado el equipo con GitHub, podemos crear repositorios en GitHub y subir archivos. Para crear un repositorio: hacemos clic en el ícono de GitHub en la esquina superior izquierda de la página:

![ícono de GitHub](https://dev-to-uploads.s3.amazonaws.com/i/qocikdpzvhry5y5uvfx0.png)

**15.** Hacemos clic en **New** y creamos un repositorio nuevo:

![repositorio nuevo](https://dev-to-uploads.s3.amazonaws.com/i/wo0exttvbqbpa55nnjm3.png)
![nombre del repositorio nuevo](https://dev-to-uploads.s3.amazonaws.com/i/7ayfxl6ez8weni943zzx.png)

**16.** Bajamos por esa página y hacemos clic en:

![crear repositorio](https://dev-to-uploads.s3.amazonaws.com/i/pkdwc9w0zgn19gbpq0lm.png)

**17.** Dejamos eso unos minutos y vamos a nuestra carpeta donde tenemos los archivos de nuestro sitio web, página o lo que queramos subir a GitHub. Abrimos esa carpeta, hacemos clic con el botón derecho y elegimos **Git Bash Here**.

![menú contextual con Git Bash Here](https://dev-to-uploads.s3.amazonaws.com/i/hfgc48b4r92su84xn3qt.png)

**18.** Se abre la consola de **Git Bash**. Prestemos atención a que la ruta que nos muestra sea exactamente donde están los archivos que nos interesan: En este caso, muestra toda la ruta y termina en **…/clase7** que es donde están los archivos index y styles que se ven en la imagen. En la consola, junto al símbolo **$**, escribimos **git init**. Ese es el comando de Git que vamos a escribir cada vez que iniciemos un repositorio. Apretamos *Enter*.

**19.** Dejamos que se ejecute el proceso y, cuando aparece otra vez el signo **$** contra el margen izquierdo, escribimos **git add .** (así, tal cual git espacio add espacio punto). Ese comando agrega los archivos a la memoria del repositorio.
 
**20.** Junto al signo **$**, escribimos **git commit -m “mensaje”** (así, tal cual, git espacio commit espacio guion del medio y m, sin espacio entre el guion y la m espacio comillas mensaje comillas). El mensaje entre comillas es nuestro, podemos poner lo que se nos ocurra. Eso agrega un mensaje a nuestro repositorio y es obligatorio agregarlo. *Enter*.

**21.** Volvemos a nuestra cuenta de GitHub, después de haber creado el repositorio. Aparece una página con un montón de sugerencias, nos interesa esto:

![comandos para subir archivos a Git](https://dev-to-uploads.s3.amazonaws.com/i/s70lhrr8jvlm6ddp8vbc.png)

**22.** Copiamos toda la primera línea,, que dice **git remote add origin...** y la pegamos en nuestra consola junto al símbolo **$**. No funciona el atajo C+V en la consola, así que hay que usar botón derecho y *Paste* (Pegar). *Enter*.

**23.** Cuando termina el proceso, copiamos la tercera línea (**git push –u origin master**) y la pegamos en nuestra consola. No funciona el atajo C+V en la consola, así que hay que usar botón derecho y *Paste* (Pegar). *Enter*.

**24.** Esto sube nuestro código desde nuestra PC a nuestro repositorio de GitHub. Si vamos a **Code** en la página de GitHub, vamos a ver nuestro código subido ahí:

![código en GitHub](https://dev-to-uploads.s3.amazonaws.com/i/f9hc0wxxjpi7vop0zb2b.png)

**25.** Ahora, vamos a [Vercel](https://vercel.com/import/git).

**26.** Si no tenemos cuenta en Vercel, creamos una.

**27.** Aparece un cuadro donde agregar la URL de nuestro código de GitHub:

![conectar GitHub con Vercel](https://dev-to-uploads.s3.amazonaws.com/i/d1ia5knnxzk2anqqxcc1.png)

**28.** Ahí pegamos la URL del repositorio que creamos en GitHub, en este caso **https://github.com/*tu_usuario*/prueba**.

**29.** Presionamos **Continue**, en la siguiente ventana, también **Continue** y en la tercera ventana, presionamos **Deploy**. Después de unos momentos, aparece:

![repositorio conectado con Vercel](https://dev-to-uploads.s3.amazonaws.com/i/rufkn2rvuk5ws8uxc42v.png)

**30.** Hacemos clic en **Visit** y podremos ver nuestro proyecto en línea y lo podremos compartir con quien queramos para que también lo vea.

**31.** Cada vez que modifiquemos, borremos o agreguemos archivos que tenemos en nuestra PC, tenemos que subirlos de nuevo a GitHub. Pero ahora, solo tenemos que repetir los **pasos 19 y 20** de esta guía para que se guarden los cambios en nuestra memoria de git local. Una vez hecho eso, escribimos **git push** en la consola, junto al signo **$** y automáticamente (si tenemos Internet), nuestras modificaciones se suben a nuestro repositorio en GitHub y se actualizan en Vercel.

**32.** Cuando creemos un repositorio nuevo en GitHub (porque es otro proyecto), tenemos que hacer todo el proceso desde el paso 17 en adelante. 

*Espero que te sirva esta guía y, si tenés alguna corrección o comentario, escribime. ¡Gracias!*

Fuentes consultadas: https://www.stanleyulili.com/git/how-to-install-git-bash-on-windows/
https://medium.com/@ancizj393/crear-una-clave-ssh-en-git-y-vincular-en-tu-cuenta-de-github-e7a6b22bc93f