Se encuentra usted aquí

En lugar de marearte con un listado eterno de comandos, con este tutorial vas a aprender a desarrollar usando Git con un ejemplo real. El objetivo es hacerlo extremadamente sencillo para aprender a usar Git, por lo que no lo mezclaremos con otras tecnologías como PHP, Sass, etc, así que no esperes desarrollar el sitio web definitivo que te quite de trabajar. Tocaremos simplemente HTML y CSS planos.

Lo primero es lo primero, instala Git y comprueba que funcione

En Linux lo tienes bastante fácil usando tu gestor de paquetes preferido, los que están basados en Debian pueden usar apt-get:

$ apt-get install git

Para el resto de sistemas operativos, basta con ir a la web oficial y descargar el instalador.

Si quieres sacarle el máximo partido a Git, lo suyo es que aprendas a utilizarlo desde un terminal. No te preocupes, al final del tutorial te recomendaremos algunas aplicaciones para controlar Git de manera visual. Mientras tanto, vamos manos a la obra, comprueba que esté funcionando.

$ git --version

Git version

¡Perfecto!, como ves, estoy usando la versión 1.9.2, este tutorial debería funcionar con cualquier versión similar a 1.9.x.

Inicializar tu repositorio

Un repositoriodepósito o archivo es un sitio centralizado donde se almacena y mantiene información digital, habitualmente bases de datos o archivos informáticos.

Git es un sistema de control de versiones distribuído, quiere decir que todos los desarrolladores que trabajen en el mismo código, tienen una versión local de todo el historial completo de los cambios realizados en cada fichero. Puedes trabajar sin necesidad de conexión a internet, hacer tus cambios y compartirlos cuando te vuelvas a conectar. Nosotros vamos a crear un repositorio local, más adelante aprenderemos a usar un servicio de alojamiento de repositorios externo.

Crea un directorio de trabajo donde te apetezca empezar a trabajar, en mi caso lo voy a meter dentro de Developer > Web > git-tutorial

$ cd ~/Developer/Web/git-tutorial
$ git init

Git init

Este comando va a crear un directorio oculto llamado .git, donde guardará toda la base de datos de cambios. No necesitas hacer nada aquí, simplemente ten en cuenta que si por cualquier motivo quisieras borrar todo el historial de cambios, bastaría con borrar este directorio.

Contenido del directorio .git

Tu primer commit

¡Hora de aventuras!, vamos a crear nuestro primer fichero HTML para empezar a guardar los cambios. Este código debería ser suficiente para empezar:

Código inicial del tutorial

Como puedes ver, de momento, nada mágico. Internamente sí que han pasado cosas, Git ya ha detectado que no tiene constancia de que ese fichero exista. Lo puedes comprobar con este comando:

$ git status

Debería mostrarte algo así:

Git status

Analicemos el resultado linea por linea:

  • On branch master
    Esta es la rama de desarrollo actual, ya habíamos hablado de ellas en el artículo Necesitas aprender a usar Git, igualmente las veremos más adelante, no te preocupes por ahora.
  • Initial commit
    El repositorio todavía no tiene constancia de ningún cambio en nuestro código, así que entiende que, lo que le enviemos ahora, será el commit inicial.
  • Untracked files
    Este es un listado de ficheros que no conoce el repositorio. Git te va a separar estos ficheros, del listado de ficheros modificados, que verás en seguida.
  • Nothing added to commit but untracked files present
    Nada más que le hemos pedido a Git el estado del repositorio, no le hemos añadido ningún fichero y nos está diciendo que tenemos cambios pendientes.

Vamos a presentarle al repositorio nuestro fichero index.html:

$ git add index.html

Veamos qué nos dice ahora git status.

Comando Git Add y Git Status

Git nos sigue poniendo el mensaje Initial commit, porque todavía no hemos guardado nada en la base de datos, simplemente le hemos pedido que tenga en cuenta este fichero a la hora de hacer nuestro primer commit. Además, ahora nos muestra el mensaje Changes to be commited, con el listado de ficheros que va a incluir. ¡Vamos a enviar nuestros cambios!

$ git commit -m "Commit inicial"

Comando git commit

Genial, ahora Git nos está dando estadísticas sobre lo que acaba de ocurrir. "master" es la rama de desarrollo en la que estamos trabajando, verás también una referencia al commit con caracteres y números aleatorios y, al final de la linea, el mensaje de información con el que hemos guardado los cambios.

Debajo, una linea nos está diciendo la cantidad de ficheros que se han modificado (uno, en este caso), y un resumen de los cambios (se han añadido 11 lineas de código). Al ser un fichero nuevo, en la última linea también nos explica qué fichero ha sido creado y los permisos que se le han asignado. Los permisos quedan fuera de este tutorial, pero te remito al artículo de la Wikipedia, por si tienes curiosidad.

Resumiendo, los comandos que has utilizado son git status, para ver los cambios pendientes, git add <fichero>, para que Git tenga en cuenta esos ficheros a la hora de hacer el próximo git commit -m "<Mensaje de información>".

