INTRODUCCIÓN

¿QUÉ ES GIT?

• Es un software de control de versiones

• Guarda un registro de todos los cambios sufridos por los archivos
• Facilita el desarrollo y mantenimiento de aplicaciones tanto de
forma individual como al trabajar en equipo

• Creado por Linus Torvalds

• Es un software libre
 miaplicacion_v1 miaplicacion_v3

miaplicacion

miaplicacion_v2 miaplicacion_v4
7458asdf 2547qpvd
“Crear “Definir los
páginas Inicio, estilos”
Blog y
Contacto”

1254jq 458qtv
“Añadirmos la “Añadimos
navegación entre validación de
páginas” formularios”
RAMAS
TERMINOLOGÍA
REPOSITORIO

• Todo proyecto que está siendo

seguido por git.
COMMIT

• Cada uno de los cambios registrados en el historial de git.

 RAMAS
• Son ramificaciones, bifurcaciones, nuevos caminos que toma el proyecto.
CLON
• Un clon es una copia exacta del repositorio.
FORK

• Un fork es un proyecto completamente diferente que se crea a partir de otro

CARACTERÍSTICAS
ES DISTRIBUIDO

• Cada desarrollador tiene una copia

idéntica del repositorio en su equipo local
lo que implica que no necesitan conectarse
al repositorio ni siquiera necesitan una
conexión a Internet para trabajar.
• El trabajo será más rápido porque no
dependemos de conexiones a internet
• Cada desarrollador tiene un backup del
proyecto que puede utilizarse en caso de
desastre.
RAMAS Y FUSIONES (BRANCH Y MERGE)
• Tal como se comentó anteriormente, las ramas son bifurcaciones que toma el
proyecto para no comprometer el proyecto final.
• Esas ramas posteriormente deberán integrarse en la rama principal eso es una
Fusión (Merge).Durante este proceso de Fusión puede haber problemas, conflictos...
DESCARGAR E INSTALAR GIT
DESCARGAR GIT

• En Google escribir descargar git y hacer clic en el primer enlace

Se puede Para descargarlo
descargar para Windows
para Mac, haremos clic en el
Windows o enlace
Linux

Una vez descargado, bastará con localizar el ejecutable, hacer doble clic
sobre él y seguir los pasos de la instalación
Cuando haya terminado la instalación, se creará un grupo de iconos denominado Git dentro del menú de Inicio
de Windows

De todos estos iconos, especialmente importante es Git Bash, es

decir, la consola de Git ya que para trabajar con Git todos los
comandos son por consola aunque existen entornos de desarrollo
que nos ofrecen entornos gráficos para trabajar con git de
forma mucho más amigable (por ejemplo, Visual Studio Code)
CONFIGURAR GIT
COMANDO CONFIG

• Para configurar git utilizaremos el comando config

• Dentro del comando config vamos a tener tres niveles:
• system. Es el más alto de todos. Permite realizar cambios sobre el sistema (en muchas
ocasiones no lo podremos ejecutar)
• global. Nos permite definir parámetros globales para todos los proyectos.
• local. Permite particularizar alguna configuración para un proyecto en concreto.
NOMBRE DE USUARIO

• Abrir Git Bash

• El comando que utilizaremos para definir el nombre del usuario que va a
utilizar los proyectos por defecto será:
git config --global [Link] "Martuky"
EMAIL DEL USUARIO

• El segundo parámetro que configuraremos a nivel global será el email del

usuario.
git config --global [Link] martukyprofe@[Link]
VER CONFIGURACIÓN

• Si queremos ver los parámetros configurados (entre los que se encuentran el

nombre y el correo del usuario) podemos usar el comando:
git config -–list
• Si quiero ver los parámetros configurados a un determinado nivel lo puedo
especificar en el comando anterior
git config --global -–list
CREAR REPOSITORIO
CREAR REPOSITORIO
 Directorio de
Area de ensayo
trabajo Repositorio
(Staging área)
(working copy)

