A través del desarrollo de este tutorial pondrá en práctica los diferentes conceptos vistos durante el módulo.

Se espera que al finalizar usted pueda:

El punto de partida es un proyecto web que contiene diferentes recetas de cocina hispanoamericana. Creará el repositorio remoto, lo clonará en su espacio local, agregará nuevas recetas al sitio web y sincronizará los cambios al repositorio remoto.

Descargue los archivos del proyecto disponibles en este repositorio: Recetario

Utilice la opción Download ZIP en el botón Code.

Para realizar este tutorial usted debe tener claras las respuestas a las siguientes preguntas:

Pregunta 1. ¿Qué es un repositorio remoto?

Pregunta 2. ¿Cuál es la diferencia entre un repositorio remoto y un repositorio local?

Pregunta 3. ¿Cuál es la utilidad de un repositorio remoto?

Pregunta 4. ¿Qué sucede al clonar un repositorio?

Pregunta 5. ¿Qué es GitHub?

Si no es así, por favor revise los videos y el material propuesto antes de seguir. De esta forma podrá sacarle más provecho.

Realice los siguientes pasos:

  1. Inicie sesión en GitHub.
  2. Haga clic en el botón New.
  3. Ingrese el nombre del repositorio. Seleccione el perfil de seguridad de acuerdo con el contexto del proyecto que va a trabajar y haga clic en el botón Create repository.

Con lo anterior habrá creado un repositorio remoto, ahora copie su URL para empezar a trabajar en él.

Realice los siguientes pasos:

  1. Abra la consola de Git Bash o la terminal.
  2. Ubíquese en el directorio de su preferencia (allí se creará el repositorio local).
  3. Clone el repositorio teniendo en cuenta la URL del repositorio remoto creado en la sección anterior.
$ git clone <url_repositorio_github>

Al ejecutar el comando se inicia la clonación del repositorio y se genera una advertencia indicando que está vacío.

  1. Al finalizar tendrá una carpeta con el repositorio local en el directorio definido en el punto
  1. (Opcionalmente) Consulte la conexión al repositorio remoto.
$ git remote -v // la opción -v permite visualizar la URL que Git ha asociado al repositorio

Note la palabra origin antes de la URL, este es el nombre que Git da al servidor por defecto una vez clonado, en caso de querer cambiarlo ejecute el siguiente comando:

$ git remote rename origin <nuevo_nombre>

Paso 1. Agregar línea base del proyecto

Como se dijo en la introducción, el punto de partida para este tutorial es un proyecto web que contiene diferentes recetas de cocina hispanoamericana. Lo que se hará a continuación será realizar cambios a ese proyecto desde el repositorio local y sincronizarlos con el repositorio remoto entendiendo la dinámica del ciclo de trabajo.

Realice los siguientes pasos:

  1. Copie el contenido de la carpeta /recetario en el directorio de su repositorio local.
  2. Desde la consola de Git Bash o la terminal ubíquese en la carpeta del proyecto.
  3. Consulte el estado del repositorio.
$ git status

Note que los archivos están en la copia de trabajo local, pero aún no han sido incluidos en el área de preparación.

  1. Añada las carpetas de recetas e imágenes al área de preparación. 
$ git add . //Al ejecutar el comando de esta forma, se están agregando todos los cambios al área de preparación.

  1. Consulte nuevamente el estado de su repositorio e identifique los cambios.
$ git status

Ahora los archivos han sido etiquetados como new file, es decir que se encuentran por primera vez en el área de preparación y están pendientes de ser enviados al repositorio.

  1. Utilice el comando commit para añadir los archivos que están en el área de preparación al repositorio.
$ git commit -m "Se añade codigo base" //La opción -m implica que habrá un mensaje de confirmación asociado al commit.

Como respuesta Git especifica cuántos archivos han sido cambiados y cuántas líneas de código han sido insertadas o eliminadas.

En este momento, ya cuenta con el código base del proyecto en el repositorio local y está listo para actualizar el repositorio remoto.

  1. Sincronice los cambios con el repositorio remoto.
$ git push -u repo_remoto master //La opción -u mantiene un registro de la rama a la que se hace push, lo anterior con el fin de evitar conflictos o ausencia de información al hacer pull.

Note que se obtiene como resultado el porcentaje de archivos enviados y no enviados. Además de las ramas de origen y destino.

  1. Verifique los cambios en GitHub.

Ahora el código base del proyecto se encuentra en el repositorio remoto y es posible visualizarlo, navegar en él y obtener información relevante de todo el historial desde cualquier parte del mundo.

Deténgase un poco para navegar en las diferentes opciones de GitHub.

Paso 2. Modificar archivos del repositorio

