Cómo migrar de WordPress al generador de sitios estáticos de Eleventy

Eleventy es un generador de sitios estáticos. Vamos a profundizar en por qué querría usar un generador de sitios estáticos, entrar en el meollo de la cuestión de convertir un sitio simple de WordPress a Eleventy y hablar sobre los pros y los contras de administrar el contenido de esta manera. ¡Vamos!

¿Qué es un generador de sitio estático?

Comencé mi carrera de desarrollo web hace décadas, a mediados de la década de 1990, cuando HTML y CSS eran lo único que necesitabas para poner en marcha un sitio web. Esos sitios web simples y estáticos eran rápidos y receptivos. Sin embargo, avanzando rápidamente hasta el día de hoy, un sitio web simple puede ser bastante complicado.

En el caso de WordPress, pensemos en lo que se necesita para renderizar una página web. El PHP del lado del servidor de WordPress, que se ejecuta en los servidores de un host, hace el trabajo pesado de consultar una base de datos MySQL en busca de metadatos y contenido, elige las versiones correctas de las imágenes almacenadas en un sistema de archivos estático y lo fusiona todo en una plantilla basada en un tema antes devolviéndolo al navegador. Es un proceso dinámico para cada solicitud de página, aunque la mayoría de las páginas web que he visto generadas por WordPress no son realmente tan dinámicas. La mayoría de los visitantes, si no todos, experimentan contenido idéntico.

Los generadores de sitios estáticos vuelven el modelo a ese enfoque de hace décadas. En lugar de ensamblar páginas web dinámicamente, los generadores de sitios estáticos toman el contenido en forma de Markdown, lo fusionan con plantillas y crean páginas web estáticas. Este proceso ocurre fuera del ciclo de solicitud cuando los usuarios navegan por su sitio. Todo el contenido ha sido pregenerado y se sirve a la velocidad del rayo con cada solicitud. Los servidores web están literalmente haciendo lo que anuncian: servir. Sin base de datos. Sin complementos de terceros. Solo HTML puro, CSS, JavaScript e imágenes. Esta pila tecnológica simplificada también equivale a una superficie de ataque más pequeña para los piratas informáticos. Hay una pequeña infraestructura del lado del servidor para explotar, por lo que su sitio es inherentemente más seguro.

Los principales generadores de sitios estáticos también tienen muchas funciones, y eso puede ser un argumento convincente para despedirse de las pilas de tecnología que son el sello distintivo de los sistemas de administración de contenido modernos.

Si ha estado en esta industria por un tiempo, puede recordar el producto Dreamweaver de Macromedia (anterior a Adobe). Me encantó el concepto de elementos de biblioteca y plantillas, específicamente cómo me permitieron crear coherencia en varias páginas web. En el caso de Eleventy, los conceptos de plantillas, filtros, códigos abreviados y complementos son análogos cercanos. Empecé todo este viaje después de leer sobre la conversión empresarial de Smashing a JamStack. También leí el libro gratuito de Mathias Biilmann y Phil Hawksworth llamado Modern Web Development on the JAMstack y supe que estaba listo para arremangarme y convertir algo propio.

¿Por qué no utilizar un generador de sitios estáticos?

Los generadores de sitios estáticos requieren un poco de curva de aprendizaje. No podrá pasar fácilmente las funciones editoriales al contenido de entrada, y los casos de uso específicos pueden impedirle usar una. La mayor parte del trabajo que mostraré se realiza en Markdown ya través de la línea de comandos. Dicho esto, hay muchas opciones para usar generadores de sitios estáticos junto con datos dinámicos, comercio electrónico, comentarios y sistemas de calificación.

Tampoco tienes que convertir todo tu sitio de una sola vez. Si tiene una configuración complicada, puede comenzar poco a poco y ver cómo se siente acerca de la generación de sitios estáticos antes de elaborar un plan para resolver algo a escala empresarial. También puede seguir usando WordPress como el mejor sistema de administración de contenido sin cabeza de su clase y usar un SSG para servir contenido de WordPress.

Cómo elegí Eleventy como generador de sitios estáticos

Realice una búsqueda rápida de generadores de sitios estáticos populares y encontrará muchas opciones excelentes para comenzar: Eleventy, Gatsby, Hugo y Jekyll fueron los principales contendientes en mi lista. ¿Como escoger? Hice lo que me vino naturalmente y le pedí a algunos amigos. Eleventy fue un claro líder en mi encuesta de Twitter, pero lo que la aseguró fue un comentario que decía "@eleven_ty se siente muy accesible si uno no sabe lo que está haciendo". ¡Oye, ese soy yo! Lamentablemente, puedo quedar atrapado en la parálisis del análisis. Hoy no… me sentí bien al elegir Eleventy basado en una encuesta y un comentario. Desde entonces, he convertido cuatro sitios de WordPress a Eleventy, usando GitHub para almacenar el código y Netlify para servir los archivos de forma segura. Eso es exactamente lo que vamos a hacer hoy, ¡así que arremanguémonos y sumérjase!

Primeros pasos: arranque del sitio inicial

Eleventy tiene una gran colección de proyectos iniciales. Usaremos el eleventy-netlify-boilerplate de Dan Urbanowicz como punto de partida, anunciado como una “plantilla para construir un sitio web de blog simple con Eleventy e implementarlo en Netlify. Incluye Netlify CMS y Netlify Forms.” Haga clic en "Implementar en netlify" para comenzar. Se le pedirá que conecte Netlify a GitHub, nombre su repositorio (llamo al mío smashing-eleventy-dawson) y luego "Guardar e implementar".

Con eso hecho, algunas cosas sucedieron:

1. El proyecto repetitivo se agregó a su cuenta de GitHub.
2. Netlify asignó un nombre dinámico al proyecto, lo creó y lo implementó.
3. Netlify configuró el proyecto para usar Identidad (si desea usar las funciones de CMS) y Formularios (un formulario de contacto simple).

Como sugiere la captura de pantalla, puede adquirir o asignar un dominio al proyecto y también proteger el sitio con HTTPS. La última característica fue un punto de venta realmente convincente para mí, ya que mi anfitrión había estado cobrando una tarifa exorbitante por SSL. En Netlify, es gratis.

Hice clic en Configuración del sitio, luego en Cambiar nombre del sitio para crear un nombre más apropiado para mi sitio. Por mucho que me gustara jovial-goldberg-e9f7e9, elizabeth-dawson-piano es más apropiado. Después de todo, ¡ese es el sitio que estamos convirtiendo! Cuando visito elizabeth-dawson-piano.netlify.app, veo el contenido repetitivo. ¡Increíble!

Descarguemos el nuevo repositorio a nuestra máquina local para que podamos comenzar a personalizar el sitio. Mi repositorio de GitHub para este proyecto me da el comando git clone que puedo usar en la terminal de Visual Studio Code para copiar los archivos:

• Clonar git →

Luego, seguimos las instrucciones restantes en el archivo README del modelo estándar para instalar las dependencias localmente, editar el archivo _data/metadata.json para que coincida con el proyecto y ejecutar el proyecto localmente.

• npm install @11ty/eleventy
• npm install
• npx eleventy --serve --quiet

Con ese último comando, Eleventy inicia el sitio de desarrollo local en localhost:8080 y comienza a buscar cambios.

Preservar publicaciones, páginas e imágenes de WordPress

El sitio del que nos estamos convirtiendo es un sitio de WordPress existente en elizabethrdawson.wordpress.com. Aunque el sitio es simple, sería genial aprovechar la mayor cantidad posible de ese contenido existente. A nadie le gusta tanto copiar y pegar, ¿verdad? WordPress lo hace fácil usando su función de exportación.

Exportar contenido me da un archivo zip que contiene un extracto XML del contenido del sitio. Export Media Library me da un archivo zip de las imágenes del sitio. El sitio que elegí usar como modelo para este ejercicio es un sitio simple de 3 páginas y está alojado en Wordpress.com. Si tiene alojamiento propio, puede ir a Herramientas > Exportar para obtener el extracto XML, pero dependiendo de su servidor, es posible que necesite usar FTP para descargar las imágenes.

Si abre el archivo XML en su editor, le será de poca utilidad. Necesitamos una forma de incluir publicaciones individuales en Markdown, que es el lenguaje que usaremos con Eleventy. Por suerte para nosotros, hay un paquete para convertir publicaciones y páginas de WordPress a Markdown. Clone ese repositorio en su máquina y coloque el archivo XML en el mismo directorio. La lista de su directorio debería verse así:

Si desea extraer publicaciones del XML, esto funcionará de forma inmediata. Sin embargo, nuestro sitio de muestra tiene tres páginas, por lo que debemos hacer un pequeño ajuste. En la línea 39 de parser.js , cambie "publicación" a "página" antes de continuar.

Asegúrese de hacer una "instalación npm" en el directorio wordpress-export-to-markdown , luego ingrese "node index.js" y siga las indicaciones.

Ese proceso me creó tres archivos: welcome.md , about.md y contact.md . En cada uno, hay material preliminar que describe el título y la fecha de la página, y el Markdown del contenido extraído del XML. "Asunto preliminar" puede ser un término nuevo para usted, y si observa la sección en la parte superior de los archivos .md de muestra en el directorio "páginas", verá una sección de datos en la parte superior del archivo. Eleventy admite una variedad de elementos preliminares para ayudarlo a personalizar su sitio, y el título y la fecha son solo el comienzo. En las páginas de muestra, verá esto en la sección de asuntos preliminares:

 eleventyNavigation: key: Home order: 0

Con esta sintaxis, puede agregar páginas automáticamente a la navegación del sitio. Quería conservar esto con mis nuevas páginas, así que copié y pegué el contenido de las páginas en los archivos repetitivos .md existentes para casa, contacto y acerca de. Nuestro sitio de muestra no tendrá un blog por ahora, así que también eliminaré los archivos .md del directorio "posts". Ahora mi sitio de vista previa local se ve así, ¡así que estamos llegando!

Este parece un buen momento para confirmar y enviar las actualizaciones a GitHub. Algunas cosas suceden cuando confirmo actualizaciones. Tras la notificación de GitHub de que se realizaron actualizaciones, Netlify ejecuta la compilación y actualiza el sitio en vivo. Es el mismo proceso que ocurre localmente cuando actualiza y guarda archivos: Eleventy convierte los archivos Markdown en páginas HTML. De hecho, si busca en su directorio _site localmente, verá la versión HTML de su sitio web, lista para la publicación estática. Entonces, mientras navego a elizabeth-dawson-piano.netlify.app poco después de confirmar, veo las mismas actualizaciones que vi localmente.

Adición de imágenes

Usaremos imágenes del sitio original. En el archivo .eleventy.js , verá que los activos de imágenes estáticas deben ir a la carpeta static/img. Cada página tendrá una imagen destacada, y aquí es donde el material frontal funciona muy bien. En la sección de portada de cada página, agregaré una referencia a la imagen principal:

 hero: `/static/img/performance.jpg`

Eleventy mantiene los diseños de página en la carpeta _includes/layouts . base.njk se usa en todos los tipos de página, por lo que agregaremos este código justo debajo de la navegación, ya que ahí es donde queremos nuestra imagen principal.

 {% if (hero) %} <img class="page-hero" src="{{ hero }}" alt="Hero image for {{ title }}" /> {% endif %}

También incluí una etiqueta de imagen para la foto de Elizabeth en la página Acerca de, usando una clase CSS para alinearla y darle el relleno adecuado. Ahora es un buen momento para comprometerse y ver exactamente qué cambió.

Incrustar un reproductor de YouTube con un complemento

Hay algunos videos de YouTube en la página de inicio. Usemos un complemento para crear el código de inserción de Youtube automáticamente. eleventy-plugin-youtube-embed es una gran opción para esto. Las instrucciones de instalación son bastante claras: instale el paquete con npm y luego inclúyalo en nuestro archivo .eleventy.js . Sin más cambios, esas URL de YouTube se transforman en reproductores integrados. (ver compromiso)

Uso de colecciones y filtros

No necesitamos un blog para este sitio, pero sí necesitamos una forma de informar a la gente sobre los próximos eventos. Nuestros eventos, para todos los efectos, serán como publicaciones de blog. Cada uno tiene un título, una descripción y una fecha.

Hay algunos pasos que necesitamos para crear esta nueva página basada en la colección:

• Cree un nuevo archivo events.md en nuestro directorio de páginas.
• Agregue algunos eventos a nuestro directorio de publicaciones. He agregado archivos .md para un concierto de vacaciones, un concierto de primavera y un recital de otoño.
• Cree una definición de colección en .eleventy.js para que podamos tratar estos eventos como una colección. Así es como se define la colección: recopilamos todos los archivos de Markdown en el directorio de publicaciones y filtramos cualquier cosa que no tenga una ubicación especificada en el frente.

 eleventyConfig.addCollection("events", (collection) => collection.getFilteredByGlob("posts/*.md").filter( post => { return ( item.data.location ? post : false ); }) );

• Agregue una referencia a la colección a nuestro archivo events.md , mostrando cada evento como una entrada en una tabla. Así es como se ve la iteración sobre una colección:

 <table> <thead> <tr> <th>Date</th> <th>Title</th> <th>Location</th> </tr> </thead> <tbody> {%- for post in collections.events -%} <tr> <td>{{ post.date }}</td> <td><a href="{{ post.url }}">{{ post.data.title }}</a></td> <td>{{ post.data.location }}</td> </tr> {%- endfor -%} </tbody> </table>

Sin embargo, nuestro formato de fecha se ve bastante mal.

Afortunadamente, el archivo .eleventy.js ya tiene un filtro titulado readableDate. Es fácil usar filtros en el contenido de los archivos y plantillas de Markdown:

 {{ post.date | readableDate }}

¡Ahora, nuestras fechas están formateadas correctamente! La documentación de filtros de Eleventy profundiza en qué filtros están disponibles en el marco y cómo puede agregar los suyos propios. (ver: cometer)

Pulir el diseño del sitio con CSS

Bien, ahora tenemos un sitio bastante sólido creado. Tenemos páginas, imágenes de héroes, una lista de eventos y un formulario de contacto. No estamos limitados por la elección de ningún tema, por lo que podemos hacer lo que queramos con el diseño del sitio... ¡el cielo es el límite! Depende de usted hacer que su sitio funcione, responda y sea estéticamente agradable. Hice algunos cambios de estilo y marcado para que las cosas lleguen a nuestro compromiso final.

Ahora podemos contarle al mundo todo nuestro arduo trabajo. Publiquemos este sitio.

Publicación del sitio

Ah, pero espera. ¡Ya está publicado! Hemos estado trabajando en este buen flujo de trabajo todo el tiempo, donde nuestras actualizaciones de GitHub se propagan automáticamente a Netlify y se reconstruyen en HTML nuevo y rápido. Las actualizaciones son tan fáciles como un git push. Netlify detecta los cambios de git, procesa la reducción en HTML y sirve el sitio estático. Cuando haya terminado y esté listo para un dominio personalizado, Netlify le permite usar su dominio existente de forma gratuita. Visite Configuración del sitio > Administración de dominios para conocer todos los detalles, incluido cómo puede aprovechar el certificado HTTPS gratuito de Netlify con su dominio personalizado.

Avanzado: imágenes, formularios de contacto y gestión de contenido

Este era un sitio simple con solo unas pocas imágenes. Sin embargo, es posible que tenga un sitio más complicado. El servicio de medios grandes de Netlify le permite cargar imágenes de resolución completa en GitHub y almacena un puntero a la imagen en medios grandes. De esa manera, su repositorio de GitHub no está repleto de datos de imágenes, y puede agregar fácilmente marcas a su sitio para solicitar recortes y tamaños de imágenes optimizados en el momento de la solicitud. Probé esto en mis propios sitios más grandes y quedé muy contento con la capacidad de respuesta y la facilidad de configuración.

¿Recuerda ese formulario de contacto que se instaló con nuestro modelo estándar? Simplemente funciona. Cuando envíe el formulario de contacto, verá los envíos en la sección de administración de Netlify. Seleccione "Formularios" para su sitio. Puede configurar Netlify para que le envíe un correo electrónico cuando reciba un nuevo envío de formulario, y también puede agregar una página de confirmación personalizada en el código de su formulario. Cree una página en su sitio en /contact/success , por ejemplo, y luego dentro de la etiqueta de su form (en form.njk ), agregue action="/contact/success" para redirigir a los usuarios allí una vez que se haya enviado el formulario.

El modelo también configura el sitio para ser utilizado con el administrador de contenido de Netlify. Configurar esto para que funcione bien para una persona no técnica está más allá del alcance de este artículo, pero puede definir plantillas y hacer que las actualizaciones se realicen en el administrador de contenido de Netlify, sincronizarse con GitHub y desencadenar redespliegues automáticos de su sitio. Sin embargo, si se siente cómodo con el flujo de trabajo de realizar actualizaciones en Markdown y enviarlas a GitHub, es probable que esta capacidad sea algo que no necesite.

• Sitio web convertido final (resultado)
• Repositorio GitHub

Otras lecturas

Aquí hay algunos enlaces a los recursos utilizados a lo largo de este tutorial y algunos otros conceptos más avanzados si desea profundizar más.

• “Cómo Smashing Magazine gestiona el contenido: migración de WordPress a JAMstack”, Sarah Drasner
• "Desarrollo web moderno en JAMstack", Mathias Biilmann y Phil Hawksworth
• “Eleventy es un generador de sitios estáticos más simple”, Eleventy Docs
• “Proyectos iniciales”, Eleventy Docs
• "Documentos de medios grandes", Netlify
• "Opciones de configuración", Netlify CMS
• “12 cosas que aprendí después de convertir sitios de WordPress a Eleventy”, Scott Dawson