#jdmad19
Convierte tu Joomla! a estático
haciéndola inhackeable y ultrarrápido
Javier Olivares

SOBRE MÍSOBRE MÍ
Ingeniero de Teleco e Informática
11 años de experiencia como desarrollador web
8 años de experiencia alojando páginas web
Actualmente CTO en staging4all/deploy2static
Javier Olivares
javi@staging4all.com
@j44z / @staging4all

SOBRE ESTA CHARLASOBRE ESTA CHARLA
1. Definición: Página estática
2. Un poco de historia de la web
3. Ventajas de las páginas estáticas
4. Qué puede hacer y qué no una página estática
5. Idea: Usando Joomla como generador estático
6. Del dicho al hecho: ¿Cómo podemos hacerlo?

DEFINICIÓN:DEFINICIÓN:
¿QUÉ ENTENDEMOS POR UNA PÁGINA¿QUÉ ENTENDEMOS POR UNA PÁGINA
ESTÁTICA?ESTÁTICA?
Ficheros HTML
"Activos" (assets)
CSS
Javascript
Media (Imágenes, vídeos, PDFs, etc)
NO hay lenguajes interpretados de servidor
(PHP, Ruby, Python, etc)
Sin base de datos

AL PRINCIPIO DE LOS TIEMPOSAL PRINCIPIO DE LOS TIEMPOS
HABÍA PÁGINAS ESTÁTICAS...HABÍA PÁGINAS ESTÁTICAS...

PÁGINAS ESTÁTICAS:PÁGINAS ESTÁTICAS:
LAS PRIMERAS PÁGINAS WEBLAS PRIMERAS PÁGINAS WEB
Conocimientos técnicos
Páginas simples
Sin interacción
Tediosas de modificar
Se trabaja sólo cuando hay cambios en contenido
Tareas: desarrollo = diseño

APARECEN LENGUAJES INTERPRETADOSAPARECEN LENGUAJES INTERPRETADOS
PHP (PERSONAL HOME PAGE)PHP (PERSONAL HOME PAGE)
Conocimientos más técnicos aún (lenguaje de
programación)
Páginas algo más complejas
Con algo de interacción (formularios, búsquedas)
Bases de datos
Organización del contenido - bases para separación
diseño / estructura
Algo menos tediosas de modificar
Tareas: desarrollo = diseño, mantenimiento de contenido

LA ERA DEL CMSLA ERA DEL CMS
¿EL SISTEMA PERFECTO?¿EL SISTEMA PERFECTO?
Muy pocos conocimientos técnicos
Fáciles de usar
Páginas complejas
La interacción es universal (formularios, búsquedas,
comentarios, foros, blogs)
Frontend/Backend
Multiusuario
Temas/plantillas
Extensiones
El cliente actualiza su web de forma autónoma

CON EL TIEMPO...CON EL TIEMPO...
DESVENTAJAS DE LOS CMSDESVENTAJAS DE LOS CMS
Lentos/pesados
Difíciles (y caros) de escalar
Riesgo de hackeo (Zero Days, exploits)
Muchos plugins/extensiones... con el tiempo se
convierten en una carga
Actualizar PHP o la versión muchas veces deja webs
atrás...
Requieren mantenimiento técnico
Tareas: desarrollo, diseño, mantenimiento de contenido,
mantenimiento técnico

NADIE CUESTIONA QUENADIE CUESTIONA QUE
ACTUALIZAR EL PHP ES DIFÍCILACTUALIZAR EL PHP ES DIFÍCIL
Datos de developers.joomla.org, wordpress.org, w3techs.com

PORQUE ACTUALIZAR, PUEDEPORQUE ACTUALIZAR, PUEDE
ROMPER TU WEB...ROMPER TU WEB...

SOLUCIONESSOLUCIONES
Sistemas de Backup
(Akeeba, BackupMonkey, Watchful...)
Sistemas de actualizaciones automáticas/en masa
(MyJoomla/mySites, Watchful, softaculous...)
Sistemas de checkeo de integridad - hackeos
(SecurityCheck, AdminTools, SiteLock...)
Sistemas de Monitorado
(UptimeRobot, StatusCake, Pingdom...)
Sistemas de Staging
(Siteground, softaculous, staging4all...)

