Cómo implementar automáticamente cambios de temas de WordPress usando GitHub y Deploy

La mayoría de los desarrolladores web profesionales utilizan un sistema de control de versiones como GitHub o Bitbucket y despliegan automáticamente sus cambios en sitios de prueba o en vivo.

Hemos probado varias herramientas para desplegar cambios automáticamente. Basándonos en esta experiencia del mundo real, descubrimos que puedes usar DeployHQ para enviar el desarrollo de temas a tu sitio. DeployHQ actúa como intermediario entre tu repositorio de Git y tu servidor.

En este artículo, te mostraremos cómo desplegar automáticamente los cambios de temas de WordPress usando GitHub y Deploy.

¿Por qué usar un sistema de control de versiones para el desarrollo de temas de WordPress?

Un sistema de control de versiones te permite registrar los cambios en un archivo o conjunto de archivos a lo largo del tiempo para que puedas recuperar versiones específicas más tarde. En otras palabras, cada vez que cambiamos una plantilla, una imagen o un archivo CSS de un tema de WordPress, un sistema de control de versiones hace un seguimiento de estos cambios.

Por ejemplo, digamos que decides ejecutar un lote de cambios. Si esos cambios causan un problema, entonces puedes revertir (o deshacer) a una 'versión' existente de nuestro tema de WordPress.

Git es un sistema de control de versiones común y permite que varios usuarios trabajen en la misma base de código, como un tema de WordPress. Si dos desarrolladores editan el mismo archivo, Git tiene controles integrados para lidiar con estos problemas (conocidos como conflictos de fusión).

Para más información, consulta nuestra guía para principiantes sobre el uso de Git con WordPress.

¿Por qué usar un sistema de despliegue?

Un sistema de despliegue que se integra con servicios como GitHub te permite subir automáticamente o manualmente los cambios que hayas realizado en tu tema de WordPress.

Puedes verlo como un sistema de sincronización unidireccional. Por ejemplo, si eliminas un archivo de tu tema de WordPress, también tendrías que eliminarlo a través de FTP. Con un sistema de despliegue, esto se hace automáticamente por ti cuando confirmas los cambios de tu código en GitHub.

En este artículo, trabajaremos con un sistema de despliegue llamado DeployHQ, o simplemente Deploy. Deploy funciona con otros proveedores de repositorios Git como Bitbucket, pero nos quedaremos con GitHub para este tutorial.

Configuración de un repositorio de GitHub para tu tema de WordPress

Primero, necesitarás configurar una cuenta en GitHub y luego usar el cliente de GitHub para Windows o Mac para almacenar cambios en tu tema de WordPress.

Para empezar, puedes visitar el sitio web de GitHub e ingresar tu dirección de correo electrónico para crear una nueva cuenta.

A continuación, deberás ingresar un nombre de usuario y una contraseña.

GitHub también te pedirá que elijas tus preferencias de correo electrónico.

Después de eso, puedes desplazarte hacia abajo y verificar tu cuenta resolviendo un rompecabezas.

Es como reCAPTCHA en tu sitio de WordPress.

Una vez que tu cuenta sea verificada, verás el panel de control de GitHub.

Desde aquí, puedes hacer clic en el ícono '+' en la parte superior y seleccionar la opción 'Nuevo repositorio'.

A continuación, puedes empezar estableciendo el nombre del repositorio, como el nombre de la carpeta de tu tema de WordPress.  

Luego, deberás elegir si este es un repositorio Público o Privado. Los repositorios públicos permiten que todos vean tu código, pero no pueden hacerle cambios. Los repositorios privados solo están disponibles para que tú los veas.

Finalmente, puedes marcar la casilla si deseas agregar un archivo README.

Una vez hecho esto, simplemente haz clic en el botón ‘Crear repositorio’.

Tu repositorio de GitHub estará listo para usarse.

Instala GitHub para Windows o Mac

A continuación, necesitas colocar el código de nuestro Tema de WordPress en nuestro repositorio. Una forma sencilla de hacerlo es usando el cliente de GitHub, que se instala en tu computadora.

