El desarrollo web está intrínsecamente relacionado con la colaboración. La mayoría de las veces trabajarás con otros desarrolladores, e incluso si no lo haces, Git puede ayudarte de muchas otras maneras.
Git es el software que controla la versión de las aplicaciones que hacemos. Lo utilizan desarrolladores en solitario, grandes empresas e incluso Linux, el mayor proyecto de código abierto del mundo.
Como desarrollador web, es extremadamente importante saber cómo utilizar Git para el desarrollo web correctamente. No estamos hablando sólo de «git add», «git commit» y «git push». Debes conocer todo el flujo de trabajo para crear un proyecto web con Git.
¿Aún no estás convencido? ¡Empecemos!
¿Por qué usar Git?
Estas son sólo algunas de las razones para empezar a utilizar Git:
- Organización: En lugar de gestionar tu proyecto en carpetas como v1, v2, v3, etc, tienes un solo proyecto con una base de datos especial que almacena todas las versiones de los archivos
- Colaboración: Git te permite a ti y a otras personas trabajar en el mismo proyecto al mismo tiempo sin crear conflictos.
- Código abierto: Git es de código abierto, pero también es la herramienta que utilizamos para colaborar y crear un gran software de código abierto. Cualquiera puede hacer pull requests a proyectos de código abierto en plataformas como GitHub o Bitbucket.
- Flexibilidad de la plataforma: Hoy en día, tienes muchos servicios de alojamiento de Git entre los que elegir, como Gitlab, GitHub, Bitbucket y SourceForge. Incluso puedes utilizar una solución autoalojada para todos tus proyectos.
- Copias de seguridad fáciles: Deshaz los errores con facilidad, y nunca pierdas la base de código de tu proyecto.
Ya hemos mencionado el término GitHub una o dos veces, así que ¿cuál es la diferencia entre Git y GitHub?
Esto puede confundirte si eres totalmente nuevo en Git. Para ponerlo en palabras sencillas, Git y GitHub son herramientas relacionadas pero diferentes.
Git es el sistema de control de versiones (VCS) que utilizamos para mantener el control de los cambios de nuestros archivos, mientras que GitHub es un servicio que utilizamos para almacenar los archivos de nuestro proyecto y su historial Git en línea (ubicado en la carpeta .git/ de tu proyecto).
Git se instala localmente, en tu máquina, y sin servicios de alojamiento como GitHub o GitLab, sería muy difícil colaborar con otros desarrolladores.
GitHub potencia a Git añadiendo otras funciones que mejoran la colaboración, como la clonación, la bifurcación y la fusión. Juntas, estas dos herramientas se combinan para ofrecerte un ecosistema relativamente amigable para desarrollar, gestionar y mostrar tu proyecto a otras personas.
Flujo de trabajo básico de Git para el desarrollo web
En las siguientes secciones, aprenderás más sobre el flujo de trabajo de Git para el desarrollo web a través de la práctica.
Requisitos de instalación
Si aún no has instalado Git, este es el momento perfecto. Es fácil de instalar y está disponible en la mayoría de los sistemas operativos.
Descárgalo desde la página oficial de descargas, o instálalo con un gestor de paquetes si usas Linux o macOS:
Para comprobar que todo ha ido bien con la instalación, enciende un terminal en Linux o macOS buscando «Terminal» en tu menú de aplicaciones, o abriendo Git bash en Windows (que viene instalado con Git por defecto).
A continuación, escribe:
git --version
Si obtienes una versión Git como respuesta, ya estás listo.
También necesitaremos una cuenta de GitHub, así que asegúrate de registrarte o iniciar sesión en GitHub:
Una vez que tengas instalado Git y hayas iniciado sesión en tu cuenta de GitHub, puedes pasar a la siguiente sección.
Flujo de trabajo básico de Git para proyectos colaborativos
Como se hemos mencionado anteriormente, la mayor parte del tiempo no desarrollarás proyectos en solitario. Colaborar es una habilidad clave, y Git y GitHub nos ayudan a convertirlo en un proceso sencillo pero eficaz.
El flujo de trabajo típico de un proyecto Git es el siguiente
- Consigue una copia local del proyecto clonando un repositorio, o repo. Si estás colaborando, primero debes hacer un fork del repo.
- Crea una rama con un nombre representativo de la función en la que vas a trabajar.
- Edita el proyecto.
- Confirma los cambios en tu máquina local.
- Empuja los cambios al repositorio remoto.
- Crea un pull request al repositorio original.
- Fusiona y resuelve los conflictos en la rama principal del repositorio original.
Tutorial
¡Ahora es el momento de ensuciarse las manos!
En esta guía, vas a crear un sitio web HTML sencillo. A efectos prácticos, bifurcarás el proyecto base del repositorio del sitio HTML a tu cuenta de GitHub. Esto se puede hacer para todos los repositorios públicos disponibles.
Para hacer un fork del sitio HTML, ve a este repositorio de GitHub y haz clic en el botón Fork situado en la parte superior derecha de la página:
Ahora tienes un fork del repo original que sólo está disponible en tu cuenta de GitHub. Es exactamente el mismo repositorio, hasta que empiezas a hacer cambios.
Como puedes ver, bifurcar un repositorio público sólo lleva un par de segundos. Esto es genial para los proyectos de código abierto, pero ten en cuenta que si tu organización tiene un repositorio privado, tendrás que incluirte como colaborador antes de intentar bifurcarlo.
Es el momento de llevar tu fork a tu máquina local. Para ello, tienes que clonarlo con el comando git clone, que recupera el repositorio Git del servidor remoto:
git clone remote_urlTienes que sustituir remote_url por la URL de tu fork. Para obtener la URL exacta de un repositorio de GitHub, ve a su página y haz clic en Código. Luego elige SSH, y copia el enlace que te da:
El comando que debes ejecutar para clonar el repo bifurcado es
git clone [email protected]:yourusername/HTML-site.gitCuando clonas un repo, obtienes una carpeta con su nombre. Dentro de esa carpeta está el código fuente del proyecto (en este caso, el sitio HTML) y el repositorio Git, que se encuentra dentro de una carpeta llamada .git.
Puedes ver la lista de archivos dentro del nuevo directorio abriendo la nueva carpeta en un gestor gráfico de archivos, o listándolos directamente desde el terminal con los comandos ls o dir:
# Linux/macOS
ls HTML-site/
# Windows
dir HTML-site\
.git images .gitignore index.html LICENSE README.md styles.cssEste sitio HTML es muy sencillo. Utiliza Bootstrap para fines prácticos y algunas imágenes de Unsplash, donde puedes descargar imágenes gratuitas para tu sitio.
Si abres el archivo index. html en tu navegador, verás una página sencilla con algunas imágenes:
Es hora de jugar con este proyecto. Parece muy vacía, y quizá una cabecera con el nombre del sitio podría mejorar la experiencia del usuario.
Para ello, entra en el directorio HTML-site y crea una rama llamada header. En esta nueva rama, podemos editar todos los archivos e implementar todo el código que queramos porque no afectará a la rama principal (original).
Ejecuta el siguiente comando:
git checkout -b header
Esto creará una rama llamada «cabecera» y te cambiará a ella justo después de esto. Equivale a
git branch header
git checkout header
Para confirmar que todo ha ido bien, ejecuta
git status
# On branch header
# nothing to commit, working tree clean
Verás que ha sido desplazado de la rama «principal» a la rama «cabecera», pero el árbol de trabajo sigue limpio ya que no hemos editado ningún archivo.
En tu editor de código favorito, abre el archivo index.html de tu proyecto ramificado. Este archivo incluye algunos enlaces a Bootstrap 5, para que podamos aprovechar los componentes listos para usar del framework.
Añade el siguiente código al archivo index.html dentro de la etiqueta <body> y encima del contenedor de imágenes:
<header>
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<span class="navbar-brand mb-0 h1">HTML site</span>
</div>
</nav>
</header>
¡Se ve mucho mejor! Siéntete libre de hacer otras ramificaciones y cambios que desees.
Una vez que hayas terminado de editar el proyecto, es el momento de confirmar todos los cambios en tu repositorio local. Dentro del directorio del proyecto, escribe lo siguiente en tu terminal:
git add --all
git commit -m "Added simple header in index.html file"Cuando empiezas un proyecto, es habitual tener mensajes de commit descriptivos, pero con el tiempo y el cambio de enfoque, la calidad de los mensajes tiende a bajar. Asegúrate de mantener una buena práctica de nomenclatura.
Ahora que has hecho un commit en tu repositorio local (que aún está disponible sólo en tu ordenador), es el momento de enviarlo al repositorio remoto.
Si intentas enviar la confirmación de forma normal, no funcionará porque estás trabajando en la rama header. Tienes que establecer la rama de subida para header:
git push --set-upstream origin headerA partir del 13 de agosto de 2021, GitHub requiere el uso de la autenticación SSH, así que asegúrate de que tienes tus claves correctamente configuradas.
Después de esto, deberías poder ver una nueva rama llamada header en tu repositorio bifurcado (por ejemplo, https://github.com/yourusername/HTML-site/branches):
Para crear un pull request al repo original, haz clic en Comparar, abajo en la sección Ramas activas.
Esto te guiará a un pull request, donde tendrás que elegir con qué rama (la original o tu fork) quieres fusionar. Por defecto, aparece la opción de fusionar con el repositorio base:
Una vez que hagas clic en la opción de solicitud de extracción, tendrás que escribir una breve descripción de los cambios realizados, al igual que con tus confirmaciones anteriores. Una vez más, intenta ser conciso pero descriptivo:
Haz clic en el botón Crear pull request y espera a que el propietario del repositorio base acepte o te dé su opinión sobre tus cambios.
Enhorabuena: ¡acabas de completar todos los pasos de un flujo de trabajo Git común para el desarrollo web!
Este ha sido un ejemplo muy básico, pero la lógica se extiende a proyectos de todos los tamaños. Asegúrate de implementar este flujo de trabajo de cerca en proyectos de colaboración más grandes también.
Cómo usar Git en Kinsta
Git es fundamental para el despliegue en la plataforma de Alojamiento de Aplicaciones de Kinsta. Los usuarios del servicio conectan sus cuentas a GitHub, Bitbucket o GitLab, y gestionan los despliegues a través de sus paneles de MyKinsta:
Si eres cliente del Alojamiento Administrado de WordPress de Kinsta, puedes incorporar Git en un flujo de trabajo de despliegue iniciando sesión en tu servidor usando SSH desde un terminal y extrayendo desde un repositorio en cualquier proveedor de alojamiento Git.
Hemos documentado el uso de Git en Kinsta para clientes de WordPress. Después de seguir esas instrucciones para prepararse para una conexión SSH a un servidor WordPress, puede obtener un repositorio Git con un comando como este:
ssh [email protected] -p PORT "cd /www/my_site/public && git pull https://github.com/user/repo.git"Resumen
Hoy en día, Git es una herramienta que debes aprender para el desarrollo web, ya que la mayor parte del tiempo estarás colaborando con otros para crear el mejor proyecto posible.
En este artículo, hemos hablado de algunas razones importantes para utilizar Git en tus proyectos, y te hemos mostrado el flujo de trabajo básico para colaborar en un repo de Git.
Y Git es una herramienta poderosa que es esencial para la plataforma de Alojamiento de Aplicaciones de Kinsta y a menudo útil para los clientes del servicio de Alojamiento Administrado de WordPress de Kinsta.
Vale la pena el esfuerzo de aprender Git e implementarlo como parte de su arsenal de habilidades de desarrollo web.
¿Tienes alguna otra sugerencia para mejorar este flujo de trabajo básico de Git para el desarrollo web? ¡Háznoslo saber en la sección de comentarios!
Deja una respuesta