Skip to content
40Q
Services
Industries
WP VIP
Case Studies
Blog
About
Free Consultation

Primer Proyecto usando la suite de Roots

José Debuchy

Jun 2, 2021 | 7 min to read |

Wordpress

Vamos a empezar esta serie explicando cómo instalar un sitio WordPress utilizando la suite de productos que ofrece Roots.

Para la serie, vamos a imaginar que estamos desarrollando la web de una Agencia imaginaria llamada “”El Faro””.

El objetivo es tener un pantallazo general de los 3 principales productos, Trellis, Bedrock y Sage, y que funciones cumplen en el proceso.

Requisitos

  • Un mínimo conocimiento de WordPress
  • Idealmente, sistema operativo MacOS, aunque es posible adaptar los requerimientos en Windows siguiendo esta guía.

Introducción

Roots toma buenas prácticas de otros software y las lleva a WordPress. El proyecto comenzó en 2011 y es uno de los más populares en la comunidad.

Trellis

Estas son las principales características de Trellis:

– Paridad de entornos

Trellis permite crear idénticos entornos de desarrollo, staging y producción. Esto es muy útil porque nos permite asegurarnos que lo que vamos a ver localmente o en staging, va a coincidir con lo que se ve en producción. Misma versión de php, nginx, etc.

– Generación automática de servidores

A través de Ansible, permite la configuración automática de servidores. En otra oportunidad, hablaremos en mayor detalle sobre esto.

– Deployment con un solo comando

Trellis trabaja con deployments atómicos, y mediante un simple comando, podemos deployar nuestros cambios con tiempo de caída cero.

– Trellis CLI

Tanto para la generación de servidores, deployment, generación de archivos .env (lo veremos más adelante) y otros features más, Trellis se basa en una command-line interface (CLI).

Bedrock

Estas son las principales características de Bedrock:

– Gestión de dependencias mediante Composer

Gracias a composer, toda la instalación de WordPress, junto con sus plugins se encuentra en un archivo composer.json lo que permite tener un repositorio liviano y fácil de compartir con otros desarrolladores que colaboren en los proyectos.

– Mejor estructura de proyecto

Organiza los archivos de un proyecto WordPress de forma similar a otras aplicaciones más modernas. A su vez, aisla los archivos sensibles de la raíz brindando mucho más seguridad.

– Archivos de configuración en Dotenv

Bedrock mueve todos los archivos fuera de wp-config.php gracias a las variables de entorno.

Sage

Estas son las principales características de Sage:

– Utilización de archivos Blade

Para seguir principio DRY (Don‘t repeat yourself) Sage utiliza en sus templates archivos blade.php. Esto permite mantener ordenados los archivos y sus templates.

– Workflow moderno

Sage permite por default comenzar a trabajar con Sass, es6, gracias a su setup basado en Webpack.

Creación del Proyecto

Vamos a la práctica.

Creamos una carpeta con el nombre del proyecto y vamos allí. Lo ideal es que el nombre coincida con el dominio que vamos a querer asociar. En este caso elfaro.test

mkdir elfaro
cd elfaro

1. Instalación Trellis

Clonamos trellis y borramos la referencia a git

# .
git clone git@github.com:roots/trellis.git && rm -rf trellis/.git

2. Instalación Bedrock

Instalamos Bedrock mediante composer. También podríamos hacer algo similar al paso anterior con Trellis, si prefiriésemos, pero al instalarlo mediante composer, se corre el comando composer install automáticamente.

# .
composer create-project roots/bedrock site

De esta manera, sobre la raíz de nuestro proyecto, tendremos 2 carpetas: trellis y site.

3. Generación de .env

Vamos a generar las variables de configuración de WordPress. Trellis nos permite generar un archivo .env basándonos en archivos .yml

Vamos a la carpeta /trellis/group_vars/development/wordpress_sites.yml y reemplazamos el nombre del dominio por el que deseemos. Hay muchas opciones ocultas que pueden ser modificadas y que se pueden ver en https://roots.io/docs/trellis/master/wordpress-sites/#normal-settings

