WordPress es un excelente Sistema de Gestión de Contenidos (CMS). Podemos conseguir casi cualquier cosa con él. Debido a su naturaleza dinámica, podemos cambiar cualquier contenido con sólo pulsar un botón. Y aunque esto es asombroso, también conlleva algunos peligros, y puede resultar difícil de mantener cuando hay mucho tráfico.

Convertir tu sitio web WordPress en un sitio estático puede resolver esos problemas.

¿Qué Son los Sitios Web Estáticos?

Para explicar cómo funcionan los sitios web estáticos, primero tenemos que entender cómo funcionan los sitios web dinámicos.

Cada vez que visitamos un sitio web, el servidor tiene que analizar los archivos PHP, consultar la base de datos para obtener los datos y, al final, devolver el HTML renderizado al navegador.

Los sitios web estáticos hacen todo el trabajo pesado primero: antes de visitar el sitio web, guardamos cada página como HTML estático. Cuando visitamos la página deseada, el servidor la sirve tal cual.

Ventajas de Tener un Sitio Estático

Velocidad y rendimiento

Los sitios web estáticos son rápidos y eficaces. ¿Por qué? Porque son sólo HTML estático. Esto significa que el servidor sólo debe hacer una cosa: servir el sitio web. No tiene que analizar nada ni esperar datos de la base de datos.

Además, los sitios web estáticos son más fáciles de alojar en CDNs (aunque Edge Cache funciona de forma similar), que coloca todos los archivos lo más cerca posible de ti.

En general, los sitios web estáticos tienen un rendimiento asombroso con mucho tráfico.

Seguridad

El núcleo de WordPress es seguro, realmente lo es. Pero los plugins y temas… no siempre. Además, cualquiera puede intentar empezar a adivinar nuestro nombre de usuario y contraseña.

En general, me gusta comparar WordPress con una casa con muchas puertas y ventanas. Depende de nosotros elegir las más seguras, pero aun así, si una puerta no es lo suficientemente segura, un hacker puede piratear nuestro sitio web.

Convertir tu sitio web en estático elimina la mayoría de los vectores de ataque. Al ser sólo HTML, un hacker no podrá utilizar plugins vulnerables ni beneficiarse de una contraseña débil.

Tranquilidad

Una configuración típica de WordPress consta de muchas partes móviles – servidores PHP y de bases de datos, temas o plugins – y cada parte puede romperse. Con static, eliminamos la mayoría de ellas. Nuestro servidor es más sencillo, ya que sólo sirve HTML, y nuestro contenido se difunde por todo el mundo gracias a la CDN, que lo protege contra DDoS.

Como resultado, la probabilidad de que algo se rompa es mucho menor de lo habitual.

Los Contras de Tener un Sitio Estático

Soluciones provisionales

Estamos acostumbrados a que cosas como buscar en el sitio web, añadir comentarios o enviar formularios funcionen a la primera con WordPress. Con estático, ya no es tan sencillo. Al convertir todo a HTML, perdimos esas posibilidades.

Tenemos que utilizar algunas herramientas de terceros para volver a añadir esta funcionalidad.

Proceso de construcción

Estamos acostumbrados a que el nuevo contenido esté disponible en nuestro sitio web tras pulsar el botón de publicar. Con el enfoque estático, debemos convertir nuestro sitio web cada vez que queramos actualizarlo. Así que pueden pasar unos minutos entre que pulsamos el botón y lo tenemos disponible para todos.

Pasos previos

Antes de empezar, debemos tener en cuenta algunas cosas.

1. Crear un repositorio Git

En este ejemplo utilizamos GitHub, pero puedes utilizar cualquier otra solución Git (como GitLab o BitBucket). Ahora mismo, crea una cuenta (si no tienes ya una) y crea un repositorio vacío.

Después de esto, tenemos que crear un archivo en el repositorio; de lo contrario, no podremos conectarlo a Kinsta.