ACTUALIZAMOS MÁS A MENUDOACTUALIZAMOS MÁS A MENUDO
EL CMS EN SÍ QUE EL CONTENIDO...EL CMS EN SÍ QUE EL CONTENIDO...

HOY EN DÍAHOY EN DÍA
LA WEB SIGUE EVOLUCIONANDOLA WEB SIGUE EVOLUCIONANDO
SERVERLESSSERVERLESS
&&
RENACIMIENTO DE SITIOSRENACIMIENTO DE SITIOS
ESTÁTICOSESTÁTICOS

RESURGIR DE PÁGINAS ESTÁTICASRESURGIR DE PÁGINAS ESTÁTICAS
Porque son:
Rápidas - La velocidad mejora el SEO
Superfáciles de escalar (y baratas)
No hackeables - seguras
NO requieren mantenimiento técnico

LAS PÁGINAS ESTÁTICAS REVISITADAS (1/2)LAS PÁGINAS ESTÁTICAS REVISITADAS (1/2)
EXPLOSIÓN DE GENERADORES ESTÁTICOSEXPLOSIÓN DE GENERADORES ESTÁTICOS
Por simplicidad de mantenimiento
(blogs usando markdown, etc)
Por velocidad de carga y escalado
Por sencillez de despliegue (git)
Por seguridad
Para usarlos como base con stacks JAM (Javascript,
APIs, Markup)
Frameworks modernos de Javascript (React, Vue, etc)

+ de 250 generadores de páginas estáticas modernos
https://staticgen.com

LAS PÁGINAS ESTÁTICAS REVISITADAS (2/2)LAS PÁGINAS ESTÁTICAS REVISITADAS (2/2)
ALOJAMIENTOS WEB ESTÁTICOSALOJAMIENTOS WEB ESTÁTICOS

¿HAY SITIO PARA NUESTRO CMS EN UN¿HAY SITIO PARA NUESTRO CMS EN UN
MUNDO ESTÁTICO?MUNDO ESTÁTICO?

CONVERTIR UNA WEB A ESTÁTICOCONVERTIR UNA WEB A ESTÁTICO
MANUALMENTE:MANUALMENTE:
MUCHAS HERRAMIENTAS:MUCHAS HERRAMIENTAS:
Generar versión estática (ficheros)
Subir los ficheros manualmente y reemplazar la web
Cyotek Webcopy, Website Downloader, Offline Explorer,
SiteSucker, Teleport Pro, WebScrapbook...

CONVERTIR UNA WEB A ESTÁTICO:CONVERTIR UNA WEB A ESTÁTICO:
proceso unidireccional e irreversible

Pero...
queremos una solución que sea sencilla y
que nos permita trabajar de forma fluida

¿QUÉ PASARÍA SI...¿QUÉ PASARÍA SI...
USAMOS JOOMLA! COMO GENERADORUSAMOS JOOMLA! COMO GENERADOR
ESTÁTICO?ESTÁTICO?

EL CONCEPTO DESEADOEL CONCEPTO DESEADO

LO MEJOR DE LOS DOS MUNDOS:LO MEJOR DE LOS DOS MUNDOS:
Fáciles de actualizar
Sin conocimientos técnicos
Multiusuario
El cliente actualiza su web de forma autónoma
100% seguras
Superrápidas
Fáciles y baratas de escalar
Sin mantenimiento técnico

¿ESTA VEZ, EL SISTEMA PERFECTO?¿ESTA VEZ, EL SISTEMA PERFECTO?

¿QUÉ PIERDO AL CONVERTIR MI WEB A ESTÁTICA?¿QUÉ PIERDO AL CONVERTIR MI WEB A ESTÁTICA?
Todo tipo de procesamiento en el servidor
Procesos complejos
Publicación programada, etc
Procesos a medida del usuario
Sistemas en los que el visitante modifica la página
(foros, etc)
Áreas privadas, intranets...
¿Interactividad?

¿QUÉ PÁGINAS PODRÍAN¿QUÉ PÁGINAS PODRÍAN
BENEFICIARSE DE ESTO?BENEFICIARSE DE ESTO?
Presencia online
Corporativas
Blogs
Portfolio
Noticias
Catálogos
¿Otras?