Simplemente visita el sitio web de GitHub Desktop y descarga el cliente de escritorio disponible para Windows o Mac.

Una vez que la descarga esté completa, inicia el cliente de GitHub.

A continuación, deberás iniciar sesión con tu cuenta de GitHub. Puedes hacer clic en el botón ‘Iniciar sesión en GitHub.com’.

Esto iniciará GitHub en tu navegador web.

Simplemente haz clic en el botón ‘Autorizar escritorio’ para permitir que GitHub Desktop acceda a tu cuenta.

Después de eso, puedes abrir el cliente de GitHub Desktop.

A continuación, deberás configurar Git. Simplemente selecciona la opción ‘Usar mi nombre y dirección de correo electrónico de la cuenta de GitHub’ y haz clic en el botón ‘Finalizar’.

A continuación, agreguemos el repositorio de GitHub que creaste anteriormente.

Para hacer esto, haz clic en la opción ‘Clonar un repositorio desde internet’.

Verás una lista de tus repositorios de GitHub, incluido el que creaste anteriormente.

Simplemente selecciona el repositorio y elige dónde quieres almacenarlo en tu computadora en el campo ‘Ruta local’. Una vez hecho esto, puedes hacer clic en el botón ‘Clonar’.

Ahora has clonado (copiado) tu repositorio alojado en GitHub a nuestra computadora.

A continuación, necesitas agregar el código de nuestro tema de WordPress a la carpeta del repositorio y luego confirmar y sincronizar este código con GitHub.

Puedes comenzar buscando la carpeta que seleccionaste en el paso anterior en tu computadora. Debería tener un archivo README.md en la carpeta. Dependiendo de la configuración de tu computadora, también podrías ver la carpeta oculta .git.

Cuando hayas realizado cambios en el código de tu tema de WordPress, simplemente cópialos y pégalos en esta carpeta.

Después de eso, puedes abrir la aplicación GitHub para Mac o Windows y ver los archivos que acabas de agregar aparecer en la ventana:

Verás los cambios resaltados en verde. Estos son los cambios que has guardado en el repositorio local, pero aún no has confirmado esos cambios.

A continuación, deberás confirmar (cargar) estos archivos en GitHub. Para hacer esto, simplemente ingresa algún texto en el cuadro Resumen para explicar los cambios que hemos realizado y haz clic en el botón ‘Confirmar en master’.

Esto confirma los cambios que has realizado en el repositorio.

Para subir esos cambios a GitHub, puedes hacer clic en el botón ‘Push origin’.

Para verificar que tu commit se ha subido a GitHub, visita tu repositorio en el sitio web de GitHub. Si todo funciona, verás los cambios en tu código.

Configuración de Despliegue

El paso final es asegurarte de que cualquier cambio en tu repositorio de GitHub se envíe a tu sitio web de WordPress.

DeployHQ, o Deploy, es un servicio basado en la web que monitoreará los cambios en tu repositorio de GitHub y subirá automática o manualmente solo esos cambios a tu sitio web de WordPress.

Imagínalo como una conexión entre tu código y el servidor web.

Primero, necesitas visitar el sitio web de Deploy y registrarte para obtener una nueva cuenta. Deploy es un servicio de pago, pero ofrece una cuenta gratuita para un proyecto y 5 despliegues por día.

Después de terminar de registrarte, puedes iniciar sesión en tu panel de Deploy.

Desde aquí, puedes hacer clic en el botón ‘Crear un proyecto’ para empezar.

A continuación, necesitas proporcionar un nombre para tu proyecto.

Después de eso, puedes seleccionar GitHub como tu plataforma de alojamiento de código.

Si te desplazas hacia abajo, encontrarás más opciones, como elegir una zona para tu proyecto y opciones avanzadas.

Una vez hecho esto, haz clic en el botón ‘Crear Proyecto’ para continuar.

Deploy ahora te redirigirá a GitHub.

Si aún no has iniciado sesión, se te pedirá que lo hagas. Después de eso, se te pedirá que permitas a Deploy acceder a tu cuenta de GitHub.