Añade un archivo a tu repositorio.
Añade un archivo a tu repositorio.

2. Conecta este repositorio con el alojamiento de sitios estáticos

Ve a MyKinsta, selecciona Sitios estáticos en la barra lateral y selecciona Añadir sitio.

Selecciona el repositorio que has creado, y no olvides seleccionar «Despliegue automático en el commit.»

Configuración del alojamiento de sitios estáticos Kinsta.
Configuración del alojamiento de sitios estáticos Kinsta.

Convertir Tu Sitio Web WordPress en Estático

Podemos utilizar varios métodos para convertir nuestro sitio WordPress en estático. En este artículo, repasamos dos de ellos:

  1. Utilizar un plugin WP y Git
  2. Usando WP-CLI, CI/CD y Git

Usar un plugin y Git

Requisitos:

Pasos

  1. Abre tu sitio en el navegador e instala el plugin Simply Static.
  2. Dirígete a Simply Static > Settings > Deployment para establecer el método de despliegue en el Local directory y establece la carpeta local – puedes seguir el consejo que te da el marcador de posición, por ejemplo, /www/kinstaapi_533/public/public_static. Recuerda que el plugin no creará esta carpeta por ti – debes hacerlo manualmente.
  1. Pulsa el botón Generar archivos estáticos .

Después de unos minutos, todos tus archivos estáticos estarán en la carpeta especificada en el paso anterior.

Empuja tu código a un repositorio Git

  1. Crea un repositorio en GitHub.
  2. Abre un Terminal o Powershell, ve a la carpeta con los archivos estáticos y ejecuta
git init
git remote add origin https://github.com/{username}/{repository_name}.git
git add .
git commit -m "static content"
git branch -M main
git push --force -u origin main

Estos comandos conectan el repositorio y envían todos los archivos estáticos a GitHub. El envío de los cambios desencadena un despliegue automático porque ya hemos conectado este repositorio con el alojamiento de sitios estáticos de Kinsta.

La próxima vez que cambies algo en tu WordPress, reconstruye todo el sitio web y ejecútalo:

git add .
git commit -m "static content"
git push --force -u origin main

La versión Pro de Simply Static ofrece un complemento de GitHub que automatiza el proceso de construcción. Aún así, es un complemento de pago, y en algunos casos, hacerlo manualmente puede ser una solución suficientemente buena.

Usar WP-CLI, CI/CD y Git

Este método utiliza el mismo complemento de WP que el método anterior, pero en su versión Premium (de pago), y utiliza un canal de CI/CD de Buddy CI para enviar tu código a un repositorio de GitHub.

Este método es más complicado de configurar, pero requiere menos trabajo manual en cada despliegue. Además, es más extensible, ya que tienes control sobre cada paso. Puedes añadir más acciones a la tubería si lo deseas.

Requisitos:

  • Simply Static Pro (sólo la versión Pro tiene la integración WP-CLI).
  • Tu sitio web tiene que ser de acceso público (por lo que no puede estar en un host local), y el servidor requiere acceso SSH y WP-CLI instalado. El alojamiento WordPress de Kinsta es perfecto.
  • El código base de tu sitio está alojado en un repositorio de GitHub
  • Una herramienta CI/CD para orquestarlo todo. En este ejemplo utilizamos Buddy por su facilidad y sencillez. Pero puedes utilizar cualquier otra herramienta, como GitHub Actions o GitLab CI/CD.

Pasos:

  1. Abre tu sitio WP en tu navegador e instala el plugin Simply Static Pro.
  2. Dirígete a Simply Static > Settings > Deployment para establecer el método de despliegue en el Local directory y establece la ruta correcta – puedes seguir el consejo que te da el marcador de posición, por ejemplo, /www/kinstaapi_533/public/public_static.
  3. Recuerda que el plugin no crea esta carpeta por ti – debes hacerlo manualmente.
  4. Dirígete a tu repositorio de GitHub y crea un token de acceso con escritura para acceder a tus repositorios. Lo necesitaremos pronto.
  5. Accede a tu cuenta en Buddy, añade un nuevo proyecto y conéctalo con tu repositorio.

