Hoy en día las webs sufren constantemente ataques y esto nos obliga a estar siempre pendientes de nuevas actualizaciones o a revisar constantemente por si nuestra web ha podido ser hackeada. Esto consume tiempo y recursos, y muchas veces actualizamos la versión de nuestro Joomla! muchas más veces que el propio contenido de la web.
¿Qué pasaría si tu web fuera inhackeable? Ahorrarías mucho tiempo y ganarías en tranquilidad, ¿no?
En esta charla veremos las ventajas y desventajas de las webs estáticas y en qué casos nos puede interesar.
Luego veremos diversas formas de conseguir este objetivo y a qué funcionalidades tenemos que renunciar y a cuáles no.
Buscadores, formularios, comentarios, eCommerce ¿podrían seguir funcionando? Veremos cómo mantener tu Joomla en tu entorno de desarrollo (local u online) y cómo desplegar una versión estática a tu alojamiento, pero ahora ya sólo cuando cambies el contenido.
2. 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
3. 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?
4. 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
5. AL PRINCIPIO DE LOS TIEMPOSAL PRINCIPIO DE LOS TIEMPOS
HABÍA PÁGINAS ESTÁTICAS...HABÍA PÁGINAS ESTÁTICAS...
6. 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
7. 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
8. 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
9.
10. 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
11. 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
13. 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...)
14. ACTUALIZAMOS MÁS A MENUDOACTUALIZAMOS MÁS A MENUDO
EL CMS EN SÍ QUE EL CONTENIDO...EL CMS EN SÍ QUE EL CONTENIDO...
15. HOY EN DÍAHOY EN DÍA
LA WEB SIGUE EVOLUCIONANDOLA WEB SIGUE EVOLUCIONANDO
SERVERLESSSERVERLESS
&&
RENACIMIENTO DE SITIOSRENACIMIENTO DE SITIOS
ESTÁTICOSESTÁTICOS
16. 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
17.
18. 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)
19. + de 250 generadores de páginas estáticas modernos
https://staticgen.com
20. LAS PÁGINAS ESTÁTICAS REVISITADAS (2/2)LAS PÁGINAS ESTÁTICAS REVISITADAS (2/2)
ALOJAMIENTOS WEB ESTÁTICOSALOJAMIENTOS WEB ESTÁTICOS
21. ¿HAY SITIO PARA NUESTRO CMS EN UN¿HAY SITIO PARA NUESTRO CMS EN UN
MUNDO ESTÁTICO?MUNDO ESTÁTICO?
22. 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...
23. CONVERTIR UNA WEB A ESTÁTICO:CONVERTIR UNA WEB A ESTÁTICO:
proceso unidireccional e irreversible
27. 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
28. ¿ESTA VEZ, EL SISTEMA PERFECTO?¿ESTA VEZ, EL SISTEMA PERFECTO?
29. ¿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?
30. ¿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?
31. ¿QUÉ OCURRE CON LA INTERACCIÓN?¿QUÉ OCURRE CON LA INTERACCIÓN?
32. ¿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?
36. 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
39. 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
...
42. 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
43. 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)
45. 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
46. 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
47. JOOMLA PLUGINSJOOMLA PLUGINS
Static content
Con un click, generar el sitio como estático
Estado actual: abandonado
¿Oportunidad?
https://github.com/juliopontes/staticcontent
48. 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
53. 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
54. 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
55. 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)
56. 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
57. 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
58. 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
59. ¡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!