Tutorial de Git – Aprende Git y GitHub/GitLab de manera fácil, rápida y sencilla – Parte 1

En el siguiente enlace tienes el indice para acceder al resto de entradas de este tutorial:

Hola a todos, hoy os traigo un tutorial de iniciación a Git, donde vamos a aprender como empezar a utilizar Git y también GitHub y GitLab (Hay otros pero nosotros vamos a ver estás dos) intentando que la curva de aprendizaje sea lo más suave posible y tardes el menor tiempo posible en aprender.

 

Git

 

Tabla de contenidos

Introducción

Hoy en día para cualquier puesto de trabajo como desarrollador te van a pedir que sepas utilizar Git. Si eres freelance también es muy importante conocer Git para llevar el control de versiones de nuestros desarrollos.

¿Que es Git?

Git, es un sistema de control de versiones creado por Linus Torvalds, conocido por iniciar y mantener el desarrollo del kernel de Linux.
Al igual que Linux, Git es  software libre.

¿Que es un sistema de control de versiones?

Un sistema de control de versiones es una herramienta utilizada para gestionar ágilmente los cambios en el código fuente de los programas y poder revertirlos.
Su propósito es llevar registro de los cambios en archivos de computadora y coordinar el trabajo que varias personas realizan sobre archivos compartidos.

Es muy común si no utilizas un sistema de control de versiones el ir guardando las diferentes versiones de nuestros proyectos en carpetas diferentes tal vez con la fecha y hora  a modo de backup.

Esto puede ser válido para proyectos pequeños que no van a tener cambios importantes, pero a la larga resulta engorroso y es fácil cometer errores y sobrescribir carpetas por error… etc,  además es mucho más complicado cuando queremos volver a un estado concreto del proyecto.

Con un sistema de control de versiones si detectamos que un cambio que hemos realizado anteriormente está generando un error podemos revertir ese cambio y volver a un estado anterior. Además podemos crear ramas para probar cosas y si funcionan estos cambios como deseamos entonces volver a fusionarlas con la rama principal.

Veremos todo esto con ejemplos prácticos.

Existen otras herramientas para el control de versiones como Mercurial, CVS,  Subversion, etc, pero sin duda la mas popular a día de hoy es Git.

Instalando Git

Lo primero que necesitamos hacer es instalar Git en nuestra computadora.

Instalar Git en Windows

Vamos a https://git-scm.com/download y descargamos la versión para nuestro sistema operativo, en este caso Windows:

Descargar Git para Windows

Una vez descargado el instalador lo ejecutamos e instalamos Git seleccionando todos los valores por defecto,  ya sabes siguiente…siguiente…, no olvides que hay que leer lo que pone antes de darle a siguiente por si acaso ;-).

Al terminar le marcamos la casilla launch git bash para que nos abra el terminal de git.

Podemos utilizar git bash o el propio cmd del sistema.

Tambien se instala una aplicación llamada git GUI que nos ofrece una interface gráfica.

Cada vez que queramos abrir el terminal de git solo tenemos que ir al  menú de inicio de Windowa  y buscar Git, entre otras aplicaciones nos aparecerá Git Bash, esa es la consola de comandos de Git y es la que vamos a utilizar.

Una vez que hemos abierto  Git Bash, para comprobar que versión de Git tenemos instalada escribimos el siguiente comando:

git --version

Si todo esta instalado correctamente veremos algo como esto:

Instalar Git en Mac

Aunque existén varias formas de instalar git en mac, mismamente desde el terminal, para hacerlo sencillo y asegurarnos de que tenemos la ultima versión estable vamos a descargar el instalador de git para mac de su página oficial. Para ello visitamos  https://git-scm.com/download y descargamos la versión para Mac OS X:

Una vez descargado damos doble click sobre el archivo y nos mostrará el instalador, pinchamos con el botón derecho sobre el archivo .pkg y le decimos que lo abra con el instalador y le damos a instalar. Nos pedirá la contraseña de usuario para poder instalarlo.

Una vez instalado desde el terminal escribimos git –version para comprobar la versión instalada.

Instalar Git en Ubuntu y derivados

Para instalar Git en ubuntu es muy sencillo, solo tenemos que seguir los siguientes pasos:

Primero actualizamos los repositorios, para ello abrimos un terminal y escribimos el siguiente comando:

sudo apt-get update

Una vez se han actualizado los repositorios instalamos git con el siguiente comando:

sudo apt-get install git

En ubuntu utilizaremos el propio terminal del sistema para trabajar con git.

Si utilizas otra distribución de linux puedes consultar como instalar git en la sección de descargas linux de la propia web de git.

Para comprobar que se ha instalado correctamente escribimos en el terminal git –version y nos mostrará la versión de git instalada.

Configurando un usuario

Una vez que tenemos instalado git lo primero que tenemos que configurar es el usuario que va a utilizar el repositorio en esta máquina, para ello debemos le vamos a indicar un nombre y una dirección de correo, esto lo hacemos con el siguiente comando desde consola:

git config --global user.name "nombre_usuario"
git config --global user.email "email_usuario"

Por ejemplo:

git config --global user.name "EduRevilla"
git config --global user.email "edu.revilla.vaquero@gmail.com"

Con git config –global -l podemos ver estos valores:

Estos datos se pueden sobrescribir volviendo a ejecutar los comandos anteriores.

El parámetro –global  indica que vamos a utilizar este usuario en todos los repositorios que utilicemos, es decir si tenemos varios proyectos gestionados por Git en nuestro ordenador estos usarán este usuario.

Si queremos utilizar otro nombre de usuario y otro email en un directorio concreto utilizaremos el comando git config pero usando el parámetro –local en lugar de –global.

Creando un repositorio en Git

Un repositorio es un sitio centralizado donde se almacena y mantiene información digital, por ejemplo todos los archivos y carpetas que componen un proyecto, y que puede estar almacenado localmente, es decir en tu propio equipo o remotamente.

Un repositorio remoto es una versión de tu proyecto que se encuentra alojado en Internet o en algún punto de la red.

Vamos a ver como crear un repositorio local con un ejemplo básico.

Vamos a crear un proyecto web, para ello creamos una carpeta en el lugar que prefiramos dentro en nuestro equipo y le llamamos por ejemplo proyectoGit1:

Entramos dentro de la carpeta que acabamos de crear y creamos un archivo que en un alarde de originalidad le vamos a llamar holamundo.html :

Editamos nuestro archivo holamundo.html y le añadimos un poco de html básico:

<html>
    <head>
        <title>Hola mundo</title>
    </head>
    <body>
        <h1>Hola mundo</h1>
    </body>
</html>

Bien, este va a ser nuestro punto de partida.

Ahora vamos a la consola de comandos y navegamos hasta la carpeta proyectoGit1 que acabamos de crear.

Una vez dentro de la carpeta proyectoGit1 vamos a crear un repositorio local con el siguiente comando:

git init

Nos mostrará un mensaje parecido a este: “Initialized empty Git repository in…” y la ruta del proyecto.

Esto creará una carpeta oculta llamada .git dentro de nuestro proyecto y es la carpeta que utilizará git para gestionar nuestro repositorio.

Las carpetas que empiezan por un punto se consideran ocultas y algunos sistemas operativos no las muestran.

Desde consola podemos ver los archivos y carpetas ocultos con el comando ls -a.

Si queremos dejar de utilizar git en nuestro proyecto solamente tenemos que eliminar la carpeta .git.

Para volver a utilizar git tendríamos que volver a ejecutar git init.

Estado de los archivos: git status

Para conocer el estado de nuestros archivos utilizamos el siguiente comando:

git status

Si ejecutamos este comando en estos momentos obtendremos lo siguiente:

Lo primero que vemos es “On branch master” esto significa que estamos en la rama principal, es la rama por defecto cuando creamos un repositorio.

Vemos en rojo holamundo.html nos avisa de que no hemos añadido ningún archivo para ser gestionado por git.

Git tiene dos procesos para gestionar nuestros archivos. Primero los tenemos que añadir a una zona intermedia conocida como stage y después tenemos que confirmar el paso  definitivo de los archivos al repositorio.

Añadir archivos: git add

Para añadir los archivos de nuestro proyecto utilizamos el siguiente comando:

git add .

“Hay que dejar un espacio entre add y el punto”

Con este comando le decimos a git que pase todos los archivos que estén sin pasar al stage.

Si ahora volvemos ejecutar el comando git status obtendremos algo como esto:

Nos informa de que no hay “commits todavía” y vemos que holamundo.html ahora aparece en verde, esto significa que holamundo.html ya se encuentra en el stage y debemos confirmarlo para que pase definitivamente al repositorio.

Confirmar los archivos: git commit

Para confirmar estos archivos y que pasen al repositorio final utilizamos en siguiente comando:

git commit -m "Commit Inicial"

Utilizamos el parámetro -m para indicarle una descripción del commit que vamos a hacer, en este caso le decimos que es el commit inicial.

Si no indicamos el parámetro -m se abrirá un editor de código de terminal (vim).
Para guardar el mensaje que escribamos pulsamos la tecla escape y escribimos :wq

Si volvemos a ejecutar el comando git status obtendremos este mensaje:

Esto significa que no hay nada para confirmar, es decir que todos los archivos se encuentran ya en el repositorio.

Ver los cambios realizados: git log

Para ver los las operaciones que hemos realizado utilizamos el siguiente comando:

git log --oneline

En estos momentos esto nos mostrará lo siguiente:

El primer conjunto de letras y números que vemos a la izquierda es el id del commit, utilizaremos este identificativo más adelante para poder volver a un estado anterior.

Después entre paréntesis nos indica que nos encontramos en la rama principal(master).

Por último nos muestra el mensaje que le pusimos al commit.

Rectificar commit: git commit –amend

Si nos hemos equivocado al escribir el mensaje al hacer el commit podemos rectificar utilizando el parametro –amend de la siguiente manera:

git commit --amend -m "Nuevo mensaje corregido para el commit"

Volver al un commit anterior: git checkout id_commit

Una de las grandes ventajas de utilizar git es que podemos volver a un estado anterior. Imaginemos que hemos realizado cambios en nuestro proyecto y nos da un error que hace que nada funcione,  no conseguimos saber que es lo que falla y queremos volver al estado anterior donde todo funcionaba, es una situación terrorífica pero bastante común. con el comando git checkout podemos volver a un estado anterior.

Para probarlo vamos a realizar cambios en nuestro archivo  holamundo.html, vamos a editarlo y a dejarlo de la siguiente manera:

<html>
    <head>
        <title>Hola mundo</title>
    </head>
    <body>
        <h1>Adiós mundo cruel...</h1>
    </body>
</html>

Bien, ahora en lugar de “Hola mundo” tenemos una etiqueta <h1> que dice “Adios mundo cruel…”.

Si ahora ejecutamos el comando git status nos avisa de que ha habido cambios en holamundo.html, por lo tanto debemos pasarlo al stage y hacer un commit, para ello tal y como hemos visto antes ejecutamos los siguientes comandos, primero lo añadimos al stage:

git add .

Y después hacemos el commit:

git commit -m "Hemos modificado holamundo.html"

Ahora si ejecutamos git log –oneline obtenemos lo siguiente:

Tenemos dos commits, el inicial y la última modificación.

Si nos hemos hemos arrepentido del último cambio que  hemos realizado podemos volver al estado anterior con el siguiente comando:

git checkout ffd325d

El valor Hexadecimal que va después de checkout es el identificador del commit al que queremos regresar, en este caso el del commit inicial.

Al ejecutar el checkout comprobaremos como nuestro archivo holamundo.html ha regresado al estado inicial, ahora vuelve a decir “Hola mundo” en lugar de “Adiós mundo cruel…”.

Si he han eliminado archivos de nuestro proyecto al volver a un commit anterior estos volverán a aparecer, al mismo tiempo si se han añadido archivos nuevos, al volver a un estado anterior estos desaparecerán. Es decir volveremos a tener una copia exacta de lo que teníamos en el momento de realizar el commit al que vamos a regresar.

Por no hacer este post demasiado largo por hoy lo dejamos aquí, en el siguiente post seguiremos aprendiendo más sobre esta maravillosa herramienta.

En el siguiente enlace tienes el índice para acceder al resto de entradas de este tutorial:

Un saludo, y si aún no lo has hecho no olvides suscribirte a mi blog para no perderte los próximos posts  :-),

También puedes seguirme en Twitter en ‎@revigames y no olvides que me ayudas mucho si compartes este post en las redes sociales.

5 comentarios en “Tutorial de Git – Aprende Git y GitHub/GitLab de manera fácil, rápida y sencilla – Parte 1

  1. Buenos días Eduardo,
    tengo una pregunta, no es respecto con el tema que has posteado, pero le eh dado muchas vueltas al asunto y no termino de resolverlo.
    No logro mostrar el mapa de google maps con el fin de ubicar un lugar donde no necesariamente este yo ahí.
    Leí uno de tus anteriores post(muy buenos por cierto) en el que muestras el mapa pero utilizando geolocalizacion y trate de modificarlo pero no tuve resultados positivos, obtengo el siguiente error
    “Uncaught (in promise) typeError:Cannon read property ‘firstChild’ of null at object._.Qf(https://maps.google.com/maps/api/js:83:190)”

    este es el mi codigo:

    loadMap(){
    this.coords = this.navParams.get(‘coords’);
    console.log(this.coords) //muestra las coordenas correctas

    let mapContainer = document.getElementById(‘map’);
    this.map = new google.maps.Map(mapContainer, {
    center: this.coords,
    zoom: 12
    });
    }

    Espero puedas ayudarme o decirme una liga en la que pueda leer acerca de esto

    de antemano muchas gracias
    espero puedas ayudarme

    1. Hola Kevin,
      Sería mejor que pusieses este comentario en una entrada relacionada con google maps en lugar de aquí para no confundir a los lectores.
      De todas formas ese error suele aparecer cuando o bien no existe el elemento con id ‘map’ o si existe no esta accesible en el momento de querer mostrar el mapa.
      Por ejemplo si no se ha terminado de cargar la página o si en un modal y todavía no se ha terminado de abrir.
      Crea en mapa cuando estés seguro de que el contenedor del mapa está accesible.
      En esté post en la parte final explico los ciclos de vida de una página en ionic para que veas donde te conviene crear el mapa:

      https://reviblog.net/2017/04/06/tutorial-de-ionic-2-crear-una-aplicacion-para-guardar-nuestros-sitios-geolocalizados-parte-5-guardando-nuestros-sitios-en-una-base-de-datos-local/

      Otra opción es incluir un retardo con setTimeout.

      Un saludo

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.