Vamos a crear una canalización en Buddy que haga lo siguiente:

  1. Ejecuta el comando WP-CLI Simply Static a través de SSH en tu servidor.
  2. Comprime todo.
  3. Lo descarga en el sistema de archivos de Buddy.
  4. Descomprime todo.
  5. Envía todo a tu repositorio Git.

Una visión general del flujo de trabajo propuesto por Buddy.
Una visión general del flujo de trabajo propuesto por Buddy.
  1. En primer lugar, tenemos que añadir una acción llamada Comando SSH.
  2. Dentro de la pestaña Ejecutar CMDs, ejecuta:
wp simply-static run
cd public_static
zip -FSr ../static.zip .

Este script convierte nuestro sitio web en estático y lo comprime.

  1. En la pestaña Target, introduce todas tus credenciales (encuéntralas en MyKinsta) y establece el directorio de trabajo como público.

Configuración del Objetivo Amigo.
Configuración del Objetivo Amigo.
  1. A continuación, añade una acción Shell Local. Dentro de ella, ejecuta
rm -rf *

Este comando garantiza que no habrá ningún archivo que no necesitemos.

  1. Para descargar el archivo zip del servidor, añade una nueva acción (puedes hacerlo pulsando el + en la lista de acciones) y selecciona SFTP Download en la lista. Aparte de las credenciales, tenemos que pasar la ruta al archivo zip y marcar la opción sobrescribir.

Buddy ha configurado la acción Descarga.
Buddy ha configurado la acción Descarga.
  1. Añade otra acción de Shell Local para descomprimir todos los archivos y elimina el archivo zip (ya no lo necesitaremos). Ejecútalo:
unzip -o static.zip
rm static.zip
  1. Ve a la pestaña Ubuntu y selecciona Packages & Tools instalar descomprimir. Para ello, ejecuta
apt-get update && apt-get install -y unzip
  1. El último paso requiere utilizar la acción Git Push. Debes utilizar el Token de Acceso a GitHub que configuraste en el primer paso y su contraseña. Además, no olvides marcar Force Push y Push revision to the specific branch.
Configuración de la acción Push de Buddy.
Configuración de la acción Push de Buddy.

Cuando quieras volver a desplegar tu sitio web, pulsa el botón

Ejecutar en Buddy, y se hará la magia. Si quieres automatizar este proceso, existe un plugin para WordPress que puedes utilizar.

Una visión general del flujo de trabajo propuesto por Buddy.
Una visión general del flujo de trabajo propuesto por Buddy.

Gracias a la documentación de Buddy, puedes comprobar cómo automatizar aún más tu flujo de trabajo.

Otras Formas de Convertir WP en Uno Estático

Generadores de sitios estáticos

Muchos Generadores de Sitios Estáticos pueden permitirte conectar cualquier CMS con una API (WordPress tiene una API REST integrada y GraphQL disponible a través de un plugin). Puedes utilizar Astro, Eleventy o cualquier otro.

Aunque este enfoque te da mucha más flexibilidad, requiere más trabajo que las soluciones anteriores.

Resumen

¿Es una buena idea convertir un sitio WordPress en uno estático? Depende. Hay muchos factores que debes tener en cuenta antes de hacerlo. Sin duda, es una buena idea pensártelo. Como ya hemos dicho, los sitios web estáticos tienen muchas ventajas, y no aprovecharlas puede ser un gran desperdicio.

Maciek Palmowski

Maciek es un desarrollador web que trabaja en Kinsta como Development Advocate Analyst (Analista de Desarrollo). Después del trabajo, pasa la mayor parte del tiempo programando, intentando encontrar noticias interesantes para sus newsletters, o bebiendo café.