Simplemente haz clic en el botón ‘Autorizar krystal’ para continuar.

Deploy obtendrá la lista de tus repositorios de GitHub y te pedirá que selecciones un repositorio para este proyecto.

Simplemente haz clic en el repositorio de tu tema de WordPress, y Deploy lo importará por ti.

En el siguiente paso, Deploy te pedirá que proporciones información del servidor. Aquí es donde le dices a Deploy cómo subir archivos a tu servidor de WordPress.

Puedes empezar ingresando un nombre y seleccionando ‘FTP’ como opción de protocolo.

A continuación, deberás desplazarte hacia abajo e ingresar tus credenciales FTP.

• Nombre de host: El host SFTP/FTP de tu sitio web
• Puerto: El puerto SFTP/FTP de tu host de sitio web (típicamente SFTP = 22, FTP = 21)
• Nombre de usuario y contraseña: Nombre de usuario y contraseña FTP
• Ruta de despliegue: La ruta a la que navegarías antes de subir los archivos de tu tema de WordPress. Por ejemplo, public_html/example.com/wp-content/themes/MiTema, donde MiTema es el tema de WordPress que has confirmado en GitHub.

Después de ingresar estos detalles, haz clic en el botón ‘guardar ‘Crear Servidor’.

Deploy ahora probará la conexión de tu servidor y si todo funciona correctamente, te mostrará un mensaje de éxito.

Ahora puedes hacer clic en el botón ‘Desplegar’ para subir tus archivos de GitHub a tu sitio web.

Ahora verás el progreso del despliegue.

Una vez que Deploy haya terminado, verás un mensaje de éxito.

Has desplegado con éxito los cambios de GitHub a tu sitio web usando Deploy. Ahora, cuando realices cambios en tu tema de WordPress en tu computadora, deberás confirmarlos en GitHub. Después de eso, deberás visitar el sitio web de Deploy para iniciar el despliegue manualmente.

Veamos cómo configurar el despliegue automático para que cualquier cambio que confirmes en GitHub se despliegue automáticamente en tu sitio web.

Configuración de despliegue automático

Primero, necesitas visitar tu panel de Despliegue y dirigirte a la página de ‘Proyectos’. Desde aquí, simplemente haz clic en el nombre de tu proyecto.

A continuación, puedes ir a la pestaña ‘Despliegues Automáticos’ desde el menú de la izquierda.

Aquí, necesitarás habilitar la opción junto a tu servidor para los despliegues automáticos.

Después de eso, tendrás que copiar la URL del Webhook y añadirla a tu cuenta de GitHub.

Simplemente inicia sesión en tu cuenta de GitHub en una nueva pestaña del navegador. Luego haz clic en tu repositorio y dirígete a la pestaña ‘Configuración’. Desde aquí, puedes ir a la sección de Webhooks desde el menú de la izquierda y hacer clic en el botón ‘Añadir webhook’.

Ahora pega la URL del webhook que copiaste de la página de configuración del servidor de Despliegue en el campo URL de carga útil.

Después de eso, selecciona ‘application/x-www-form-urlencoded’ como el ‘Tipo de contenido’ en el menú desplegable:

A continuación, puedes desplazarte hacia abajo y seleccionar qué eventos deben activar el webhook. Puedes usar la configuración predeterminada.

Una vez hecho esto, simplemente haz clic en el botón ‘Añadir webhook’.

Eso es todo. Tu repositorio de GitHub ahora notificará a Deploy cuando haya cambios nuevos en tu repositorio. Deploy implementará automáticamente esos cambios en tu sitio web.

Esperamos que este artículo te haya ayudado a aprender cómo implementar automáticamente los cambios de temas de WordPress usando GitHub y Deploy. También te puede interesar nuestra guía sobre cómo actualizar jQuery a la última versión en WordPress y cómo verificar y actualizar la última versión de WordPress.

Si te gustó este artículo, suscríbete a nuestro canal de YouTube para obtener tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.