Antes de comenzar con este tema, recuerda que primero necesitas instalar y configurar git, por lo que si no lo has hecho, revisa primero ese artículo. Además, necesitarás tener un poco de experiencia moviéndote por carpetas en una terminal.
Espacio de trabajo
Siempre que trabajemos con proyectos se recomienda tener un espacio de trabajo. Esto no es más que una carpeta especial de nuestro sistema donde se guarden las carpetas de todos nuestros proyectos. Por lo general, esto se suele llamar nuestro workspace (espacio de trabajo).
Por ejemplo, si mi usuario es manzdev, mi espacio de trabajo sería /home/manzdev/workspace/ y en su interior tendría las carpetas de cada proyecto. El nombre de la carpeta workspace no debe ser ese obligatoriamente, puedes llamarlo como quieras, aunque en este curso lo denominaremos así.
Crear un nuevo repositorio
Vamos a comenzar con un proyecto vacío desde cero. Crearemos una carpeta llamada manzdev-project que será el nombre de nuestro proyecto.
Es conveniente elegir bien el nombre de nuestro proyecto e intentar que sea el mismo que el nombre del futuro repositorio de GitHub. Utiliza minúsculas, no uses puntuación ni carácteres especiales y si tienes que separar usa guiones normales.
Para empezar creamos la carpeta y accedemos a ella:
$ mkdir manzdev-project
$ cd manzdev-project
Ahora, en el interior de la carpeta crearemos con nuestro editor de archivos preferido varios archivos para nuestro proyecto. Simplemente es para tener contenido y guardarlo en nuestro proyecto. Con 2 o 3 archivos con algunas líneas de texto en su interior bastará.
Por ejemplo, edita los siguientes ficheros y escribe un par de líneas en su interior:
$ vim index.html
$ vim index.css
$ vim index.js
$ vim README.md
Si lo deseas puedes utilizar nano en lugar de vim, u otro editor de tu preferencia.
Hasta ahora tenemos una carpeta con nuestro proyecto, pero aún no hemos inicializado nuestro proyecto de git. Para ello, vamos a escribir lo siguiente desde el interior de la carpeta de nuestro proyecto:
$ git init
Inicializado repositorio Git vacío en /home/manzdev/workspace/manzdev-project/.git/
Esta simple acción ha creado una carpeta oculta .git/ en nuestro proyecto, donde comenzará a guardar los cambios que hagamos a partir de ahora. Se dice que ya tenemos inicializado nuestro repositorio local. Aunque como veremos a continuación, aún esta vacío.
Comprobar nuestro repositorio
Ahora que nuestro repositorio está inicializado, vamos a comprobar su estado, ya que al inicializarlo lo único que hacemos es crear un repositorio vacío que aún no está vigilando ninguno de los cambios que hacemos.
Vamos a ejecutar el comando git status para ver su estado:
$ git status
En la rama main
No hay commits todavía
Archivos sin seguimiento:
(usa "git add <archivo>..." para incluirlo a lo que será confirmado)
README.md
index.css
index.html
index.js
no hay nada agregado al commit pero hay archivos sin seguimiento presentes
(usa "git add" para hacerles seguimiento)
Aquí tenemos bastante información. Habla de una rama main. Esto es una parte muy importante y hablaremos de ello más adelante, sin embargo, de momento lo obviaremos ya que no es necesario profundizar de momento. También habla de commits, un concepto que veremos más adelante.
Al hacer un git status, git está comparando el estado de nuestros ficheros y carpetas con el estado del repositorio local. Como este repositorio local está vacío (lo acabamos de inicializar), va a detectar en rojo todos los ficheros de nuestro proyecto, que aún no forman parte del repositorio porque no están siendo vigilados.
Añadir archivos al repositorio
Nuestro repositorio actualmente está vacío y no está vigilando los cambios de ningún archivo, así que vamos a marcar los archivos que queremos vigilar:
$ git add index.html
$ git add index.css
Observa que hemos añadido sólo los archivos index.html y index.css. Si volvemos a hacer un git status nos mostrará algo similar a lo siguiente:
$ git status
En la rama main
No hay commits todavía
Cambios a ser confirmados:
(usa "git rm --cached <archivo>..." para sacar del área de stage)
nuevos archivos: index.css
nuevos archivos: index.html
Archivos sin seguimiento:
(usa "git add <archivo>..." para incluirlo a lo que será confirmado)
README.md
index.js
Observa que ahora los archivos añadidos aparecen en verde (cambios a ser confirmados) y los que no estamos vigilando aparecen en rojo (archivos sin seguimiento).
Es importante entender que los archivos en verde están siendo vigilados, y los archivos en rojo no están siendo vigilados. Pero aún ninguno de los dos está guardado en el repositorio local, para ello, hay que hacer un commit.
Algo que se hace muy frecuentemente es escribir
git add .. Esto significa que añada todos los archivos y carpetas de la ruta actual. Es una forma rápida de añadir todos los cambios. Ahora que estamos empezando, no lo hagas salvo que sepas exactamente lo que está ocurriendo.
Hacer commits en el repositorio
Una vez tenemos vigilados los archivos que queremos incluir en nuestro repositorio, debemos hacer un commit. Los commits (del inglés comprometerse, realizar) es el término que se usa para establecer un punto de control de cambios, es decir, guardar los cambios de los ficheros vigilados en el repositorio local.
Antes de hacer este commit, primero siempre se recomienda hacer un git status para asegurarse de que todo está como queremos. Los ficheros que están en verde son los que vigilamos y tienen cambios, y los ficheros que están en rojo son los que no estamos vigilando.
Realizamos lo siguiente:
$ git commit -m "Añadimos la estructura y el estilo de la web."
[main (commit-raíz) 3178f03] Añadimos la estructura y el estilo de la web.
2 files changed, 18 insertions(+)
create mode 100644 index.css
create mode 100644 index.html
Observa que al hacer el commit, le aplicamos un comentario para identificarlo rápidamente más adelante. Si tras hacer el commit, nuevamente hacemos un git status, sólo nos mostrará los archivos no vigilados, puesto que los que estaban en verde han sido añadidos al repositorio. Luego, git vuelve a comprobar si hay cambios en nuestros ficheros y carpetas respecto a lo que tiene en el repositorio local, y nos los va mostrando en verde o rojo.
Añadir y eliminar del repositorio
Por ejemplo, probemos a hacer un cambio en el fichero index.html, que ya lo añadimos al repositorio y está siendo vigilado:
$ vim index.html
$ git status
En la rama main
Cambios no rastreados para el commit:
(usa "git add <archivo>..." para actualizar lo que será confirmado)
(usa "git restore <archivo>..." para descartar los cambios en el directorio de trabajo)
modificados: index.html
Archivos sin seguimiento:
(usa "git add <archivo>..." para incluirlo a lo que será confirmado)
README.md
index.js
Observa que aunque salen todos en rojo, aparecen en dos grupos diferentes: Cambios no rastreados para el commit y archivos sin seguimiento.
Probemos ahora a hacer un git add ., que añade todos los ficheros de la carpeta a vigilar:
$ git add .
$ git status
En la rama main
Cambios a ser confirmados:
(usa "git restore --staged <archivo>..." para sacar del área de stage)
nuevos archivos: README.md
modificados: index.html
nuevos archivos: index.js
Ahora salen todos en verde, porque al indicar la carpeta actual con ., está vigilando todos los archivos y carpetas. Como bien dice en el mensaje, si hemos añadido un archivo por error que no queríamos vigilar, con git restore --staged lo podemos solucionar si aún no hemos hecho el commit.
Imaginemos que el fichero README.md no queremos añadirlo:
$ git restore --staged README.md
$ git status
En la rama main
Cambios a ser confirmados:
(usa "git restore --staged <archivo>..." para sacar del área de stage)
modificados: index.html
nuevos archivos: index.js
Archivos sin seguimiento:
(usa "git add <archivo>..." para incluirlo a lo que será confirmado)
README.md
El fichero README.md vuelve a aparecer en rojo y no está siendo vigilado. Lo volvemos a añadir con git add y hacemos otro commit para guardar los cambios de README.md y index.js y la modificación que hicimos sobre index.html en el repositorio local:
$ git add README.md`
$ git commit -m "Añadimos cambios en la estructura, funcionalidad JS y el README"
[main 5d1c91b] Añadimos cambios en la estructura, funcionalidad JS y el README
3 files changed, 5 insertions(+), 1 deletion(-)
create mode 100644 README.md
create mode 100644 index.js
$ git status
En la rama main
nada para hacer commit, el árbol de trabajo está limpio
Observa que tras realizar esos cambios, ahora git status nos dice que el árbol de trabajo está limpio. Eso significa que el repositorio local está sincronizado con la estructura de carpetas que tenemos y no hay cambios.
