Usar Git con DreamPress

Es un deseo común personalizar un sitio de WordPress a tu propio estilo personal. Sin embargo, un problema importante con el código de tema personalizado es que cuando el desarrollador actualiza el tema, tus personalizaciones se anulan. Una solución a este problema es crear un tema child con el control de versiones de Git.

La creación de un tema child generalmente requiere el uso de algo como las herramientas de desarrollo del navegador de Google para averiguar qué cambios debe realizar en la hoja de estilo CSS del tema. También es posible que debas realizar cambios en uno o más de los archivos PHP para actualizar plantillas específicas de WordPress.

Hacer un seguimiento de múltiples cambios como este puede volverse rápidamente tedioso y confuso. Además, ¿cómo puedes probar nuevos cambios sin perder los cambios actuales y cómo volver a un cambio que realizaste anteriormente si descubres que cometiste un error? Una vez más, la mejor solución es usar el control de versiones de Git con DreamPress.

Git es un sistema de control de versiones que le permite realizar un seguimiento de cada cambio que realice en tu sitio. Es ideal para crear y mantener temas, plugins y cualquier personalización de tu sitio web de WordPress más allá de los que puede hacer en el panel. Como herramienta de control de versiones, Git te permite tomar capturas de tu código para que puedas recuperar una copia de seguridad en cualquier momento. Git te permite crear una "rama" para agregar una nueva característica, corregir un error o incluso experimentar con nuevos cambios sin preocuparte por estropear la versión actual.

En el pasado, usaba FTP/SFTP para actualizar tu sitio web. Sin embargo, un problema importante con estos protocolos es que no puedes volver a una versión anterior de tus personalizaciones en casos como cuando un cambio interrumpe tu sitio. Tampoco puedes revisar una versión anterior para ver qué cambió. Estos problemas se resuelven usando Git.

Git se usa comúnmente con SSH y un terminal al crear repositorios remotos. Sin embargo, también hay algunas buenas aplicaciones GUI Git que se pueden usar. Dos buenas son SourceTree y Tower ($$).

El uso de Git para temas o plugins  personalizados te permite compartirlos entre sitios web o con otros usuarios. Si eliges hacer esto, se recomienda encarecidamente colocar cada proyecto (tema o plugin) en su propio repositorio. Hacerlo les permitirá a ti y a otros seguir fácilmente tu trabajo personalizado.

No se recomienda usar Git como herramienta de respaldo de WordPress. Por ejemplo, no es necesario poner tu instancia de WordPress bajo control de versiones. Eso ya lo hicieron los desarrolladores principales de WordPress. Además, si tuvieras todo tu sitio bajo el control de versión de Git, todo se sobrescribiría durante una actualización automática de WordPress. Más bien, piensa en Git como una herramienta para administrar tus personalizaciones o tu propio tema y desarrollo de plugins.

Usar Git para el control de versiones de la base de datos también es difícil y no se recomienda. WordPress ya maneja el control de versiones para publicaciones y páginas, por lo que esto es innecesario.

Hay algunos flujos de trabajo diferentes que se pueden usar con Git y WordPress. Lo que funciona mejor depende de si se está desarrollando conjuntamente con otros o no, así como de tu preferencia personal.

1. Local only — Solo usa Git localmente (en tu computador) y continúa usando SFTP para actualizar tu servidor con cambios.
2. Local and web server — Crea un repositorio Git tanto localmente (en tu computador) como en tu servidor web. Envía los cambios de tu instancia local a la instancia de tu servidor que se copia en tu tema de WordPress o en el directorio de plugins.
3. Local, public Git host and web server — Esta configuración es ideal cuando se realiza un desarrollo conjunto con otros. Puedes usar GitHub o Bitbucket para alojar tu desarrollo colaborativo para actualizar y compartir cambios de código. Y cada vez que elijas, puedes enviar actualizaciones desde el host Git a tu servidor web. GitHub es mejor para el código que se compartirá públicamente mientras Bitbucket es mejor para un repositorio privado ya que es gratis. (GitHub cobra por repositorios privados.)

DreamPress ha incorporado soporte para Git. Se puede usar para el segundo o tercer tipo de flujo de trabajo que se muestra arriba. El siguiente ejemplo analiza el segundo método de flujo de trabajo: un repositorio Git local y uno en su servidor DreamPress que mantiene sincronizado.