¿QUÉ OCURRE CON LA INTERACCIÓN?¿QUÉ OCURRE CON LA INTERACCIÓN?

¿QUÉ MÁS HA CAMBIADO¿QUÉ MÁS HA CAMBIADO
DESDE LOS 90S?DESDE LOS 90S?
1. Javascript
2. Filosofía: Monolito vs. delegación
¿Y qué podemos hacer con eso?

INTERACCIÓNINTERACCIÓN

FORMULARIOS DE CONTACTOFORMULARIOS DE CONTACTO
Serverless function (lambda, GCP, etc)
Servicios externos/de terceros (POST, Javascript)
Mautic (open source, self hosted or cloud)
Formspree.io
Getform.io
Formden.com
Wufoo.com
...
Requisitos: notificar/enviar email, filtrado de spam

NEWSLETTERSNEWSLETTERS
Servicios externos/de terceros (POST, Javascript)
Mautic (open source, self hosted or cloud)
phplists (open source)
mailchimp.com
sendgrid.com
mailjet.com
...
Requisitos: notificar/enviar email, filtrado de spam

COMENTARIOSCOMENTARIOS
Serverless function -> integrarlo con el backend
Servicios externos/de terceros mediante Javascript
disqus.com
isso (open source, self hosted)
Commento.io
...
Necesitan: moderación, notificar/enviar email, filtrado de
spam

BÚSQUEDABÚSQUEDA
Plugins Javascript
Servicios externos/de terceros mediante Javascript
google.com
algolia.com
elasticsearch
...

COOKIE BANNERSCOOKIE BANNERS
Mediante Javascript
https://github.com/dobarkod/cookie-banner -
(open source)
cookiebot.com
websitepolicies.com
...

ECOMMERCEECOMMERCE
Servicios externos/de terceros mediante Javascript
snipcart.com
reactioncommerce.com
apicart.net
moltin.com
chargebee.com - suscripciones
recurly.com - suscripciones
...
Directamente a través de las pasarelas de pago
paypal.com
stripe.com
mollie.com
...

¿Y ENTONCES, CÓMO LO¿Y ENTONCES, CÓMO LO
HACEMOS?HACEMOS?

CONVERTIR TU SITIO A ESTÁTICO (1/5)CONVERTIR TU SITIO A ESTÁTICO (1/5)
ENTORNOS DE DESARROLLO:ENTORNOS DE DESARROLLO:
Locales
Cloud/online
Multiusuario
Siempre disponibles
Permiten al cliente a gestionar su propia web
como con el CMS

CONVERTIR TU SITIO A ESTÁTICO (2/5)CONVERTIR TU SITIO A ESTÁTICO (2/5)
OPCIONES DE CONVERSIÓN:OPCIONES DE CONVERSIÓN:
Hazlo tú mismo
Requiere conocimientos técnicos (scripts)
Servicios de terceros
Acceso más universal (soluciones 1 click)

HAZLO TÚ MISMOHAZLO TÚ MISMO

CONVERTIR TU SITIO A ESTÁTICO (3/5)CONVERTIR TU SITIO A ESTÁTICO (3/5)
HAZLO TU MISMO:HAZLO TU MISMO:
Actualizar el contenido
Realizar la conversión a estático
Despliegue: subir el sitio al alojamiento web
Automatización: scripts, git hooks, rsync, FTP, etc
Contenido dinámico: soluciones propias o de
terceros

CONVERTIR TU SITIO A ESTÁTICO (3/5)CONVERTIR TU SITIO A ESTÁTICO (3/5)
HAZLO TÚ MISMO:HAZLO TÚ MISMO:
Software:
Joomla Plugins
wget
Httrack
Headless Chrome/Puppeteer
Se pueden integrar en un flujo de trabajo
automático o semi-automático

JOOMLA PLUGINSJOOMLA PLUGINS
Static content
Con un click, generar el sitio como estático
Estado actual: abandonado
¿Oportunidad?
https://github.com/juliopontes/staticcontent

