Cómo desplegar automáticamente los cambios en los temas de WordPress utilizando GitHub y Deploy

¿Quieres desplegar automáticamente los cambios del tema de WordPress en tu sitio web? 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 el sitio de ensayo o en el sitio real. En este artículo, te mostraremos cómo desplegar automáticamente los cambios del tema de WordPress utilizando GitHub y Deploy

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

En primer lugar, tenemos que entender qué el control de versiones significa:

... un sistema que registra los cambios realizados en un archivo o conjunto de archivos a lo largo del tiempo para poder recuperar versiones específicas más adelante http://git-scm.com/book/en/v2/Getting-Started-About-Version-Control

En otras palabras, cada vez que cambiamos una plantilla de tema de WordPress, una imagen o un archivo CSS, un sistema de control de versiones hace un seguimiento de estos cambios. En determinados momentos, podemos etiquetar (confirmar) un lote de cambios. Si esos cambios causan un problema, podemos revertir (o hacer retroceder) a una "versión" existente de nuestro tema de WordPress.

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

Los sistemas de control de versiones Git de terceros, como GitHub y BitBucket, permiten a los usuarios dejar problemas (o tickets) si detectan un problema en tu código. Tus cambios en el código pueden ser consignados (etiquetados) en una incidencia concreta, para mostrar los cambios exactos en el código realizados para solucionar un problema. Esto es muy útil cuando miras atrás en el código dentro de 6 o 12 meses y quieres saber por qué hiciste algo de una manera determinada.

¿Por qué utilizar un sistema de despliegue?

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

Puedes verlo como un sistema de sincronización en un solo sentido: por ejemplo, si eliminas un archivo de tu tema de WordPress, tendrías que acordarte de eliminarlo también por FTP. Con un sistema de despliegue, esto se hace automáticamente por ti cuando envías tus cambios de código a GitHub.

Configurar un repositorio de GitHub para tu tema de WordPress

Primero configuraremos una cuenta en GitHub, utilizaremos el cliente de GitHub para Windows o Mac para almacenar nuestro tema de WordPress en GitHub

Dirígete a https://github.com y regístrate para obtener una cuenta gratuita.

Una vez que te hayas registrado y hayas confirmado tu dirección de correo electrónico, haz clic en el icono del signo más situado en la esquina superior derecha de la pantalla y elige Nuevo repositorio (un repositorio es un contenedor para tu código, en este caso, nuestro tema de WordPress).

Empieza por configurar el nombre del repositorio - el nombre de la carpeta de tu tema de WordPress es una buena idea. A continuación, elige si se trata de un Público o Privado repositorio. Los repositorios públicos están disponibles para que todo el mundo vea tu código, pero no pueden hacer cambios en él. Los repositorios privados están disponibles sólo para que los veas tú.

Por último, marca la siguiente casilla Inicializa este repositorio con un READMEy luego haz clic en el botón Crear repositorio botón.

Si todo ha funcionado, deberías ver tu nuevo repositorio en pantalla:

Instalar GitHub para Windows / Mac

A continuación, tenemos que poner el código de nuestro tema de WordPress en nuestro repositorio. Podemos hacerlo utilizando el cliente de GitHub, que se instala en tu ordenador.

Simplemente visita Escritorio GitHub sitio web y descarga el cliente GitHub Desktop disponible para Windows y Mac

Una vez descargado, inicia el proceso de instalación haciendo clic en Continuar

En la siguiente pantalla, introduce tu nombre de usuario y contraseña de GitHub, que creaste al registrarte en GitHub. Haz clic en el botón Iniciar sesión cuando hayas terminado.

Si los datos de acceso son correctos, aparecerá tu cuenta. Haz clic en el botón Continuar para continuar:

Podemos dejar el Git Config como la configuración por defecto. Asegúrate de hacer clic en el botón Instalar herramientas de línea de comandos antes de hacer clic en la opción Continuar botón:

Por último, haz clic en Hecho, y se te presentará la pantalla de GitHub.

Vamos a añadir nuestro repositorio de GitHub que hemos creado antes. Para ello, haz clic en el icono del signo más en la esquina superior derecha, y luego en el icono Clonar opción. Verás una lista de tus repositorios de GitHub, incluido el que hemos creado antes:

Haz clic en el repositorio que has creado antes y, a continuación, haz clic en el botón Clonar botón

Elige en qué lugar de tu ordenador quieres almacenar este repositorio, y haz clic en el botón Clonar una vez que hayas elegido esto.

Ahora hemos clonado (copiado) nuestro repositorio alojado en GitHub a nuestro ordenador.

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

Empieza por buscar en tu ordenador la carpeta que has seleccionado en el paso anterior. Debería tener un README.md en la carpeta. Dependiendo de la configuración de tu ordenador, es posible que también veas el archivo oculto .git oculta:

Copia y pega el código de tu tema de WordPress en esta carpeta:

Abre la aplicación de GitHub para Mac o Windows, y ahora verás que los archivos que acabas de añadir aparecen en la ventana:

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

A continuación, tenemos que confirmar (subir) estos archivos a GitHub. Para ello, introduce un texto en el campo Resumen caja para explicar los cambios que hemos hecho (por ejemplo Mi primer commit), y haz clic en el botón Confirmar al maestro botón.

Esto confirma los cambios que has hecho en el repositorio. Para subir esos cambios a GitHub, haz clic en el botón Sincronizar en la esquina superior derecha de la ventana de la aplicación GitHub.

Para comprobar que tu confirmación se ha subido a GitHub, visita tu repositorio en el sitio web de GitHub. Si todo ha funcionado, verás tu código:

Configurar el despliegue

Hasta ahora, hemos configurado GitHub y hemos confirmado el código de nuestro tema de WordPress en su repositorio de GitHub. El último paso es subir los cambios en tu repositorio de GitHub a tu sitio web de WordPress.

DeployHQ, o simplemente Deploy, es un servicio basado en la web que supervisará los cambios en tu repositorio de GitHub, y subirá automática o manualmente sólo esos cambios a tu sitio web de WordPress

Imagínatelo como una conexión en medio de tu código y tu servidor web:

Primero tienes que visitar Desplegar el sitio web y regístrate. Deploy es un servicio de pago, pero ofrece una cuenta gratuita para un proyecto y 10 despliegues al día

Después de terminar de registrarte, puedes acceder a tu panel de control de Deploy. Haz clic en crear un nuevo proyecto para empezar

A continuación tienes que dar un nombre a tu proyecto y seleccionar tu plataforma de alojamiento de código, GitHub. Haz clic en el botón de crear proyecto para continuar

El despliegue te redirigirá ahora a GitHub. Si aún no has iniciado sesión, se te pedirá que lo hagas. Después, se te pedirá que permitas que Deploy acceda a tu cuenta de GitHub

Haz clic en el botón "Autorizar aplicación" 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 tu repositorio de temas de WordPress y Deploy lo importará por ti

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

Para ello necesitarás tus credenciales FTP.

• Nombre: Proporciona un nombre para esta conexión
• Protocolo: FTP o si tienes SFTP o SSH también puedes utilizarlos
• Nombre de host: El host SFTP/FTP de tu sitio web.
• Puerto: El puerto SFTP/FTP de tu sitio web (normalmente SFTP = 22, FTP = 21)
• Nombre de usuario y contraseña: Nombre de usuario y contraseña del 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/MyTheme, donde MyTheme es el tema de WordPress que has comprometido en GitHub.

Haz clic en el botón de guardar para continuar

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

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

El despliegue te mostrará los detalles de este despliegue. Simplemente haz clic en el botón Desplegar de la parte inferior

Ahora verás el progreso del despliegue. Una vez que el despliegue haya terminado, verás un mensaje de éxito

Has desplegado con éxito los cambios desde GitHub a tu sitio web utilizando Deploy. Ahora, cuando hagas cambios en tu tema de WordPress en tu ordenador, tienes que confirmarlos en GitHub. Después tienes que 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

Configurar el despliegue automático

En primer lugar, tienes que visitar tu panel de control de Despliegue e ir a la página de Proyectos. Haz clic en el nombre de tu proyecto

Desde la página de tu proyecto, lleva el ratón al menú Configuración y luego selecciona Servidores y Grupos

Haz clic en el icono de edición junto a tu servidor

Esto te llevará a la pantalla de edición del servidor. En la columna de la derecha encontrarás la configuración del despliegue automático

Asegúrate de que está activada. Debajo verás una URL. Copia esta URL ya que la necesitarás en el siguiente paso

Accede a tu cuenta de GitHub en una nueva pestaña del navegador. Haz clic en tu repositorio y luego en Configuración. Haz clic en el enlace Webhooks y Servicios

Haz clic en el botón Añadir Webhook

Pega la URL que has copiado de la página de configuración del servidor de despliegue en el campo URL de la carga útil. Selecciona application/x-www-form-urlencoded como tipo de contenido y pulsa Añadir webhook.

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

Probando el despliegue automático

Para probar el despliegue automático simplemente haz algunos cambios en el repositorio de temas de WordPress en tu ordenador

Abre la aplicación de escritorio de GitHub y luego confirma esos cambios

No olvides hacer clic en el botón de sincronización

Ahora visita tu proyecto en el panel de control de despliegue. Haz clic en los despliegues y encontrarás tu despliegue automático en la lista

Eso es todo, esperamos que este artículo te haya ayudado a aprender cómo desplegar automáticamente los cambios de los temas de WordPress utilizando GitHub y Deploy. Quizás también quieras ver nuestra guía sobre cómo crear un entorno de preparación para un sitio de WordPress

Si te ha gustado este artículo, suscríbete a nuestro Canal de YouTube para los videotutoriales de WordPress. También puedes encontrarnos en Twitter y Facebook.