Comenzando con Git - Shopihunter

Si estás leyendo este blog, es probable que en los últimos años hayas escuchado el término Git . Los diseñadores y desarrolladores de todo tipo usan Git para hacer que el código que escriben sea lo mejor posible al versionarlo. No es necesario ser programador de ningún tipo para usar Git. De hecho, Git funciona para todos los tipos de archivos, por lo que si es escritor, blogger, diseñador o casi cualquier cosa relacionada con la informática, los activos que cree se pueden versionar con Git.

Si eres nuevo en Git, este tutorial es para ti. Cubrirá los conceptos básicos de qué es Git y cómo puede usarlo en su flujo de trabajo. Aunque Git utiliza la línea de comandos para realizar sus operaciones. Hay nuevas aplicaciones disponibles que ofrecen una GUI (interfaz gráfica de usuario) para la aplicación. A los efectos de este tutorial, utilizaremos un editor de línea de comandos como Terminal en Mac. Git está disponible en cualquier plataforma. También debería poder usar los comandos que git ha establecido en cualquier plataforma.

Descripción general

¿Qué es Git?

Git es un sistema de control de versiones de código abierto gratuito diseñado para manejar todo, desde proyectos pequeños hasta grandes, con una velocidad asombrosa.

Al comenzar, muchas personas confundirán Git con Github . Pero esas dos cosas son en realidad muy diferentes. Git es un sistema de control de versiones local . Por local quiero decir que su instalación de Git permanece en el sistema en el que la instaló. Hablaré más de Github más adelante en este tutorial.

Una gran razón por la que la gente usa Git es para trabajar en equipo. Cada miembro del equipo normalmente quiere los activos más actualizados con cualquier proyecto en el que esté trabajando. Si usan Git, cada miembro puede obtener acceso a los cambios más recientes y resolver cualquier conflicto al trabajar en colaboración. Ya sea que esté en un equipo o no, Git es una gran adición a su flujo de trabajo que debería usar.

¿Qué es el control de versiones?

El control de versiones es un sistema que registra los cambios en un archivo o conjunto de archivos a lo largo del tiempo para que pueda recuperar versiones específicas más adelante.

Piense en Git como un complemento de captura de pantalla. Cuando edita un documento de cualquier tipo, Git está atento a los cambios que realiza. En cualquier momento, puede preguntarle a Git qué cambios se han realizado y confirmar esos cambios para mantener una captura de pantalla actualizada de su código. Este proceso es similar a actualizar cualquier archivo en su computadora y presionar guardar.

Donde Git sobresale en este escenario es que con cada guardado hay una versión a la que se puede acceder en cualquier momento.

Beneficios de usar Git

Hay tantos beneficios de usar Git que hay demasiados para enumerarlos, pero algunos que se destacan son

Copias de seguridad de todos sus archivos de principio a fin
No más convenciones de nomenclatura de archivos incómodasnew-document-copy-v2.html
No solo para el código (se puede versionar cualquier tipo de archivo).
Colaboración amigable: trabaje en el mismo código dentro de un equipo sin importar dónde se encuentre.
Huella diminuta con rendimiento rápido: Git ocupa poco espacio dentro de la carpeta raíz de sus proyectos
Capacidades de bifurcación y fusión: haga copias de su repositorio Git existente y modifíquelo sin afectar la versión maestra

Instalando Git

Para instalar Git, diríjase a http://git-scm.com y busque el botón de descarga. La primera vez que instales Git será como cualquier otra instalación que hayas hecho en el pasado. Siga los pasos del asistente de instalación hasta que finalice. Dependiendo de su sistema operativo, debería haber opciones para cualquier plataforma que use. En el momento de escribir este artículo, instalaremos git-1.9.2para Mac. Si está en Windows, consulte mysysgit y si está en Linux, simplemente puede ejecutar apt-get install-git-core.

Si necesita más ayuda con la instalación, visite la página de inicio de git o lea el libro Pro Git gratis en línea.

Página de inicio de Git

A medida que se completa nuestra instalación, recibimos un mensaje de éxito.

Pantalla de éxito de instalación de Git.

Con git instalado, ahora puede verificar usando la línea de comando. Abra la aplicación de línea de comandos de su elección y escriba lo siguiente:

$ git --version

Nota: el signo de dólar ( $ ) antes de «git –version» anterior simplemente indica que estamos trabajando dentro de un editor de línea de comandos. No es necesario copiar y pegar este carácter al usar este código. Se usa simplemente como un marcador de posición de contexto.

Si todo funcionó correctamente, su línea de comando debería haber devuelto el código