Carpeta con nuestro Contiene los archivos a Almacenará toda la

proyecto trackear información de los
cambios
Directorio de trabajo

git add

git commit
Área de
ensayo
(Staging área)

Repositorio local
• Crear una carpeta que llamaremos CursoWeb y dentro de ella, crear otra
carpeta a la que llamaremos proyectoWeb
• Crear unarchivo html al que llamaremos index, que contendrá la estructura
básica de un documento HTML5 y que vamos a guardar en proyectoWeb
• Abrir Git Bash para lo que lo más fácil es situarse en la carpeta
proyectoWeb y llamar a su menú contextual haciendo clic con el botón
derecho del ratón en cualquier zona de la ventana que muestra el contenido
de la carpeta y hacemos clic sobre la opción Git Bash Here (Si no aparece
esta opción, hacer clic sobre Mostrar mas opciones)
• Creamos el repositorio: git init
• Nos crea el repositorio. A simple vista, ni en la carpeta ni en el archivo que
contiene la carpeta veremos ningún cambio. Sin embargo, si mostramos los
archivos ocultos, veremos una carpeta denominada git

Esta carpeta oculta

será el repositorio local
que nos va a hacer el
control de versiones a
nivel local
 Cuando al abrir la consola en una carpeta en la línea de comandos aparece al final la
palabra (master) quiere decir que para esa carpeta ya tenemos creado un repositorio. Si
para un directorio no tenemos creado un repositorio, la ruta terminará con el nombre del
directorio

Debemos tener cuidado de no ejecutar el comando git init en un directorio que ya tenga un repositorio
porque lo que haríamos sería reiniciar el repositorio
• A continuación, vamos a crear en nuestra carpeta proyectoWeb dos carpetas, una a la
que llamaremos css y otra a la que llamaremos js.
• En la carpeta css vamos a guardar nuestro archivo de estilos al que llamaremos [Link]
• En la carpeta js vamos a guardar un archivo al que denominaremos [Link] que tendrá
nuestro código JavaScript.

proyectoWeb

css js
[Link]

[Link] [Link]
 • Si en la consola tecleamos
git status –s
Nos dará un listado de la información que tiene git ahora sobre nuestra carpeta
(tanto a nivel de archivos como de directorios)

La barra detrás de css y de js Los dos interrogantes a la izquierda del

indica que son directorios nombre de un archivo o de un directorio
indica que ese elemento no está siendo
objeto de un seguimiento por parte de
git
 • Vamos a empezar indicándole a git que queremos que haga un seguimiento de
[Link] para lo que utilizaremos el comando

git add [Link]

[Link]
\css [Link]
\js

Directorio de trabajo Staging area Repositorio

La A que hay a la izquierda de [Link] indica

que ese archivo ha sido agregado al Staging
Area.
• Una vez que tenemos el o los archivos a los que queremos hacer el tracking en el
Staging Area, podemos crear una instantánea en el momento en que lo deseemos
y para ello usaremos el comando git commit

git commit –m "Comienzo del proyecto"

Ha cambiado una fila, se han hecho 10 inserciones (que son las 10 líneas que tiene el archivo
[Link] incluyendo la línea en blanco).
 git commit –m "Comienzo del proyecto"

[Link]
\css [Link] [Link]
\js

Directorio de trabajo Staging area Repositorio

Si ahora repetimos el comando git status –s la consola solo me informa que hay
dos directorios que no tienen seguimiento ninguno (css y js). Sin embargo [Link] ya
no aparece, eso es porque todo lo que se agregue al repositorio y tenga una copia
de respaldo desaparece del listado.
• Vamos a modificar el archivo [Link] y vamos a añadirle, por ejemplo, un h1 y
un párrafo
• Si después de este cambio repetimos el comando git status -s la consola
nos informará de que [Link] ha sido modificado (M). Y esta M estará en rojo
informándonos de que ese archivo ha cambiado pero no ha sido respaldado.
 • Vamos a hacer un nuevo respaldo de nuestro archivo [Link]
