Blog

Mi stack de WordPress

En las últimas semanas, estuve pensando en como mejorar la forma de publicar cambios a producción dentro de Typeform. La idea final es poder tener Continuous Deployment en la infraestructura.

Mientras resuelvo los test en WordPress, empecemos con mejorar la actualización de nuestros proyectos a producción (o cualquier ambiente).

No intento hacer un tutorial pero mostrar las herramientas que uso.

Las herramientas

Desde hace un año uso Bedrock, un boilerplate que tiene varias características que me hicieron usarlo para nuestro blog en Typeform.

  • Una mejor estructura de folders
  • Ambientes del sistema (development|staging|production) que puedes configurar para tener comportamientos de WordPress en cada uno
  • Composer 💥 los plugins se instalan por medio así, entonces puedes compartir configuraciones de WordPress mucho más fácil
  • .env 😍 – la configuración de WordPress está como debe ser, en un archivo con las variables de ambiente

Utilizo Sage, un boilerplate para temas que también es un producto que Roots.io ha creado, es un starter theme para developers.

  • PSR compliant
  • Live changes – ahora tiene gulp pero pronto migrarán a WebPack!
  • Bower para manejo de dependencias en el frontend – pronto cambiarán a Yarn!

Para mi sitio web utilizo la versión beta que tiene WebPack y Yarn en vez de Gulp y Bower.

Los archivos

Cada proyecto que haces debería estar en un repositorio para tu control de cambios en los archivos.

Yo utilizo GitHub. Pero existen otras alternativas de VCS (Version Control System) basadas en Git como BitBucket o GitLab.

Trabajando con el sitio

Una de las características que más disfruto es el live-reload (Live Changes).

yarn run start

Este comando corre un proxy con tu sitio web, para cuando cambies algún archivo y guardes, este actualice de forma automática.

Para controlar la consistencia de mis commits y poder clasificar la clase de trabajo, uso:

  • Husky: Es un paquete que nos ayuda a utilizar los hooks de GitHub en nuestro ambiente local de una forma fácil
  • Validate Commit Message: Utiliza el formato basado en el standard de formato de Angularjs

Deploy

Es hora de mostrar los cambios del proyecto, subes los archivos con FTP o algún software donde manualmente transfieres los archivos y como no sabes cuales cambiaste subes toda la carpeta.

¿Es familiar? En vez de hacerlo, este tipo de trabajo se puede automatizar muy fácil. En Typeform para entregar nuevo código utilizamos Jenkins, eso por que tenemos un equipo que se encarga de la infraestructura y si algo sale mal, ellos están al rescate.

Sin embargo en proyectos pequeños no tenemos este soporte y para facilitar el trabajo de mantener el servicio que deployará nuestro código existen herramientas como DeployBot.

Deploybot funciona 2 dos formas, ambas conectadas a GitHub:

  • Builds manuales, es decir, entras a la plataforma o colocas [deploy:production] como mensaje dentro de tus commits
  • Builds automáticos cuando la rama master de tu repositorio es modificada

El concepto es básico, cada vez que empieza un deploy, tu configuras tu “sistema” para que haga ciertas tareas y para luego el código a tu servidor.

Y violà tienes tu nuevo código sin necesidad de subir los archivos.

Si te sirve este es el archivo de configuración que utilizo para deployar mi sitio web a Media Temple (desde Deploybot).

Palabras finales

Estas son las herramientas que utilizo. Hay muchas más, en mi caso he escogido estas por que se adaptan más a mis conocimientos y gusto personal. Tienes alguna pregunta o comentario. Escríbeme :)