git version 1.9.2

Configuración por primera vez

Ahora que tiene git en su sistema, probablemente querrá personalizar su entorno Git. Git viene con una herramienta llamada git configque te permite obtener y establecer tus variables de configuración personal. Esto le permite personalizar la apariencia y el funcionamiento de Git en función de sus necesidades específicas.

Configuración de identidad

Para establecer su identidad, escriba los siguientes comandos con sus propias credenciales:

$ git config --global user.name "John Doe"
$ git config --global user.email johndoe@example.com

El -globalcódigo anterior le permite configurar estos parámetros para todo su sistema para que no necesite volver a configurar esto para cada nuevo proyecto en el que trabaje.

Con estos parámetros guardados, puede verificarlos ejecutando

$ git config --list

Su editor debería generar algo similar a lo siguiente:

credential.helper=osxkeychain
user.email=johndoe@example.com
user.name=John Doe
filter.media.clean=git-media-clean %f
filter.media.smudge=git-media-smudge %f
core.excludesfile=/Users/johndoe/.gitignore_global
push.default=matching
core.repositoryformatversion=0
core.filemode=true
core.bare=false
core.logallrefupdates=true
core.ignorecase=true
core.precomposeunicode=true

Usando Git

¡Git está funcionando! ¿Ahora que? Vamos a crear un archivo de muestra dentro de una carpeta en nuestro escritorio. Puede hacer esto de varias maneras, pero usemos el poder de la línea de comando para crear una carpeta en nuestro escritorio e inicializar un repositorio git dentro de ella.

Aquí cambiamos nuestro directorio o cd a la carpeta del escritorio.

$ cd /Users/andyleverenz/Desktop

A continuación, hagamos una carpeta llamada GitSample usando el mkdircomando.

$ mkdir GitSample

Si observa su escritorio, ahora debería ver una nueva carpeta llamada GitSample.

Cambiemos los directorios para estar dentro de la carpeta GitSample. Escriba el comando a continuación:

$ cd GitSample

Ahora deberías estar dentro de la carpeta GitSample . Puede abrir esta carpeta en un editor de código (como Sublime Text , TextMate, Dreamweaver, etc.) para aquí o puede crear el archivo como lo haremos nosotros a través de la línea de comandos en una Mac. Escriba el comando a continuación:

$ touch git_sample.html

Nuestra nueva carpeta titulada GitSample ahora tiene el contenido de un archivo HTML llamado git_sample.html.

Nuestra carpeta de proyectos

Cambiando archivos

Agreguemos algo de HTML básico a nuestro nuevo archivo. Agregue las líneas a continuación y guarde los cambios. Nuevamente, siéntase libre de usar cualquier editor de código de su elección.

<html>
    <head>
        <title>Git Sample Page</title>
    </head>
    <body>
        <h1>Git Sample Page</h1>
        <p>Our sample Git project file</p>
    </body>
</html>

Si obtiene una vista previa del código en su navegador, puede ver que es bastante sencillo. No nos preocuparemos demasiado por diseñar esta página ya que no es el objetivo de este tutorial.

Nuestra página HTML de muestra dentro de un navegador.

Inicializar un repositorio

Con un archivo y una carpeta en su lugar, ahora podemos utilizar el poder de Git. Con su editor de línea de comandos aún abierto y dentro de la carpeta de su proyecto, escriba el siguiente comando:

$ git init

Su editor debería devolver algo similar a:

Initialized empty Git repository in /Users/andyleverenz/Desktop/GitSample/.git/

Lo que hicimos aquí fue crear un nuevo repositorio vacío dentro de la carpeta de nuestro proyecto. Si mira dentro de su carpeta en su escritorio, no verá los nuevos archivos y carpetas relacionados con git. Estos son archivos invisibles en su sistema y es probable que nunca necesite editarlos.

Con git habilitado, agreguemos algo de contenido a nuestro archivo HTML. Cambie el contenido de la siguiente manera:

<html>
    <head>
        <title>Git Sample Page</title>
    </head>
    <body>
        <h1>Git Sample Page</h1>
        <p>Our sample Git project file</p>
        <p>Git is awesome!</p>
    </body>
</html>

Guarde su archivo y regrese a su editor de línea de comandos. Escriba el comando a continuación:

$ git status

Su editor debería devolver:

On branch master
 
Initial commit
 
Untracked files:
  (use "git add <file>..." to include in what will be committed)
 
    git_sample.html
 
nothing added to commit but untracked files present (use "git add" to track)