git commit –m “Añadido título y primer párrafo"

• Pero el resultado del comando anterior es el siguiente:

No has llevado al
Staging Area el archivo
modificado
Hay ficheros sin seguir

No se han añadido
cambios al commit
 • Esto es debido a que hemos intentado saltarnos el área de ensayo. Es decir,
debemos volver a añadir el archivo al Staging Area
git add [Link]
• Si ahora repetimos el comando git status -s

Ahora la M está en verde lo

que indica que ahora git ha
tomado nota de las
modificaciones y está
preparado para tomar la
instantánea de este archivo
• Ejecutamos de nuevo el commit
git commit –m “Añadido título y primer párrafo"

[Link]
\css [Link] [Link]
\js [Link]

Directorio de trabajo Staging area Repositorio

• Si queremos ver las instantáneas que tenemos en nuestro repositorio ejecutaremos el comando

git log --oneline

• Supongamos que ahora queremos retornar a nuestra situación inicial y deshacer todos
los cambios realizados sobre nuestro [Link] original. Para ello usaremos el comando

git reset --hard 718b76c

• Todas las instantáneas tomadas después de la que se recupera se perderán. Se puede

comprobar con el comando git log --oneline
AGREGAR TODOS LOS ARCHIVOS AL STAGING
AREA
• Usaremos el comando
git add .

Vemos que git añade los

dos directorios al staging
área (A)
.GITIGNORE

• En ocasiones, nos encontraremos con determinados archivos o directorios que

no queremos que sean traceados (son utilizados a nivel local pero no deben
estar en el repositorio final).
• Esto lo podemos conseguir a través de un fichero denominado .gitignore que
deberemos guardar en nuestro directorio local y que deberá contener el
nombre de los archivos que se deben ignorar.
• Vamos a crear un archivos que denominaremos [Link] que va a contener una
lista de usuarios y contraseñas:

• Si listamos el estado del nuestro directorio:

• Vemos que en el listado anterior aparece el archivo [Link] que no queremos
se pueda tracear. Crearemos un fichero que llamaremos .gitignore en el que
pondremos el nombre de este archivo

[Link]
ya no aparece
• Vamos a ver ahora cuáles son los commits que tenemos guardados en nuestro
proyecto mediante el comando git log --oneline

• Vemos que solo tenemos el commit del comienzo del proyecto. Vamos ahacer un
segundo commit para lo que primero vamos a comprobar cuál es el estado de
nuestros documentos con el comando git status -s
• Vemos que todos los archivos y directorios están marcados como añadidos al
staging Area (A) así que vamos a hacer el commit
• Si comprobamos el estado de nuestro staging área veremos que ahora no hay nada
pendiente de procesar y si verificamos los commit de nuestro repositorio veremos
que hay uno nuevo.
• Vamos a hacer algún cambio en nuestros documentos.
• Para empezar en [Link] vamos a añadir el enlace hacia nuestro documento css.
• Luego vamos a ponerle un título al documento: Curso git
• Dentro del body le vamos a poner un h1 que diga Aprende Git con Martuky
• En nuestro archivo de CSS vamos a poner al body un color de fondo azul y un color de texto
blanco.

• Si hacemos un git status –s veremos que hay cambios pendientes de añadir

al staging área
• Debemos repetir el paso, añadir los ficheros modificados al stating área y luego generar n
commit para pasarlos al repositorio ---> Podemos hacer los dos pasos en uno con el comando:
git commit -am "Añadir titulos a la página y enlazar estilos"
git log --oneline

git status –s
• Vamos a añadir un último commit, en este caso vamos a enlazar [Link] con [Link] y dentro
de este archivo vamos a poner un alert(“Hola mundo”) para que se muestre al principio nada más
cargar nuestra página
RAMAS O BRANCHES
 RAMAS