A estas alturas, supongo que tienes bastante con intentar aprender Git como para que yo me ponga quisquilloso acerca de cómo debes escribir tus lineas de comentarios en los commits. En general, los comentarios se escriben en inglés, con un límite de 50 caracteres y en presente como forma verbal. En este tutorial sin embargo, por comprensión, los pondremos en español.

En un mundo ideal, las webs no necesitarían modificaciones, en la vida real, tendremos que ir modificándola constantemente. Vamos a ello.

Uso de ramas de desarrollo, branch

Sería una locura trabajar directamente en la rama master por muchos motivos, como la cantidad de conflictos con los que te encontrarías al trabajar en equipo. Git es extremadamente flexible en este aspecto, permitiendo flujos de trabajo con ramas estables, ramas de desarrollo, ramas para de pruebas pre-lanzamiento, etc. Para no liarte demasiado, vamos a empezar creando una rama de corta duración para hacer unos cambios puntuales. Luego profundizaremos un poco más con las ramas de larga duración.

Si queremos ver un listado de todas las ramas que tenemos en nuestro repositorio, usamos el comando git branch:

Comando git branch

Como estándar, la rama master se usa únicamente para el código estable (o en el mundo web, se refiere al código que tenemos subido en el servidor público, que llamamos producción). En este caso, al ser un repositorio nuevo, nada más que nos encontramos con esa rama precedida de un asterisco, que indica que es la rama activa.

Como vamos a modificar nuestro HTML para crear unos cuantos estilos CSS, vamos a preparar una rama llamada estilo, en la que podamos hacer nuestras modificaciones. Simplemente escribiremos git branch <nombre-de-la-rama> para generarla y luego, para activarla, git checkout <nombre-de-la-rama>:

Comandos branch y checkout

Fíjate que al hacer git branch de nuevo, esta vez vemos que el asterisco se encuentra en la rama estilo. ¡Ya podemos empezar a hacer los cambios!.

Cambios iniciales en los estilos

Ya estoy escuchando los gritos... "¿Estilos incrustados?, ¿en serio?". Tranquilidad, es un ejemplo y en breve refactorizaremos.

Si te fijas en el pantallazo, mi editor soporta los cambios que detecta Git y las lineas de la 7 a la 10 tienen algunos símbolos adicionales. El primer símbolo te avisa que esa linea existía previamente, mientras que el símbolo de suma dice que esa linea ha sido añadida. ¿Qué dirá git status?:

Otro pantallazo de git status

Esta vez Git nos está diciendo que hay un fichero que ha sido modificado, pero todavía no lo hemos añadido a la lista de ficheros a enviar en el commit. En la vida real, se dará el caso en el que tengas unos cuantos ficheros modificados pero únicamente quieras enviar algunos en un commit concreto y otros en otro. Por curiosidad, vamos a ver qué ha sido modificado con el comando git diff:

Comando git diff

Si queremos añadir todos los ficheros que nos muestra git status al commit, podemos usar el comando git add con un punto al final:

$ git add .

Esto le dirá a Git que incluya todos los cambios del directorio en el que estamos, y todos los subdirectorios. Podríamos delimitar a todos los ficheros de un directorio concreto usando git add <directorio>, incluirá también todos sus subdirectorios. Envía el commit, ¡no seas tímido!

Git add, git commit

Comprobando que cada rama de desarrollo es un mundo a parte

Ahora tienes que hacer un experimento, cambiando de rama en rama para ver qué cambia. Recuerda que el comando git branch te mostrará la lista de ramas de desarrollo que tienes y git checkout <rama> te enviará, cual Tarzán, a la que quieras. Para no cometer errores ni hacer chapuzas en el repositorio, es importante que, antes de moverte entre ramas, git status te diga que tu repositorio está limpio.

$ git status
On branch estilo
nothing to commit, working directory clean

Al igual que en la autoescuela te dicen que las lineas continuas de la carretera son muros imaginarios para tu coche, en Git, no cambies entre ramas si el estado no es limpio, ¿vale? ;-)

Échale un ojo al navegador, deberías ver algo así:

Web hola mundo, con fondo negro

Ahora vamos a cambiar a la rama master, con este comando:

$ git checkout master

Refresca el navegador y... ¡sorpresa!:

Web Hola Mundo con fondo blanco

Exacto, tu web vuelve a estar como antes de haberle hecho las modificaciones. Como te puedes imaginar, puedes volver al estado en que se encontraba la web en cualquier momento que tu quieras, de ahí la importancia de elegir buenos mensajes a la hora de asignárselos al comando git commit -m "<mensaje>". Para aplicar finalmente los cambios en la rama principal, master, tendremos que usar el comando git merge, que viene a ser algo así como "fundir" o "fusionar".

$ git merge --no-ff estilo

Como ves, el comando sería git merge <opciones> <rama que queremos fusionar a la actual>. Con el parámetro --no-ff le pedimos que mantenga la estructura de nuestras ramas en el registro, así podremos movernos por nuestro repositorio más adelante con mayor facilidad.

Especificar un mensaje en Git merge