Después de que cambiamos y guardamos nuestro archivo, Git se encargó de detectar estos cambios. Hará esta acción para cualquier archivo modificado en un proyecto determinado en cualquier momento dado. Git también rastreará los archivos recién creados, así como los archivos eliminados.

Archivos de ensayo

El siguiente paso en nuestro flujo de trabajo es organizar los archivos. La puesta en escena de los archivos los configura para ser confirmados o «capturados», como mencioné anteriormente. Después de llegar a un buen punto en su proyecto, puede preparar y confirmar sus archivos para crear una nueva versión para consultar más adelante si es necesario.

Para poner en escena nuestro proyecto, escriba este comando:

$ git add --all

Aquí añadimos todo nuestro proyecto al área de ensayo. si escribes

$ git status

su editor ahora debería regresar

On branch master
 
Initial commit
 
Changes to be committed:
  (use "git rm --cached <file>..." to unstage)
 
    new file:   git_sample.html

Confirmar archivos

Con nuestro archivo preparado, finalmente podemos confirmarlo. Ejecute el siguiente código:

$ git commit -m "Initial Commit"

El git commitcomando captura nuestro código en su estado actual y el -mcarácter es simplemente un mensaje de lo que se está cambiando. Con cada confirmación, deberá incluir un mensaje que resuma sus cambios para ayudarlo a hacer referencia a sus versiones en el futuro.

Su editor debería haber generado algo similar a:

[master (root-commit) ceb271b] Initial Commit
 1 file changed, 10 insertions(+)
 create mode 100644 git_sample.html

Si es la primera vez que usa Git, ¡felicidades por su primer compromiso! Podemos verificar nuestro compromiso escribiendo:

$ git log

Git log devuelve el código como se muestra a continuación. El suyo será diferente según las credenciales con las que configuró Git.

commit ceb271b881777948d5e879df2a6114283053e622
Author: John Doe <johndoe@example.com>
Date:   Sun Jun 29 11:42:10 2014 -0500

Avanzando con nuestro proyecto

Utilicemos Git un poco más. Agregaré una hoja de estilo a nuestro proyecto y la vincularé a nuestro archivo HTML para agregar un estilo básico.

Los cambios en nuestro archivo HTML se encuentran a continuación:

<html>
    <head>
        <title>Git Sample Page</title>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <h1>Git Sample Page</h1>
        <p>Our sample Git project file</p>
        <p>Git is awesome!</p>
    </body>
</html>

También agregué un nuevo archivo a nuestra carpeta de proyecto llamado style.css.

Agregamos nuestro archivo style.css para que nuestro proyecto ahora se vea como el anterior.

Dentro de nuestro style.cssarchivo, he agregado el siguiente código:

body {
    font-family: Arial, sans-serif;
    font-size: 16px;
    background: PowderBlue;
}

Nuestra página ahora se ve un poco más estilizada.

Nuestro proyecto actualizado con los últimos HTML y CSS.

Preparemos y confirmemos nuestros cambios con Git. Regrese a su editor de línea de comando y escriba:

$ git status

Comprobamos el estado de nuestro proyecto. Su editor debe generar el siguiente código:

On branch master
Changes not staged for commit:
  (use "git add <file>..." to update what will be committed)
  (use "git checkout -- <file>..." to discard changes in working directory)
 
    modified:   git_sample.html
 
Untracked files:
  (use "git add <file>..." to include in what will be committed)
 
    style.css
 
no changes added to commit (use "git add" and/or "git commit -a")

¿Notó cómo git encontró nuestro nuevo style.cssarchivo y vio los cambios realizados en nuestro git_sample.htmlarchivo? ¡Impresionante!

Usemos un nuevo comando para preparar y confirmar nuestros archivos, todo en una línea

$ git commit -am "Stylesheet added"

Su editor debería generar algo como lo siguiente:

[master 362760b] Stylesheet added
 1 file changed, 1 insertion(+)

La única línea que escribimos fue solo una versión condensada de lo que escribimos anteriormente que tomó dos pasos. Esto es útil si desea actualizar todos los archivos dentro de su proyecto, pero hay momentos en los que puede querer preparar y confirmar archivos individuales y no otros. Puede hacerlo escribiendo algo como a continuación:

$ git add index.html
$ git add style.css
$ git commit -m "Sample commit"

El resultado le diría a Git que solo versione los dos archivos anteriores index.htmly style.css. Bastante genial, ¿verdad?

Veamos nuestro registro nuevamente para ver las últimas confirmaciones:

$ git log

Ahora debería ver dos confirmaciones similares al siguiente código:

commit 362760b4739b5a654e60554614b59cc96746dafa
Author: John Doe <johndoe@example.com>
Date:   Sun Jun 29 12:12:50 2014 -0500
 
    Stylesheet added
 
commit ceb271b881777948d5e879df2a6114283053e622
Author: John Doe <johndoe@example.com>
Date:   Sun Jun 29 11:42:10 2014 -0500
 
    Initial Commit

Derivación

Con Git puedes hacer una copia de tu proyecto y usarlo sin afectar tu versión maestra. Git ofrece un branchcomando para hacer todo esto en un solo paso. Hagamos que se llame una rama testingy cambiemos a ella.

$ git branch testing
$ git checkout testing

o falto de personal

[/php]$ git checkout -b pruebas[/php]

Tu editor debería volver

Switched to branch 'testing'

Los comandos anteriores crearon una nueva rama llamada testing y cambiaron a ella desde nuestra rama principal. Si tu corres

$ git branch

su editor debe devolver tanto la masterrama como la testingrama que acabamos de crear. Cada rama en este punto son duplicados exactos. En cualquier momento puede cambiar entre las dos ramas. Una buena razón para trabajar con sucursales es depurar código, probar algo nuevo con código existente y mucho más.

Hagamos un cambio en nuestro código. Digamos que queremos eliminar algún código de nuestro archivo HTML. Hagámoslo a continuación:

<html>
    <head>
        <title>Git Sample Page</title>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <h1>Git Sample Page</h1>
        <p>Our sample Git project file</p>
    </body>
</html>

Todo lo que hicimos fue eliminar la segunda petiqueta en la página. Con nuestros cambios en su lugar, fusionemos nuestra rama con nuestro maestro para tener nuestro código actualizado. Antes de fusionarnos, debemos realizar una confirmación para que Git sepa de los cambios.

$ git commit -am "Modified git_sample.html"

Entonces ahora su editor debería generar

[testing 30f98d0] Modified git_sample.html
 1 file changed, 1 deletion(-)

Observe que nuestra rama testingahora se está emitiendo en lugar de mastercomo antes.

Con nuestros cambios confirmados, fusionemos nuestra rama de prueba con nuestra rama maestra para actualizar nuestra maestra, ya que el código dentro de la testingrama es cómo queremos que se guarde nuestro código. Para fusionar nuestros cambios, escriba los comandos a continuación:

$ git checkout master
$ git merge testing

su editor primero debe decirle que ha cambiado a la rama maestra y luego generar

Updating 362760b..30f98d0
Fast-forward
 git_sample.html | 1 -
 1 file changed, 1 deletion(-)

Git notó que modificamos nuestro HTML eliminando algo de código.

Volver a una versión anterior

Si decide que no está satisfecho con los archivos en los que está trabajando y desea volver a una confirmación específica, Git lo permite. La mejor manera de volver atrás es ejecutar:

$ git log

y observe las identificaciones más largas únicas para cada confirmación. Copiemos y peguemos uno que hicimos antes (el suyo será diferente pero similar) y usémoslo para volver escribiendo:

$ git revert --no-commit 30f98d01a24a51a8f0aa608ecf6f1fc5f93b5c33

Esto parece complicado, pero solo tendrás que copiar y pegar. Dentro de cada ID hay un mensaje de confirmación en el que escribimos que le ayuda a saber a qué está cambiando de nuevo. Si ejecutó el comando anterior, ahora debería notar que el HTML ha vuelto automáticamente a lo que tenía antes.

<html>
    <head>
        <title>Git Sample Page</title>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <h1>Git Sample Page</h1>
        <p>Our sample Git project file</p>
        <p>Git is awesome!</p>
    </body>
</html>

Dado que decidimos que nos gusta más nuestro código de esta manera, después de todo, todavía tenemos que comprometernos. Si alguna vez no está seguro de estar al día con sus confirmaciones, puede ejecutar $ git statusy Git se lo hará saber. Confirmemos nuestros cambios.

$ git add git_sample.html
$ git commit -m "Reverted back to original"

Github

Github.com

Github se confunde comúnmente con Git, pero ahora que ha escrito algunos de los comandos de git más comunes, puedo explicarle mejor que todos los cambios que hemos realizado han sido locales. Github está en vivo en la web. Github trabaja con git para impulsar sus cambios en vivo para permitir aún más versiones guardadas de sus archivos. Para impulsar sus cambios en vivo, primero debe crear un repositorio de Github.

Primeros pasos

Para usar Github.com necesitarás una cuenta. Puedes registrarte gratis en github.com . Una vez que se registre, deberá crear un repositorio desde su área de administración. Busque un botón verde a la derecha de su suministro de noticias y haga clic en él. Llamemos a este repositorio GitSample .