• Son ramificaciones, bifurcaciones, nuevos caminos que toma el proyecto.
• Supongamos que quiero cambiar los estilos que estoy aplicando en mi proyecto
pero no estoy segura de cómo va a quedar por lo que voy a crear una rama que
va a recoger esos cambios: git branch estilos
• El comando git branch nos mostrará las ramas que tenemos y cuál es la activa

• En el ejemplo anterior la rama activa es master que es la que tiene el * y aparece

en verde.
• Para mover nuestro flujo de trabajo a una rama diferente utilizaremos el comando
git checkout: git checkout estilos

A partir de aquí todos los cambios que se hagan se harán en la rama estilos
• Ahora vamos a hacer unos cambios en los estilos en el body: vamos a poner como
color de fondo el #aebf76 y como color para el texto el #3C4905 y aplicaremos
la fuente verdana.
• Visualizaremos el documento y como vemos que los cambios nos convencen vamos a
pasarlos al Staging área y luego hacer un commit
• Si ahora revisamos nuestro log
• Todos los cambios anteriores se realizaron en la rama estilos. Vamos a volver a
nuestra rama principal con el comando checkout: git checkout master

Me avisa de que mi rama tiene commits sin pasar a la rama principal y que puedo
usar el comando git push para publicar esos cambios
• Si ahora ejecutamos la página tendrá los estilos iniciales.
• Si volvemos a cambiar a la rama estilos y ejecutamos de nuevo el archivo [Link]
los estilos a aplicar serán los últimos creados
• Vamos a volver a la rama master con el comando git checkout master y vamos a
añadir un párrafo a continuación del h2 que tenemos.

• Vamos a añadir nuestros cambios al Staging Area y a hacer un commit

git add .
git commit -m "Añadido un párrafo nuevo"
• Si visualizamos el log de los commits llevados a cambio hasta ahora en la rama master

Vemos que no aparece ninguna referencia a los cambios llevados a cabo en la rama estilos. Y si nos
vamos a la rama estilos y visualizamos el log de los commits ocurrirá lo mismo: no aparece ninguna
referencia a los cambios llevados a cabo en la rama master

Esta parte aparece porque

hasta ese punto no se
habían creado ramas
Si vamos cambiando alternativamente de rama y recargando la página veremos que los estilos aplicados cambian y el
párrafo añadido aparece o desaparece según estemos en la rama master o en la rama estilos

Aspecto de [Link] cuando en git tenemos

seleccionada la rama master

Aspecto de [Link] cuando en git tenemos

seleccionada la rama estilos
FUSIONAR DOS RAMAS (MERGE)
• Tal como se comentó anteriormente, las ramas son bifurcaciones que toma el
proyecto para no comprometer el proyecto final.
• Esas ramas posteriormente deberán integrarse en la rama principal eso es una
Fusión (Merge).Durante este proceso de Fusión puede haber problemas, conflictos...
FUSIONAR DOS RAMAS

• Cuando los cambios realizados nos convencen y queremos integrarlos en el proyecto

principal, deberemos hacer un merge.
• Para hacer un merge la primera condición es que debemos estar en la rama
principal
git checkout master
• Utilizar el comando git merge (rama_a_fusionar) para incorporar a la rama master
los cambios realizados en la otra rama
git merge estilos
• En ocasiones, al hacer el merge puede salir el editor vim diciéndones que incluyamos
un comentario de porqué pensamos que debemos hacer el marge.
• Pulsando I entraremos en el modo Insertar, borramos el texto que él nos pone y escribimos un
mensaje, como por ejemplo “Inclusión de los nuevos estilos”
• Pulsar [Esc] :wq
• Cuando la fusión tenga lugar git mostará un mensaje similar al siguiente:
BORRAR UNA RAMA

• Una vez que fusionamos una rama con la rama principal, podemos eliminarla
ya que su función ha finalizado.
• Para ello usaremos el comando git branch -d nombre_rama