DEV Community

Cover image for Paso a paso para empezar con GitHub y publicar páginas en Vercel
Ivana Croxcatto
Ivana Croxcatto

Posted on

Paso a paso para empezar con GitHub y publicar páginas en Vercel

1. Abrimos una cuenta en GitHub

2. En GitHub, vamos al ícono de nuestro perfil y abrimos la configuración: https://github.com/settings/profile

3. Hacemos clic en SSH and GPG keys:
SSH and GPG keys step

4. Dejamos eso por un momento y descargamos Git desde acá. Eso nos va a permitir tener la consola de Git en nuestro equipo.

5. Acá 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

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

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

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 a la página que habíamos dejado abierta: https://github.com/settings/keys (pasos 1, 2 y 3 de esta guía).

12. Hacemos clic en:

nueva clave SSH

13. Ahí pegamos el contenido de nuestra llave SSH (el texto largo que está en nuestra consola). Este es un buen artículo 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

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

repositorio nuevo
nombre del repositorio nuevo

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

crear repositorio

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

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

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

25. Ahora, vamos a Vercel.

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

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

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

Discussion (1)

Collapse
jair profile image
Jair

Thanks