Probablemente, el caso de uso más común para usar Git es crear un tema child. Muy a menudo, deseas realizar cambios en un tema y no sobrescribir tus cambios cuando necesitas actualizar el tema.

Paso 1 — Instalar Git en tu computador

Git debe estar instalado en tu computador para que pueda ejecutar los comandos de git. Hay un gran artículo en la documentación en línea de Git eso explica cómo hacer eso para Windows, Mac OS y Linux. Ten en cuenta que Git ahora estás instalado en Mac OS de forma predeterminada si tienes la última versión. Puedes verificar si está instalado con este comando en la aplicación de terminal:

[computer]$ git --version

Paso 2 — Crear un usuario de shell en el panel DreamHost

Configura un usuario shell en el panel DreamHost si aún no lo has hecho. También puedes cambiar el usuario actual de DreamPress de SFTP a un usuario Shell. Revisa el artículo cómo crear un usuario con acceso Shell.

Después de haber cambiado el tipo, escribe tu usuario shell, contraseña y host (nombre del servidor) de shell. Para DreamPress, tu usuario y host se ven algo así:

Usuario Shell: wp_ab1cde
Host: wp_123456.dreamhostps.com

Paso 3 — Configurar una clave SSH en tu computador

Esto te permite conectarte automáticamente a su servidor DreamPress y permite que los comandos de Git funcionen de forma remota. Esto varía un poco entre Windows, Mac y Linux, así que consulta este artículo de ayuda:

• Cómo configurar inicio de sesión sin contraseña en Mac OS y Linux

Asegúrate de copiar tu frase de contraseña en un lugar seguro. Es posible que lo necesites (como para el llavero Mac OS).

Paso 4 — Elegir tu terminal favorito

Windows no incluye un terminal, por lo que debes elegir uno como PuTTY, SuperPutty, o MobaXterm. Tanto Mac OS como Linux incluyen un terminal, pero hay otras opciones disponibles. Para Mac OS, una buena sugerencia es iTerm2.

Abre tu terminal en este punto, que se utiliza de aquí en adelante.

Paso 5 — Iniciar sesión en tu servidor

Inicia sesión en tu servidor usando SSH. Esto te lleva directamente a la raíz de usuario de su shell. Usando el usuario y el servidor de shell de muestra, parece que:

[computer]$ ssh wp_ab1cde@wp_123456.dreamhostps.com

La primera vez que hagas esto, debes aceptar tu servidor como un host válido. Esta información se guarda en un archivo hosts conocido en tu computador. Revisa el siguiente artículo para saber como verificar la identidad del servidor.

• Alerta 'The server's host key is unknown' (La llave host del servidor es desconocida)

Paso 6 — Configurar tu servidor Git repo

No es necesario que estés en el mismo directorio que el tema child, pero asegúrate de recordar dónde crea este directorio. Este ejemplo crea un directorio /git bajo tu usuario, fuera del directorio del sitio web. Corre los siguientes comandos de Linux para crear el directorio e inicializar el repositorio en tu servidor web.

1. Corre los siguientes comandos para crear tu identidad para ser usada con Git. Revisa el artículo SSH para ver detalles de como iniciar sesión en tu servidor:

   [server]$ git config --global user.name "John Doe"
   [server]$ git config --global user.email johndoe@example.com
   [server]$ git config --global init.defaultBranch main
   

   La última linea asegura que los nuevos repositorios creados usen el nombre main como la primera rama. Revisa el siguiente artículo para más detales:

   • Configurar git para usar 'main' como la rama principal
2. Asegúrate de estar en el directorio del usuario corriendo pwd:

   [server]$ pwd
   /home/username/

3. Crea el directorio en el que se almacenará el repositorio. Puedes nombrarlo como quieras. En este ejemplo, se crean dos directorios, /git y /projectname:

   [server]$ mkdir -p git/projectname 

4. Cambia tu directorio actual al directorio recién creado:

   [server]$ cd git/projectname

5. Inicializa el repositorio:

   [server]$ git init --bare
   Initialized empty Git repository in /home/username/git/projectname/