Se nos abrirá nuestro editor por defecto para configurar el mensaje que debe aparecer en el registro, con dejarlo tal y como está generalmente es suficiente. Al cerrar el editor, seguidamente veremos la salida final de la fusión, con todos los ficheros que se han modficado.

Salida del comando Git merge

¡Felicidades!, si has llegado hasta aquí, espero que hayas pillado los conceptos básicos acerca de git. Si refrescas de nuevo tu navegador, volverás a ver el fondo negro.

Refactorizando un poco

Tal y como hemos visto, necesitamos mejorar el código, quitando las cosas innecesarias y puliendo la manera en la que hacemos las cosas. A esto se le llama refactorizar. Nuestro objetivo ahora es quitar los estilos incrustados y externalizarlos en un fichero CSS. Además, crearemos otra rama de larga duración, que llamaremos "develop" (desarrollo). Todos los nuevos cambios que hagamos los fusionaremos a esta nueva rama y, cuando estemos listos y comprobemos que todo funciona bien, los fusionaremos en master.

Un atajo para crear un branch nuevo, directamente en una linea:

$ git checkout -b develop

Git checkout a una nueva rama

Este comando crea una nueva rama y nos mueve a ella. Como podemos comprobar al ejecutar git branch, el asterisco se encuentra en develop.

Ya no necesitamos la rama estilo, ¿cómo la borramos?.

$ git branch -d estilo

Git branch delete

Perfecto, ahora vamos a crear una rama de corta duración que salga desde develop, para hacer nuestros cambios de refactorización allí. Como somos más internacionales que nadie, la llamaremos refactor, usando nuestro atajo.

$ git checkout -b refactor

Seguidamente, vamos a crear un directorio llamado css, donde meteremos nuestros estilos y haremos los cambios que queremos, algo así quedaría el fichero index.html:

HTML refactorizado

Y así el fichero styles.css, que está dentro del directorio css:

Fichero CSS

Analicemos el resultado del comando git status:

Git status con directorios

Como puedes ver, Git todavía no conoce el directorio css (ni sus contenidos), pero sí que nos dice que el fichero index.html ha sido modificado de nuevo. Primero vamos a añadir el directorio css y lo vamos a enviar en un commit:

$ git add css
$ git commit -m "Add css folder and file"

Ahora que ya existen los estilos en un fichero a parte, podemos añadir y enviar el fichero index.html:

$ git add index.html
$ git commit -m "Use external styles"

Ya estás hecho un maestro de Git por lo que, como habrás adivinado, en lugar de hacerlo commit a commit, todo esto se puede hacer en una única linea:

$ git commit -am "Externalize styles"

Este comando usa el argumento "-am", -a para All (todos los ficheros nuevos y modificados) y -m (para especificarle el mensaje). Personalmente te recomiendo comprobar qué cambios vas a meter en el commit con un git status, para evitar meterle basura al repositorio sin darte cuenta. Como dicen los carpinteros, mide dos veces, corta una.

En este punto tu repositorio debería tener el estado de clean (limpio), por lo que podemos volver a la rama develop (desarrollo):

$ git checkout develop

Fusionamos los cambios tal y como hicimos anteriormente:

$ git merge --no-ff refactor

Acuérdate que te saldrá una ventana de editor para especificarle el mensaje del commit, en cada fusión. Repetimos el proceso para fusionar estos cambios con la rama master (la rama estable, o de producción):

$ git checkout master
$ git merge --no-ff develop
$ git log --graph --oneline --decorate

Git tree con todos los cambios

¡Fenomenal!, ahí puedes ver todo el registro de cambios que has ido haciendo :)

Interfaces para Git

Ahora que sabes cómo empezar a trabajar con Git, conviene echarle un ojo a algunas utilidades que te pueden hacer la vida más fácil a la hora de moverte por el historial.

Gitk

La primera herramienta que te puede salvar la vida es gitk, que viene con el paquete de instalación de Git. Simplemente escribe el comando gitk en el terminal y te saldrá la ventana del repositorio actual. Opcionalmente le puedes pasar como parámetro el nombre de un fichero, para ver únicamente el registro de éste.

Usando Gitk

Otras herramientas

Ahora que ya sabes usar Git desde un terminal, y te recomiendo que sigas haciéndolo así, le puedes echar un ojo a aplicaciones con interfaz. Personalmente la que más me gusta es SourceTree, aunque también existe la aplicación oficial de GitHub (Windows / Mac). ¡Para gustos colores!

Siguientes pasos

Todo este tutorial está muy bien, incluso aunque no trabajes en un equipo con varios desarrolladores. En siguientes artículos aprenderemos a colaborar con otras personas usando un repositorio remoto, viendo las alternativas que hay en el mercado. Sigue por aquí: Usando Git con tus compañeros de trabajo.

¿Tienes alguna duda?, ¿se podría mejorar este tutorial?, ¡sígueme en Twitter (@PiradoIV) y hablamos!

Comentarios

Añadir nuevo comentario

Plain text

  • No se permiten etiquetas HTML.
  • Las direcciones de las páginas web y las de correo se convierten en enlaces automáticamente.
  • Saltos automáticos de líneas y de párrafos.