Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Convierte tu Joomla! a estático, haciéndola inhackeable y ultrarrápida - Javier Olivares

439 views

Published on

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.

Published in: Software
  • Be the first to comment

  • Be the first to like this

Convierte tu Joomla! a estático, haciéndola inhackeable y ultrarrápida - Javier Olivares

  1. 1. #jdmad19 Convierte tu Joomla! a estático haciéndola inhackeable y ultrarrápido Javier Olivares
  2. 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. 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. 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. 5. AL PRINCIPIO DE LOS TIEMPOSAL PRINCIPIO DE LOS TIEMPOS HABÍA PÁGINAS ESTÁTICAS...HABÍA PÁGINAS ESTÁTICAS...
  6. 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. 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. 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. 9. 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
  10. 10. 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
  11. 11. PORQUE ACTUALIZAR, PUEDEPORQUE ACTUALIZAR, PUEDE ROMPER TU WEB...ROMPER TU WEB...
  12. 12. 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...)
  13. 13. ACTUALIZAMOS MÁS A MENUDOACTUALIZAMOS MÁS A MENUDO EL CMS EN SÍ QUE EL CONTENIDO...EL CMS EN SÍ QUE EL CONTENIDO...
  14. 14. HOY EN DÍAHOY EN DÍA LA WEB SIGUE EVOLUCIONANDOLA WEB SIGUE EVOLUCIONANDO SERVERLESSSERVERLESS && RENACIMIENTO DE SITIOSRENACIMIENTO DE SITIOS ESTÁTICOSESTÁTICOS
  15. 15. 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
  16. 16. 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)
  17. 17. + de 250 generadores de páginas estáticas modernos https://staticgen.com
  18. 18. LAS PÁGINAS ESTÁTICAS REVISITADAS (2/2)LAS PÁGINAS ESTÁTICAS REVISITADAS (2/2) ALOJAMIENTOS WEB ESTÁTICOSALOJAMIENTOS WEB ESTÁTICOS
  19. 19. ¿HAY SITIO PARA NUESTRO CMS EN UN¿HAY SITIO PARA NUESTRO CMS EN UN MUNDO ESTÁTICO?MUNDO ESTÁTICO?
  20. 20. 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...
  21. 21. CONVERTIR UNA WEB A ESTÁTICO:CONVERTIR UNA WEB A ESTÁTICO: proceso unidireccional e irreversible
  22. 22. Pero... queremos una solución que sea sencilla y que nos permita trabajar de forma fluida
  23. 23. ¿QUÉ PASARÍA SI...¿QUÉ PASARÍA SI... USAMOS JOOMLA! COMO GENERADORUSAMOS JOOMLA! COMO GENERADOR ESTÁTICO?ESTÁTICO?
  24. 24. EL CONCEPTO DESEADOEL CONCEPTO DESEADO  
  25. 25. 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
  26. 26. ¿ESTA VEZ, EL SISTEMA PERFECTO?¿ESTA VEZ, EL SISTEMA PERFECTO?
  27. 27. ¿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?
  28. 28. ¿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?
  29. 29. ¿QUÉ OCURRE CON LA INTERACCIÓN?¿QUÉ OCURRE CON LA INTERACCIÓN?
  30. 30. ¿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?
  31. 31. INTERACCIÓNINTERACCIÓN
  32. 32. 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
  33. 33. 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
  34. 34. 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
  35. 35. BÚSQUEDABÚSQUEDA Plugins Javascript Servicios externos/de terceros mediante Javascript google.com algolia.com elasticsearch ...
  36. 36. COOKIE BANNERSCOOKIE BANNERS Mediante Javascript https://github.com/dobarkod/cookie-banner - (open source) cookiebot.com websitepolicies.com ...
  37. 37. 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 ...
  38. 38. ¿Y ENTONCES, CÓMO LO¿Y ENTONCES, CÓMO LO HACEMOS?HACEMOS?  
  39. 39. 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
  40. 40. 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)
  41. 41. HAZLO TÚ MISMOHAZLO TÚ MISMO
  42. 42. 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
  43. 43. 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
  44. 44. JOOMLA PLUGINSJOOMLA PLUGINS Static content Con un click, generar el sitio como estático Estado actual: abandonado ¿Oportunidad? https://github.com/juliopontes/staticcontent
  45. 45. 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
  46. 46. HTTRACKHTTRACK UI + CLI Software maduro (1998) Muchísimas opciones Único comando, simple http://www.httrack.com httrack -I0 -sN0 -N1 https://mywebsite.com
  47. 47. 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()); });
  48. 48. 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
  49. 49. SOLUCIONES DESOLUCIONES DE TERCEROSTERCEROS
  50. 50. 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
  51. 51. 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
  52. 52. 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)
  53. 53. 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
  54. 54. 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
  55. 55. 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
  56. 56. ¡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!
  57. 57. PREGUNTASPREGUNTAS
  58. 58. ¡MUCHAS GRACIAS!¡MUCHAS GRACIAS! Javier Olivares javi@staging4all.com @j44z / @staging4all

×