WGETWGET
Solo CLI
Software maduro (1996)
Muchas opciones
Único comando, simple
https://www.gnu.org/software/wget/manual/wget.html
wget --mirror --convert-links --page-requisites https://mywebsite.com

HTTRACKHTTRACK
UI + CLI
Software maduro (1998)
Muchísimas opciones
Único comando, simple
http://www.httrack.com
httrack -I0 -sN0 -N1 https://mywebsite.com

HEADLESS CHROME + PUPPETEERHEADLESS CHROME + PUPPETEER
Sólo CLI/scripts
Nuevo
Muchas opciones
Complejo de poner en marcha
https://fettblog.eu/scraping-with-puppeteer/
page.on('response', async (response) => {
const url = new URL(response.url());
let filePath = path.resolve(`./output${url.pathname}`);
if (path.extname(url.pathname).trim() === '') {
filePath = `${filePath}/index.html`;
}
await fse.outputFile(filePath, await response.buffer());
});

SCRIPTS/AUTOMATIZACIÓN:SCRIPTS/AUTOMATIZACIÓN:
Trigger: git hook, webhooks, command line, cronjob
Scripts de conversión
Scripts de despliegue
Se pueden incorporar a un flujo CI/CD

SOLUCIONES DESOLUCIONES DE
TERCEROSTERCEROS

CONVERTIR TU SITIO A ESTÁTICO (4/5)CONVERTIR TU SITIO A ESTÁTICO (4/5)
INTEGRADAS CON EL ALOJAMIENTO:INTEGRADAS CON EL ALOJAMIENTO:
Proveedores: (sólo WordPress :( )
HardyPress.com
getshifter.io
Northstack.com (beta)
Strattic.com (beta)
Contenido dinámico
Formularios integrados
Búsqueda con plugins

CÓMO FUNCIONAN:CÓMO FUNCIONAN:
CMS en entorno privado (subdominio o docker)
Cuando se actualiza el contenido, se regenera y
publica
Los formularios se gestionan desde el panel de
control
Potencialmente compatibles con Joomla!
Suscripción mensual
Implica cambiar de alojamiento

CONVERTIR TU SITIO A ESTÁTICO (5/5)CONVERTIR TU SITIO A ESTÁTICO (5/5)
SOLUCIONES EXTERNAS:SOLUCIONES EXTERNAS:
Proveedores:
staging4all.com
mystatic.website (próximamente)
deploy2static.com (próximamente)

STAGING4ALL:STAGING4ALL:
Compatible con Joomla! y WordPress
CMS en entorno de staging privado (subdominio
protegido por contraseña)
Cuando se actualiza el contenido, se regenera y
publica
Los formularios se gestionan desde el panel de
control
Multiusuario
Suscripción mensual
No necesita cambiar de alojamiento
https://staging4all.com

MYSTATIC.WEBSITE:MYSTATIC.WEBSITE:
Compatible con Joomla!
Dirigido a sitios Joomla! Legacy (versiones antiguas)
A través de empresas de hosting
CMS en entorno de staging privado (docker)
Cuando se actualiza el contenido, se regenera y
publica
Suscripción mensual
No necesita cambiar de alojamiento
https://mystatic.website

DEPLOY2STATIC:DEPLOY2STATIC:
Compatible con cualquier CMS (externo)
Regenera la versión estática directamente sobre
producción (no sobreescribe)
Dos modos: dinámico (CMS) y estático
Para actualizar el contenido hay que conmutar a
CMS primero
Cuando se actualiza el contenido, se regenera y
publica
Formularios: integrados en panel de control
Sistema de créditos (pago por despliegue)
No necesita cambiar de alojamiento
https://deploy2static.com

¡USA JOOMLA! COMO UN¡USA JOOMLA! COMO UN
GENERADOR ESTÁTICOGENERADOR ESTÁTICO
Y HAZ TUS SITIOSY HAZ TUS SITIOS
INHACKEABLES Y ULTRARRÁPIDOS!INHACKEABLES Y ULTRARRÁPIDOS!

PREGUNTASPREGUNTAS

¡MUCHAS GRACIAS!¡MUCHAS GRACIAS!
Javier Olivares
javi@staging4all.com
@j44z / @staging4all