Siga los siguientes pasos para modificar una receta del repositorio local:

  1. Se ha identificado que la imagen en la receta Arroz con coco y camarón fresco (Colombia) no corresponde al plato.

Ubíquese en el siguiente directorio desde su copia de trabajo local: /recetas/Colombia/arroz_coco.html y corrija la ruta de la imagen por: ../../imagenes/arroz-coco.jpg

  1. Consulte el estado del repositorio.
$ git status

Ahora el archivo /recetas/Colombia/arroz_coco.html ha sido etiquetado como modified (en color rojo), es decir que Git identificó cambios en el archivo de la copia de trabajo local que aún no han sido movidos al área de preparación.

  1. Agregue los cambios al área de preparación.
$ git add recetas/Colombia/arroz_coco.html

  1. Consulte nuevamente el estado del repositorio para verificar los cambios.
$ git status

El archivo /recetas/Colombia/arroz_coco.html ha sido etiquetado como modified (en color verde), es decir que los cambios ya fueron movidos al área de preparación y están pendientes de guardarse en el repositorio.

  1. Una vez esté seguro del cambio, confírmelo en el repositorio.
$ git commit -m "Se modifica ruta de imagen en receta"

  1. Consulte el historial de cambios.
$ git log

Verifique los 2 commit realizados hasta el momento: su identificador, fecha de creación, autor y mensajes de confirmación.

Note que el primer commit tiene la etiqueta (repo_remoto/master) mientras que el segundo tiene la etiqueta (HEAD -> master), esto quiere decir que el primero se encuentra sincronizado con el repositorio remoto mientras que el segundo sólo está en el repositorio local.

  1. Utilice el comando diff para consultar las diferencias entre la rama master del repositorio local y la rama master del repositorio remoto.
$ git diff repo_remoto/master master

Como puede observar, este comando permite identificar el directorio del archivo modificado y las líneas específicas que fueron cambiadas, en este caso la línea roja representa lo que está en el repositorio local y la verde lo que está en el repositorio remoto.

  1. Sincronice los cambios con el repositorio remoto.
$ git push

Ahora el repositorio remoto ha sido actualizado con los últimos cambios.

  1. Consulte el historial de cambios.
$ git log

Ahora las etiquetas (HEAD -> master) y (repo_remoto/master) se encuentran en el segundo commit, esto significa que el repositorio local y el remoto están actualizados.

Paso 3. Agregar archivos al repositorio

Después de agregar el código base y modificar un archivo, es hora de agregar una nueva receta al proyecto.

Siga los siguientes pasos:

  1. Copie y pegue la carpeta /files_to_add/Mexico en el directorio /recetas de su copia de trabajo local.
  2. Copie y pegue la imagen /files_to_add/imagenes/pozole.jpg en la carpeta /imagenes de su copia de trabajo local.
  3. Verifique el estado del repositorio.
$ git status

  1. Agregue los cambios al área de preparación.
$ git add .

  1. Confirme los cambios en el repositorio local.
$ git commit -m "Se incluye receta mexicana"

  1. Sincronice los cambios con el repositorio remoto.
$ git push

  1. Consulte el historial de cambios.
$ git log

Paso 4. Devolverse a una versión anterior

Para devolverse a una versión anterior utilice el comando reset. Dicho comando restablece el apuntador de la versión actual (HEAD) a la especificada.

Es posible usarlo de diferentes formas, en este tutorial aprenderá dos:

$ git reset --hard <id_commit>.
$ git reset --hard HEAD~<numero_de_commit_atras>

Realice los siguientes pasos para devolverse a la versión inicial (primer commit):

  1. Teniendo en cuenta el historial de commit consultado en la sección anterior, utilice el comando de su preferencia.
$ git reset --hard HEAD~2

Note que se ha devuelto 2 commit hasta llegar al primero.

  1. Consulte el historial de commit.

Al consultar el log, podrá verificar que los demás commit fueron eliminados. Sin embargo, estos cambios sólo están en el repositorio local (HEAD -> master).

  1. Actualice los cambios en el repositorio remoto.
$ git push -f origin master //la opción -f o --force sobre escribe toda la estructura y secuencia de commits en el repositorio remoto. Lo recomendable es asegurarse de hacer pull y estabilizar el código en el repositorio local antes de hacer push.

Dado que Git encontrará diferencias en cuanto a la posición del HEAD en el repositorio local y el repositorio remoto, es probable que rechace el push. Para evitarlo force la operación agregando -f y la rama de destino.

  1. Consulte nuevamente el historial de commit.
$ git log

Como puede observar tanto el repositorio local como el repositorio remoto se han devuelto a la primera versión.