wordpress_sites:
  elfaro.com:
    site_hosts:
      - canonical: elfaro.test
        redirects:
          - www.elfaro.test
    local_path: ../site # path targeting local Bedrock site directory (relative to Ansible root)
    admin_email: admin@example.test
    multisite:
      enabled: false
    ssl:
      enabled: false
      provider: self-signed
    cache:
      enabled: false

Una vez que modificamos este archivo tenemos que modificar el archivo vault.yml en la misma carpeta, reemplazando el nombre del dominio por el que escribimos en el archivo anterior.

# Documentation: <https://roots.io/trellis/docs/vault/>
vault_mysql_root_password: devpw
# Variables to accompany `group_vars/development/wordpress_sites.yml`
# Note: the site name (`example.com`) must match up with the site name in the above file.
vault_wordpress_sites:
  elfaro.com:
    admin_password: admin
    env:
      db_password: example_dbpassword

Una vez que definimos estos valores estamos en condiciones de generar mediante la cli de trellis, el archivo .env, que se ubicará en la carpeta site

cd trellis
trellis dotenv
cd ..

Así debería verse el archivo .env

DB_HOST=‘localhost‘
DB_NAME=‘elfaro_com_development‘
DB_PASSWORD=‘example_dbpassword‘
DB_USER=‘elfaro_com‘
DB_USER_HOST=‘localhost‘
DISABLE_WP_CRON=‘True‘
DOMAIN_CURRENT_SITE=‘elfaro.test‘
WP_DEBUG_LOG=‘/srv/www/elfaro.com/logs/debug.log‘
WP_ENV=‘development‘
WP_HOME=‘http://elfaro.test‘
WP_SITEURL=‘http://elfaro.test/wp‘

4. Creación de Base de Datos

Esto puede hacerse a través de un gestor de bases de datos MySQL o a través de la línea de comandos. Vamos a hacerlo con esto último.

mysql -u root
CREATE DATABASE elfaro_com_development;
CREATE USER ‘elfaro_com‘@‘localhost‘ IDENTIFIED BY ‘example_dbpassword‘;
GRANT ALL PRIVILEGES ON elfaro_com_development.* TO ‘elfaro_com‘@‘localhost‘;

De esta manera, creamos la base de datos localmente, un usuario y le damos los permisos necesarios para que pueda conectarse e interactuar con ella.

5. Link Valet

Para que valet interprete correctamente los proyectos de Roots con trellis tenemos que instalar un driver de valet. https://github.com/danielroe/trellis-valet-driver

cd ~/.config/valet/Drivers/
nano TrellisValetDriver.php
cd -

Y copiamos el contenido de este archivo allí. https://github.com/danielroe/trellis-valet-driver/blob/master/TrellisValetDriver.php

Vamos a decirle a valet, que cuando escribimos elfaro.test en nuestro browser, queremos que mire a la raíz de la carpeta de nuestro proyecto.

# .
valet link

6. Instalación WordPress

Vamos al dominio, en nuestro caso http://elfaro.test/, y veremos el panel de instalación de WordPress. Pueden instalarlo de esa manera o, también, mediante la cli de WordPress con este comando.

Vamos a la carpeta site.

# site
wp core install --url=elfaro.test --title=Example --admin_user=admin --admin_password=admin --admin_email=admin@admin.com

Una vez que instalamos WordPress deberíamos poder ver el sitio 🎉

7. Instalación y activación del Theme

Instalamos Sage en la carpeta site/web/app/themes mediante git. Desde la raíz del proyecto. Podamos nombrar a la carpeta del themo como quisiéramos.

# .
git clone git@github.com:roots/sage.git site/web/app/themes/sage && rm -rf site/web/app/themes/sage/.git

Una vez instalado Sage tenemos que instalar los paquetes de composer y activar los paquetes de npm.

Dentro del theme (en este caso site/web/app/themes/sage)

cd site/web/app/themes/sage
composer install
yarn && yarn build

Vamos a activar el theme. Podemos hacerlo a través del admin de WordPress o, nuevamente, a través de la cli, desde la carpeta site

wp theme activate sage

Con esto, ya estamos en condiciones de empezar a trabajar con el theme de Sage 🙂

8. Commit inicial en Git

Hacemos el commit inicial en git y podemos hacer el push en nuestro servicio de preferencia.

# .
git init
git add .
git commit -m "Initial commit"
Share on:
Roots

Author

José Debuchy