Para el campo de descripción, simplemente puede agregar «Repo para comenzar con Git» . No te preocupes por el resto de opciones por ahora. A continuación, haga clic en Crear repositorio .

Con su repositorio creado, debería ver una pantalla similar a la mía a continuación:

Nuestro nuevo repositorio creado en Github.

Empujando a GitHub

Git le brinda instrucciones para crear un proyecto completamente nuevo o enviar uno existente a su repositorio recién creado. Elegiremos impulsar nuestro repositorio local existente para que esté en vivo en Github. En su editor de línea de comandos, escriba:

$ git remote add origin https://github.com/USERNAME/GitSample.git
$ git push -u origin master

Su editor puede pedirle la contraseña de su sistema o un error debido a que no tiene el acceso SSH correcto. Puede crear claves SSH para permitirle el acceso a Github. Esto debe hacerse una vez y se le debe otorgar acceso cada vez que lo complete. Para agregar una clave SSH, deberá visitar la configuración de su cuenta . Mientras está adentro, busque en la barra lateral izquierda las claves SSH. Puede agregar uno nuevo para el sistema en el que está trabajando actualmente si no ha agregado uno antes.

Agregar sus claves SSH permite un acceso rápido a Github cuando trabaja con Git.

Si los comandos anteriores funcionaron correctamente, su editor debería haber generado algo como:

Counting objects: 14, done.
Delta compression using up to 8 threads.
Compressing objects: 100% (11/11), done.
Writing objects: 100% (14/14), 1.36 KiB | 0 bytes/s, done.
Total 14 (delta 2), reused 0 (delta 0)
To https://github.com/USERNAME/GitSample.git
 * [new branch]      master -> master
Branch master set up to track remote branch master from origin.

Si navega a su repositorio en vivo en Github, ahora debería ver los cambios realizados en vivo.

Nuestro repositorio local ha sido enviado a nuestra copia en vivo en nuestra cuenta de Github.

Hagamos un par de cambios más en nuestro proyecto. Quiero agregar una línea más de texto en nuestro archivo HTML y modificar nuestro color de fondo dentro de nuestra hoja de estilo. A continuación se muestra el código actualizado para cada archivo.

<!-- git_sample.html-->
<html>
    <head>
        <title>Git Sample Page</title>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <h1>Git Sample Page</h1>
        <p>Our sample Git project file</p>
        <p>Git is awesome!</p>
        <p>Github is awesome too!</p>
    </body>
</html>

/* style.css */
body {
    font-family: Arial, sans-serif;
    font-size: 16px;
    background: Tomato;
}

Confirmemos nuestros cambios localmente y luego los enviamos a Github también.

$ git add .
$ git commit -m "Updated html and styles"
$ git push

En tres líneas de comandos, organizamos con éxito nuestros cambios, los confirmamos localmente y enviamos la misma confirmación a nuestro repositorio en vivo en Github. Nuestra página web ahora muestra nuestros últimos cambios:

Nuestro proyecto actualizado con los últimos HTML y CSS.

Nuestros cambios también se muestran dentro de nuestra cuenta de Github.

Nuestras últimas confirmaciones en vivo en Github.

Conclusión

Hemos recorrido un largo camino explorando qué es Git, cómo se usa y qué tan poderoso puede ser. Nuestro tutorial fue un ejemplo de trabajo bastante minucioso del poder que tiene Git cuando trabaja con proyectos mucho más grandes. Solo he roto la superficie al comenzar con Git. Si desea obtener más información sobre Git o desea aprender a usarlo con un equipo, consulte estos enlaces.

Recursos útiles

Sitio web oficial de Git
ProGit Book : ¡léalo en línea gratis!
Pruebe Git : un tutorial interactivo que es un excelente punto de partida para

las personas nuevas en Git
Ayuda de Github : excelentes recursos para aprender a usar GitHub con Git
Github GUI Application: Mac : use una aplicación de interfaz gráfica para usar Git
Github GUI Application: Win : Use una aplicación de interfaz gráfica para usar Git

¿Qué es Git?

¿Qué es el control de versiones?

Beneficios de usar Git

Instalando Git

Configuración por primera vez

Configuración de identidad

Usando Git

Cambiando archivos

Inicializar un repositorio

Archivos de ensayo

Confirmar archivos

Avanzando con nuestro proyecto

Derivación

Volver a una versión anterior

Github

Primeros pasos

Empujando a GitHub

Conclusión

Recursos útiles

Publicaciones relacionadas: