Hoy, en esta segunda entrega, seguimos con GIT y esta vez vamos a explicar la estructura de un repositorio y los primeros pasos utilizando algunos comandos básicos para empezar a trabajar con él desde el GIT Bash.

¡Empecemos!

Ya tengo instalado GIT, ¿ahora que?

En la anterior entrega, pudimos ver un vídeo donde explicábamos como instalar y ejecutar GIT en sus versiones Bash, CMD y GUI. Ahora, una vez que hemos instalado GIT en nuestro ordenador y hemos ejecutado el Bash para comprobar que funciona correctamente, vamos a empezar a ver los comandos básicos.

Configurando nuestro entorno GIT

Al abrir GIT Bash, nos muestra un aspecto que es muy similar a la anterior imagen, parece un CMD o un TERMINAL Linux (o de MacOS). La primera línea nos muestra:

<usuario>@<nombre de PC> <modelo de terminal> <directorio actual>

Recordando que estamos ejecutando GIT Bash en Windows:

  • usuario: es el usuario que estais utilizando en Windows.
  • nombre de PC: es el nombre de equipo (vuestro PC)
  • modelo de terminal: en nuestro caso, al estar utilizando un Windows de 64 bits es el modelo MINGW64.
  • directorio actual: es el directorio donde nos encontramos ubicados con GIT. El sombrerito “~” nos indica que estamos en el directorio del usuario actual, lo que viene siendo el HOME en linux o MacOS.

Cuando empezamos, estamos en el directorio de nuestro usuario. Para navegar por las carpetas y subcarpetas utilizaremos los comandos propios de Windows o también podemos utilizar los de Linux (windows/linux):

  • dir/ls: este comando sirve para mostrar que directorios y archivos tenemos disponibles en nuestro directorio actual. La diferencia entre ellos es que si utilizáis “ls” los nombres de los directorios se muestran de un color azulado y los archivos en blanco.
  • cd <nombre de directorio>: sirve para entrar a un directorio concreto.
  • cd .. : sirve para salir del directorio actual y posicionarse en el directorio padre (anterior).

Más adelante veremos más comandos para poder abrir archivos desde GIT Bash con VIM (editor muy popular de terminal).

Primero, vamos a empezar configurando nuestro entorno GIT introduciendo nuestro nombre (es el nombre del autor que saldrá reflejado cuando registremos una nueva versión o commit). Para eso utilizaremos el comando:

$git config -–global user.name “<nombre>”

En el campo “<nombre>” debéis escribir vuestro nombre. Por ejemplo: “José”, “Pedro”, “Diego",etc.

Una vez hemos ejecutado el comando con el cambio de nombre, ejecutamos el siguiente comando para comprobar que realmente se ha realizado el cambio:

$git config -–global user.name

En mi caso vamos a utilizar el nombre “CEO“:

Como veís en la imagen anterior hemos realizado el cambio de nombre correctamente.

Si deseamos modificar nuestro nombre de nuevo, basta con volver a ejecutar:

$git config -–global user.name “<nombre>”

y volveremos a cambiar el nombre de nuevo.

Ahora vamos a configurar nuestro correo electrónico (e-mail) y para eso, utilizaremos un comando bastante parecido al anterior:

$git config –-global user.email “<e-mail>”

Para ver si se han realizado correctamente los cambios:

$git config –-global user.email

En mi caso vamos a utilizar el nombre “ceo@chipsypc.com“(inventado):

Ahora vamos a ver una opción para activar la distinción de mensajes por colores (muy recomendable para usar con comandos linux). Así, por cada tipo de mensaje de GIT, se mostrará de un color diferente y a simple vista, podremos saber de qué tipo de mensaje se trata.

El comando para activar esta opción es:

$git config –-global color.ui true

Para ver todas las opciones que hemos modificado hasta ahora, podemos utilizar el siguiente comando:

$git config –-global --list

Ahora que ya hemos configurado de forma básica nuestro entorno GIT, vamos a crear nuestro primer proyecto.

Nuestro primer proyecto

Para empezar a utilizar GIT, vamos a empezar con un nuevo proyecto (repositorio). Para eso, vamos a crear una carpeta llamada “proyectoGIT1” en la ubicación que queráis. En mi caso lo he creado en c:\proyectoGIT1.

En su interior, he creado 2 archivos:

  • index.html: es una plantilla HTML5 de página web.
  • styles.css: es la hoja de estilos CSS para el index.html

Podéis copiar y pegar estos códigos en un bloc de notas y guardarlo como index.html y styles.css dentro de la carpeta anterior. En este curso no vamos a dar nociones ni de HTML ni de CSS, por lo tanto los que no sabéis nada de estos lenguajes, ¡no os preocupéis!, explicaremos lo más importante de cada caso.

Por ahora podéis copiar y pegar los códigos de cada fichero en el bloc de notas de windows, y al guardar el fichero les ponéis el nombre con la extensión adecuada (HTML o CSS).

Código HTML del archivo index.html:

Ahora este es el código del archivo de estilos styles.css:

Ahora si ejecutáis el archivo index.html en un navegador (Firefox o Chrome por ejemplo) se os mostrará una página similar a esta:

Una vez creados los archivos anteriores en la carpeta c:\proyectoGIT1, abrimos nuestro GIT Bash y vamos a situarnos en nuestra nueva carpeta. Para eso debemos navegar desde c:/ hasta la carpeta proyectoGIT1. Cuando estamos en la carpeta, ejecutamos un ls para poder ver los archivos que hemos copiado:

Una vez dentro de la carpeta, vamos a introducir nuestro primer comando GIT importante, ya que marcará el inicio de nuestro proyecto (repositorio) y vamos a decir a GIT que empiece a monitorear todos nuestros cambios. Utilizaremos el comando:

$git init

Al ejecutar este comando, nos muestra un mensaje (pantalla anterior) que nos indica que se ha inicializado un nuevo repositorio GIT en nuestra carpeta. A parte de esto, en la línea siguiente, nos muestra un texto nuevo “(master)”. Esto nos indica que estamos en la “ramamaestra de nuestro repositorio, pero el tema de las ramas (branch) lo explicaremos un poco más adelante, no os preocupéis.

Si en nuestro explorador de archivos de Windows, tenemos activada la opción de mostrar los archivos ocultos, podremos ver que dentro de nuestra carpeta se ha creado un nuevo directorio oculto llamado “.git” y en su interior hay varios archivos y carpetas.

Dentro de la carpeta .git encontramos:

Dentro de esta carpeta oculta, GIT crea una estructura de carpetas y archivos que van a ser los responsables de mantener controladas todas las versiones de los archivos que tenemos en nuestro repositorio (carpeta del proyecto).

¡No debéis modificar o eliminar nada de aquí dentro!

Este comando git init solo lo vamos a usar una única vez y será al iniciar un nuevo proyecto (repositorio). Ahora vamos a ver otro comando muy útil de GIT para saber el estado de nuestro proyecto (si se han modificado algún fichero del repositorio). El comando es:

$git status

Cuando ejecutamos este comando, podemos observar que nos muestra en rojo los dos ficheros que tenemos en nuestro repositorio:

  • index.html
  • styles.css

¿Qué significa esto?

Anteriormente, hemos hablado sobre los 3 estados de GIT:

  1. Working directory (directorio de trabajo)
  2. Staging area (puesta en escena)
  3. Repository (repositorio)

Con el mensaje anterior, GIT nos está indicando que en nuestro working directory (directorio de trabajo) tenemos estos 2 archivos (index.html y styles.css) y que ninguno se ha añadido al staging area (puesta en escena) para que podamos realizar nuestra “foto” o “versión” de cómo están actualmente estos ficheros dentro de nuestro repository (repositorio).

Hasta aquí este segunda entrega del curso GIT. En la próxima entrega, el próximo miércoles, realizaremos el próximo paso que es añadir estos 2 ficheros a la staging area (puesta en escena) para que más tarde se pueda crear la primera versión de nuestros ficheros (versión original) dentro de nuestro repositorio GIT.

Más tarde modificaremos el archivo HTML y el CSS para poder modificar un poco el aspecto de la página y así realizar una nueva versión del repositorio y de esta forma podremos contemplar los cambios que se han realizado en nuestros ficheros de nuestro repositorio.

Os dejamos un nuevo vídeo de nuestro canal de Youtube con todo lo que hemos explicado en esta segunda entrega para que veáis de forma práctica como se realizan todos los pasos que hemos hecho:

Hasta entonces un saludo y no os olvidéis de compartir esta entrada por vuestras redes sociales y suscribirse a nuestro canal de Youtube.

Info | WikipediaGIT