6. Asegúrate de crear un directorio para cada proyecto único. Esto te ayuda a realizar un seguimiento de ellos en el futuro.

Paso 7 — Crear un archivo para copiar actualizaciones

Este paso crea un archivo para copiar actualizaciones desde el repositorio de Git de tu servidor al directorio de temas child. Este ejemplo utiliza un programa editor de texto llamado nano. Revisa el artículo Crear y editar un archivo a través de SSH para obtener más información sobre cómo editar un archivo.

1. Asegúrate de estar en tu directorio /git/projectname.
2. Corre nano y crea un archivo llamado post-receive:

   [server]$ nano hooks/post-receive

3. Agrega este código al archivo, que te dice dónde poner estos cambios. Esto debe apuntar a tu directorio de tema child.

   En este ejemplo, cambia el username a tu usuario real de shell, cambie example.com a tu sitio web y cambia el directorio child-theme-directory por el nombre de tu directorio child-theme.

   #!/bin/sh
   GIT_WORK_TREE=/home/username/example.com/wp-content/themes/child-theme-directory git checkout -f

4. Guarda y cierra tu archivo para volver a tu shell.
5. Otorga al archivo derechos de ejecución en la línea de comando del terminal:

   [server]$ chmod +x hooks/post-receive

Paso 8 — Crear un tema child

Crea un tema child. Usa el siguiente artículo para obtener instrucciones paso a paso:

• • Temas Child

Paso 9 — Descargar los archivos de tu sitio web a tu computador

Debes tener todos los archivos de tu sitio DreamPress en tu computador local. Si no, descárgalos a través de SFTP.

Paso 10 — Crear tu repositorio git local en tu computador

1. Asegúrate de estar en el directorio de temas de tu tema child:

   [computer]$ cd ~/example.com/wp-content/themes/child-theme-directory

2. Corre  lo siguiente para inicializarlo:

   [computer]$ git init

Paso 11 — Personalizar tu tema child local en tu computador

Este paso no está cubierto en este artículo. Mira esta publicación de blog sobre cómo crear un tema child:

• Manual de temas child (WordPress.org)

Paso 12 — Configurar la conexión a tu servidor remoto

Esto se hace mediante el uso de un comando remoto de git en el directorio de tema child.

1. Asegúrate de estar en el directorio de temas child:

   En el siguiente ejemplo, la palabra myserver es solamente un alias. Puede ser llamado como quieras. Pero este alias va a ser usado cuando envíes tu contenido en el futuro.

   [mycomputer]$ git remote add myserver ssh://username@server.dreamhostps.com/~/git/projectname

   Lo siguiente es como aparecería con el usuario y servidor de DreamPress:

   [computer]$ git remote add myserver ssh://wp_ab1cde@wp_123456.dreamhostps.com/~/git/projectname

2. Corre lo siguiente para ver si se agregó correctamente:

   [computer]$ git remote -v

Paso 13 — Guardar tus cambios

Ahora que has personalizado tu tema child, debes guardar los cambios en tu repositorio git local.

1. Agrega tus cambios a tu índice git local:

   [computer]$ git add .

2. Confirma estos cambios, que registran los cambios en el repositorio. Incluye un breve mensaje en el comando de confirmación, que es una nota rápida para recordarte lo que está confirmando. Por ejemplo, podría ser "primer compromiso del tema child":

   [computer]$ git commit -m "message about the commit"

3. Verifica el estado de tu repositorio git ejecutando lo siguiente. Puedes consultarlo en cualquier momento:

   [computer]$ git status

Paso 14 — Enviar tus cambios al servidor de tu sitio web

Ahora que se establece la conexión entre tus instancias git locales y del servidor, puedes enviar tus cambios al repositorio de tu servidor y a tu sitio de WordPress:

1. En el directorio de temas child, corre el siguiente comando solo una vez:

   [mycomputer]$ git push -u myserver main
   Branch main set up to track remote branch 'main' from 'myserver'

2. Cada vez que crees una nueva captura en tu repositorio de git local, ponla en tu servidor simplemente con este comando:

   [computer]$ git push myserver

¡Eso es! Una vez que hayas configurado esto, es simple mantener estos dos repositorios sincronizados. También tienes todo el desarrollo de tu tema child bajo control de versiones.