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

Ivana Croxcatto — Fri, 04 Sep 2020 02:12:54 +0000

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:

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:

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:

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:

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:

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:

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

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

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.

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:

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í:

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:

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:

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

Hiding API Keys in Your Code

Ivana Croxcatto — Sat, 13 Jun 2020 23:02:59 +0000

Let's say you are using a fetch in React App to get info from an API, and are using your API key to connect to that API. The key is private, and should not be visible outside your code. How can you achieve that and keep your code functional?
These are my notes on what worked for me. It took me a while to figure it out, so I wanted to share it, as a personal note to self, and, hopefully, to help someone else with the same issue.

These are the steps I followed:

1- Write npm install dotenv in the Terminal (I am using the Terminal in VSC).

2-Create an .env file in the root folder of the project (this means, outside the src folder).

3-This .env file will have the environment variables that are to be kept hidden. Since I am using React App, these variables have to be preceded by REACT_APP_. In my case, my variable is called REACT_APP_API_KEY=numberOfYourAPIKey.

4-Go to the .gitignore file in the root folder, and make sure .env is added to the list of files that will not make it into GitHub.

5-Go to your App.js file, and on the top list of "imports," (before declaring the App function), declare a variable to call the config function. I wrote const dotenv = require('dotenv').config() (you can use the variable name of your choice).

6-Go to any component using this API key, and, inside that component js file, declare a variable that will contain the API Key from your .env file. I wrote const api_key = process.env.REACT_APP_API_KEY. This is the variable you will use in your fetch. For example, fetch(https://api.example.org/data/api_key=${api_key})
The first "api_key" in the example is given by the API URL, the one inside the curly brackets is the name of my variable "api_key".

7-You can upload your project to GitHub now, and your API Key will not be visible.

8-In my case, I deployed my project to zeit.co (now vercel.com), by importing my GitHub project into this platform. Once imported, you will see three tabs in vercel.com: Overview, Deployment, Settings. Inside Settings, you will find the option to declare a variable under Environment Variables. There you should use the name of the variable you used in your .env file (REACT_APP_API_KEY), and copy-paste the actual value of the variable (your API Key) in the field box next to the variable name, where it says "VALUE (WILL BE ENCRYPTED)".

Your code should be working as if the actual API Key was still shown in your code, only now it will be hidden outside your local environment. Hope it helps!

DEV Community: Ivana Croxcatto

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

Hiding API Keys in Your Code

These are the steps I followed: