Jekyll para desarrolladores de Wordpress

En este artículo, asumiremos el papel de un desarrollador web que crea un sitio web para un bufete de abogados ficticio. WordPress es una opción obvia para un sitio web como este, pero ¿es la única herramienta que debemos considerar? Veamos una forma completamente diferente de construir un sitio web, usando Jekyll.

Lectura adicional en SmashingMag:

• Crea un blog con páginas de Jekyll y GitHub
• Modelado de contenido con Jekyll
• Generadores de sitios estáticos revisados: Jekyll, Middleman, Roots, Hugo
• Por qué los generadores de sitios estáticos son la próxima gran novedad
  

¿Qué es Jekyll?

Jekyll es un generador de sitios web estáticos. En lugar de instalar un software y una base de datos en nuestro servidor, un sitio web de Jekyll es simplemente un directorio de archivos en nuestra computadora. Cuando ejecutamos Jekyll en ese directorio, genera un sitio web estático, que subimos a un proveedor de alojamiento.

¿Por qué Jekyll?

Necesitamos considerar una serie de compensaciones al decidir si Jekyll es adecuado para un proyecto.

Ventajas de Jekyll

• Menos complejidad
  Un sitio web de Jekyll es esencialmente un sitio web estático con un lenguaje de plantillas. Tiene menos componentes para crear y mantener. En el servidor, solo necesitamos un servidor web capaz de servir archivos.
• Velocidad
  Cuando los visitantes ven páginas en los sitios de Jekyll, el servidor devuelve los archivos existentes sin ningún procesamiento adicional . Esto es mucho más rápido que WordPress, que genera páginas dinámicamente en el momento de la solicitud. Nota: los complementos de almacenamiento en caché de WordPress pueden eliminar esta brecha de rendimiento.
• Estabilidad
  WordPress tiene más componentes trabajando juntos para generar páginas para los visitantes. Si un componente falla, es posible que los visitantes no puedan ver el sitio web. Mucho menos puede salir mal cuando un servidor web solo sirve archivos.
• Seguridad
  Wordpress hace mucho para mitigar los riesgos de seguridad, como los ataques de inyección CSRF, XSS o SQL; sin embargo, depende de que siempre tenga las últimas actualizaciones. Los sitios estáticos eliminan este problema porque no hay almacenamiento de datos dinámicos que un pirata informático pueda explotar.
• Fuente controlada
  Un sitio web de Jekyll es un directorio de archivos, por lo que podemos almacenar todo el sitio web en un repositorio de Git. Trabajar con un repositorio nos brinda muchos beneficios (aunque VersionPress está en desarrollo y habilita este flujo de trabajo para WordPress).

Desventajas de Jekyll

• Sin GUI
  Un cliente puede registrarse en WordPress.com, elegir un tema y configurar un sitio web básico por sí mismo. Jekyll es una herramienta de línea de comandos que abruma a la mayoría de los usuarios no técnicos. Hay GUI de terceros para Jekyll, incluidos CloudCannon (descargo de responsabilidad: soy el cofundador), Forestry, Jekyll Admin, Netlify CMS, Prose y Siteleaf. Sin embargo, estos deben ser configurados por el desarrollador antes de ser entregados al cliente.
• Tiempo de construcción
  En nuestra situación, esto no es un problema porque el sitio web se construirá en menos de un segundo. Sin embargo, un sitio web más grande con entre 10 000 y 100 000 publicaciones podría tardar unos minutos en construirse. Esto es frustrante cuando estamos desarrollando porque tenemos que esperar a que se construya el sitio web antes de obtener una vista previa en el navegador.
• Temas
  Jekyll tiene algunos temas disponibles, pero no es nada comparado con los miles de temas disponibles para WordPress.
• Extensibilidad
  Si necesitamos agregar una funcionalidad personalizada a nuestro sitio web de WordPress, podemos escribir nuestro propio PHP. Podemos crear complementos de Ruby personalizados para Jekyll, sin embargo, estos se ejecutan en el momento de la compilación en lugar del momento de la solicitud.
• Apoyo
  WordPress tiene una gran comunidad de expertos y otros recursos para ayudar. Jekyll tiene recursos similares pero en menor escala.

Jekyll es una gran herramienta para sitios web en gran parte informativos, como este proyecto. Si el proyecto es más una aplicación, podríamos agregar elementos dinámicos usando JavaScript, pero en algún momento probablemente necesitaríamos un back-end como el de WordPress.

Implementación

WordPress y Jekyll adoptan diferentes enfoques para crear un sitio web pero comparten muchas funciones. Comencemos a construir nuestro sitio web de Jekyll.

Instalando

Un entorno de desarrollo típico para WordPress requiere la instalación de Apache o NGINX, PHP y MySQL. Luego, instalaríamos WordPress y configuraríamos el servidor web.

Para Jekyll, debemos asegurarnos de tener instalado Ruby (a veces esto es más difícil de lo que parece). Luego instalamos la gema Jekyll:

 gem install jekyll

Si está en macOS, asegúrese de tener instalado el desarrollador Xcode primero.

 xcode-select --install

Corriendo

Ejecutar un sitio de WordPress generalmente consiste en iniciar la base de datos y el servidor web.

En Jekyll, navegamos a los archivos de nuestro sitio (un directorio vacío en este punto) en la terminal y ejecutamos:

 jekyll serve

Esto inicia un servidor web local en el puerto 4000 y reconstruye el sitio cada vez que cambia un archivo.

Paginas

Es hora de crear nuestra primera página. Comencemos con la página de inicio. Las páginas son para contenido independiente sin una fecha asociada. WordPress almacena el contenido de la página en la base de datos.

En Jekyll, las páginas son archivos HTML. Comenzaremos con HTML puro y luego agregaremos funciones de Jekyll según sea necesario. Aquí está index.html en su estado actual:

 <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="/css/main.css"> </head> <body> <div class="container"> <h1><a href="/">Justice</a></h1> <nav> <ul> <li><a href="/about/">About</a></li> <li><a href="/services/">Services</a></li> <li><a href="/contact/">Contact</a></li> <li><a href="/advice/">Advice</a></li> </ul> </nav> </div> <section class="main"> <div class="container"> <p>Justice Law is professional representation. Practicing for over 50 years, our team have the knowledge and skills to get you results.</p> <blockquote class="testimonial"> <p class="testimonial-message">Justice Law are the best of the best. Being local, they care about people and have strong ties to the community.</p> <p class="testimonial-author"> <img src="/images/peter.jpeg" alt="Photo of Peter Rottenburg"> Peter Rottenburg </p> </blockquote> </div> </section> <footer> <p class="copyright"> &copy; 2016 </p> </footer> </body> </html>

Líquido

En WordPress, podemos escribir PHP para hacer casi cualquier cosa. Jekyll adopta un enfoque diferente. En lugar de proporcionar un lenguaje de programación completo, utiliza un lenguaje de plantillas llamado Liquid. (WordPress también tiene lenguajes de plantillas, como Timber).

El pie de página de index.html contiene un aviso de copyright con un año:

 <p class="copyright"> &copy; 2016 </p>

Es poco probable que recordemos actualizar esto todos los años, así que usemos Liquid para generar el año actual:

 <p class="copyright"> &copy; {{ site.time | date: "%Y" }} </p>

Estamos construyendo un sitio web estático en Jekyll, por lo que esta fecha no cambiará hasta que reconstruyamos el sitio web. Si quisiéramos cambiar la fecha sin tener que reconstruir el sitio web, podríamos usar JavaScript.

Incluye

La mayor parte del HTML en index.html es para configurar el diseño general y no cambiará entre páginas. Esta repetición llevará a mucho mantenimiento, así que reducámoslo.

Las inclusiones fueron una de las primeras cosas que aprendí en PHP. Al usar include, podemos colocar el contenido del encabezado y el pie de página en diferentes archivos y luego incluir el mismo contenido en varias páginas.

Jekyll tiene exactamente la misma característica. Las inclusiones se almacenan en una carpeta denominada _includes . Usamos Liquid para incluirlos en index.html :

 {% include header.html %} <p>Justice Law is professional representation. Practicing for over 50 years, our team have the knowledge and skills to get you results.</p> <blockquote class="testimonial"> <p class="testimonial-message">Justice Law are the best of the best. Being local, they care about people and have strong ties to the community.</p> <p class="testimonial-author"> <img src="/images/peter.jpeg" alt="Photo of Peter Rottenburg"> Peter Rottenburg </p> </blockquote> {% include footer.html %}

Diseños

Incluye reducir algo de la repetición, pero todavía los tenemos en cada página. WordPress resuelve este problema con archivos de plantilla que separan la estructura de un sitio web de su contenido.

El equivalente de Jekyll a los archivos de plantilla son los diseños. Los diseños son archivos HTML con un marcador de posición para el contenido. Se almacenan en el directorio _layouts . Crearemos _layouts/default.html para que contenga un diseño HTML básico:

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="/css/main.css"> </head> <body> <div class="container"> <h1><a href="/">Justice</a></h1> <nav> <ul> <li><a href="/about/">About</a></li> <li><a href="/services/">Services</a></li> <li><a href="/contact/">Contact</a></li> <li><a href="/advice/">Advice</a></li> </ul> </nav> </div> <section class="main"> <div class="container"> {{ content }} </div> </section> <footer> <p class="copyright"> &copy; {{ site.time | date: "%Y-%m-%d" }} </p> </footer> </body> </html>

Luego, reemplace los include en index.html especificando el diseño. Especificamos el diseño usando material preliminar, que es un fragmento de YAML que se encuentra entre dos líneas de puntos triples en la parte superior de un archivo (más sobre esto pronto).

 --- layout: default --- <blockquote class="testimonial"> <p class="testimonial-message">Justice Law are the best of the best. Being local, they care about people and have strong ties to the community.</p> <p class="testimonial-author"> <img src="/images/peter.jpeg" alt="Photo of Peter Rottenburg"> Peter Rottenburg </p> </blockquote>

Ahora podemos tener el mismo diseño en todas nuestras páginas.

asunto frontal

En WordPress, los campos personalizados nos permiten establecer metadatos en una publicación. Podemos usarlos para establecer etiquetas SEO o para mostrar y ocultar secciones de una página para una publicación en particular.

Este concepto se llama materia preliminar en Jekyll. Anteriormente, usamos material preliminar para configurar el diseño de index.html . Ahora podemos configurar nuestras propias variables y acceder a ellas usando Liquid. Esto reduce aún más la repetición en nuestro sitio web.

Agreguemos múltiples testimonios a index.html . Podríamos copiar y pegar el HTML, pero una vez más, eso lleva a un mayor mantenimiento. En su lugar, agreguemos los testimonios al frente y repitamos sobre ellos con Liquid:

 --- layout: default testimonials: - message: We use Justice Law in all our endeavours. They offer an unparalleled service when it comes to running a business. image: "/images/joice.jpeg" name: Joice Carmold - message: Justice Law are the best of the best. Being local, they care about people and have strong ties to the community. image: "/images/peter.jpeg" name: Peter Rottenburg - message: Justice Law were everything we could have hoped for when buying our first home. Highly recommended to all. image: "/images/gibblesto.jpeg" name: D. and G. Gibbleston --- <div class="testimonials"> {% for testimonial in page.testimonials %} <blockquote class="testimonial"> <p class="testimonial-message">{{ testimonial.message }}</p> <p class="testimonial-author"> <img src="{{ testimonial.image }}" alt="Photo of {{ testimonial.name }}"> {{ testimonial.name }} </p> </blockquote> {% endfor %} </div>

Publicaciones

WordPress almacena el contenido HTML, la fecha y otros metadatos de las publicaciones en la base de datos.

En Jekyll, cada publicación es un archivo estático almacenado en un directorio _posts . El nombre del archivo tiene la fecha de publicación y el título de la publicación; por ejemplo, _posts/2016-11-11-real-estate-flipping.md . El código fuente de una publicación de blog tiene esta estructura:

 --- layout: post categories: - Property --- ![House](/images/house.jpeg)

También podemos usar material frontal para establecer categorías y etiquetas.

Debajo de la portada está el cuerpo de la publicación, escrito en Markdown. Markdown es una alternativa más simple a HTML.

Jekyll nos permite crear diseños que heredan de otros diseños. Es posible que haya notado que esta publicación tiene un diseño de post . El diseño de la post hereda del diseño predeterminado y agrega una fecha y un título:

 --- layout: default --- <h3>{{ page.title }}</h3> <p>{{ page.date | date: '%B %d, %Y' }}</p> {{ content }}

Vamos a crear blog.html para iterar sobre las publicaciones y enlazarlas:

 --- layout: default --- <ul> {% for post in site.posts %} <li><a href="{{ post.url }}">{{ post.title }}</a></li> {% endfor %} </ul>

Colecciones

En WordPress, los tipos de publicaciones personalizadas son útiles para administrar grupos de contenido. Por ejemplo, puede usar tipos de publicaciones personalizadas para testimonios, productos o listados de bienes raíces.

Jekyll tiene esta característica y la llama colecciones.

La página about.html muestra los perfiles de los miembros del personal. Podríamos definir los metadatos para el personal (nombre, imagen, número de teléfono, biografía) en el frente, pero solo podríamos hacer referencia a ellos en esa página. En el futuro, queremos usar los mismos datos para mostrar información sobre los autores en las publicaciones del blog. Una colección nos permite referirnos a los miembros del personal en cualquier parte del sitio web.

La configuración de nuestro sitio web vive en _config.yml . Aquí, establecemos una nueva colección:

 collections: staff_members: output: false

Ahora agregamos a los miembros de nuestro personal. Cada miembro del personal está representado en un archivo Markdown almacenado en una carpeta con el nombre de la colección; por ejemplo, _staff_members/jane-doe.md .

Agregamos los metadatos en el frente y la propaganda en el cuerpo:

 --- name: Jane Doe image: "/images/jane.jpeg" phone: "1234567" --- Jane has 19 years of experience in law, and specialises in property and business.

De manera similar a las publicaciones, podemos iterar sobre la colección en about.html para mostrar a cada miembro del personal:

 --- layout: default --- <ul> {% for member in site.staff_members %} <li> <div><img src="{{ member.image }}" alt="Staff photo for {{ member.name }}"></div> <p>{{ member.name }} - {{ member.phone }}</p> <p>{{ member.content | markdownify }}</p> </li> {% endfor %} </ul>

Búsqueda

WordPress tiene una potente búsqueda integrada y complementos de búsqueda aún más potentes.

Jekyll no tiene la búsqueda integrada, pero hay soluciones:

• búsqueda del lado del cliente utilizando una biblioteca de JavaScript como Lunr.js (Jekyll.tips tiene un tutorial sobre cómo configurar esto);
• soluciones de terceros, como Algolia para búsquedas de alto rendimiento;
• soluciones directas, como la búsqueda personalizada de Google.

Complementos

Los complementos son una parte atractiva de WordPress. Es fácil cargar la funcionalidad para que WordPress haga casi cualquier cosa.

En nuestro sitio web de Jekyll, muchos complementos populares de WordPress no son necesarios:

• iThemes Seguridad
  Nuestro sitio web de Jekyll es tan seguro como el servidor web en el que se ejecuta.
• Guardia de respaldo
  Nuestro sitio web de Jekyll vivirá en un repositorio que nos da acceso a todo el historial de cambios.
• Súper caché de WP
  Nuestro sitio web de Jekyll ya es estático.

Otros complementos de WordPress tienen equivalentes de terceros que podemos colocar en el sitio web:

• Los complementos de formularios de contacto como Contact Form 7 se pueden reemplazar con Formspree, FormKeep o Wufoo.
• Para una tienda simple, WP eCommerce se puede reemplazar con Snipcart, Gumroad o Stripe.
• En lugar de los comentarios de WordPress con Akismet, puede usar Disqus, Facebook Comments o IntenseDebate.

Algunos complementos de WordPress se pueden emular con el núcleo de Jekyll. Aquí hay una galería de fotos usando material frontal y Liquid:

 --- layout: default images: - image_path: /images/bill.jpg title: Bill - image_path: /images/burt.jpg title: Burt - image_path: /images/gary.jpg title: Gary - image_path: /images/tina.jpg title: Tina - image_path: /images/suzy.jpg title: Suzy --- <ul class="photo-gallery"> {% for image in page.images %} <li><img src="{{ image.image_path }}" alt="{{ image.title }}"/></li> {% endfor %} </ul>

Solo necesitamos agregar nuestro propio JavaScript y CSS para completarlo.

Los complementos de Jekyll pueden emular la funcionalidad de otros complementos de WordPress. Tenga en cuenta que los complementos de Jekyll solo se ejecutan mientras se genera el sitio web; no agregan funcionalidad en tiempo real:

• En lugar del mapa del sitio XML de un clic, use el complemento Jekyll Sitemap Generator.
• Jekyll SEO Tag le brinda algunas de las funciones de SEO Wizard.
• En lugar de WPGlobus para un sitio web multilingüe, use Jekyll Language Plugin.

Control de versiones

Uno de los principales beneficios de usar un generador de sitios estáticos como Jekyll es que todo el sitio y el contenido pueden vivir en Git. En un nivel básico, Git le brinda un historial de todos los cambios en el sitio. Para los equipos, abre todo tipo de flujos de trabajo y procesos de aprobación.

GitHub tiene un fantástico tutorial interactivo para principiantes que aprenden Git.

Entrega del cliente

Eso cubre los aspectos prácticos de la creación del sitio web. Si tiene curiosidad por ver cómo encaja un sitio web completo de Jekyll, eche un vistazo a la plantilla de Justicia. Es una plantilla gratuita con licencia del MIT para Jekyll. Los fragmentos anteriores se basan en esta plantilla.

El CMS de WordPress está integrado en la plataforma, por lo que tendríamos que configurar una cuenta para el cliente.

Con nuestro sitio web de Jekyll, vincularíamos nuestro repositorio de Git a una de las GUI de Jekyll mencionadas anteriormente. Una de las cosas buenas de este flujo de trabajo es que los cambios de los clientes se vuelven a enviar al repositorio. Como desarrolladores, podemos continuar usando flujos de trabajo locales incluso con personas que no son desarrolladores que actualizan el sitio web.

Algunas GUI de Jekyll ofrecen alojamiento, mientras que otras tienen una forma de salida a un depósito de Amazon S3 o a páginas de GitHub.

Resumen

En este punto, nuestro sitio web de Jekyll está activo y el cliente puede editarlo. Si necesitamos hacer algún cambio en el sitio web, simplemente ingresamos al repositorio y se implementará automáticamente en vivo.

<div class=“testimonials”> {% for testimonial in page.testimonials %} <blockquote class=“testimonial”> <p class=“testimonial-message”>{{ testimonial.message }}</p> <p class =“autor-testimonial”> <img src=“{{ testimonial.image }}” alt=“Foto de {{ testimonial.name }}”> {{ testimonial.name }} </p> </blockquote> { % fin de %} </div>

Publicaciones

WordPress almacena el contenido HTML, la fecha y otros metadatos de las publicaciones en la base de datos.

En Jekyll, cada publicación es un archivo estático almacenado en un directorio _posts . El nombre del archivo tiene la fecha de publicación y el título de la publicación; por ejemplo, _posts/2016-11-11-real-estate-flipping.md . El código fuente de una publicación de blog tiene esta estructura:

 --- layout: post categories: - Property --- ![House](/images/house.jpeg)

También podemos usar material frontal para establecer categorías y etiquetas.

Debajo de la portada está el cuerpo de la publicación, escrito en Markdown. Markdown es una alternativa más simple a HTML.

Jekyll nos permite crear diseños que heredan de otros diseños. Es posible que haya notado que esta publicación tiene un diseño de post . El diseño de la post hereda del diseño predeterminado y agrega una fecha y un título:

 --- layout: default --- <h3>{{ page.title }}</h3> <p>{{ page.date | date: '%B %d, %Y' }}</p> {{ content }}

Vamos a crear blog.html para iterar sobre las publicaciones y enlazarlas:

 --- layout: default --- <ul> {% for post in site.posts %} <li><a href="{{ post.url }}">{{ post.title }}</a></li> {% endfor %} </ul>

Colecciones

En WordPress, los tipos de publicaciones personalizadas son útiles para administrar grupos de contenido. Por ejemplo, puede usar tipos de publicaciones personalizadas para testimonios, productos o listados de bienes raíces.

Jekyll tiene esta característica y la llama colecciones.

La página about.html muestra los perfiles de los miembros del personal. Podríamos definir los metadatos para el personal (nombre, imagen, número de teléfono, biografía) en el frente, pero solo podríamos hacer referencia a ellos en esa página. En el futuro, queremos usar los mismos datos para mostrar información sobre los autores en las publicaciones del blog. Una colección nos permite referirnos a los miembros del personal en cualquier parte del sitio web.

La configuración de nuestro sitio web vive en _config.yml . Aquí, establecemos una nueva colección:

 collections: staff_members: output: false

Ahora agregamos a los miembros de nuestro personal. Cada miembro del personal está representado en un archivo Markdown almacenado en una carpeta con el nombre de la colección; por ejemplo, _staff_members/jane-doe.md .

Agregamos los metadatos en el frente y la propaganda en el cuerpo:

 --- name: Jane Doe image: "/images/jane.jpeg" phone: "1234567" --- Jane has 19 years of experience in law, and specialises in property and business.

De manera similar a las publicaciones, podemos iterar sobre la colección en about.html para mostrar a cada miembro del personal:

 --- layout: default --- <ul> {% for member in site.staff_members %} <li> <div><img src="{{ member.image }}" alt="Staff photo for {{ member.name }}"></div> <p>{{ member.name }} - {{ member.phone }}</p> <p>{{ member.content | markdownify }}</p> </li> {% endfor %} </ul>

Búsqueda

WordPress tiene una potente búsqueda integrada y complementos de búsqueda aún más potentes.

Jekyll no tiene la búsqueda integrada, pero hay soluciones:

• búsqueda del lado del cliente utilizando una biblioteca de JavaScript como Lunr.js (Jekyll.tips tiene un tutorial sobre cómo configurar esto);
• soluciones de terceros, como Algolia para búsquedas de alto rendimiento;
• soluciones directas, como la búsqueda personalizada de Google.

Complementos

Los complementos son una parte atractiva de WordPress. Es fácil cargar la funcionalidad para que WordPress haga casi cualquier cosa.

En nuestro sitio web de Jekyll, muchos complementos populares de WordPress no son necesarios:

• iThemes Seguridad
  Nuestro sitio web de Jekyll es tan seguro como el servidor web en el que se ejecuta.
• Guardia de respaldo
  Nuestro sitio web de Jekyll vivirá en un repositorio que nos da acceso a todo el historial de cambios.
• Súper caché de WP
  Nuestro sitio web de Jekyll ya es estático.

Otros complementos de WordPress tienen equivalentes de terceros que podemos colocar en el sitio web:

• Los complementos de formularios de contacto como Contact Form 7 se pueden reemplazar con Formspree, FormKeep o Wufoo.
• Para una tienda simple, WP eCommerce se puede reemplazar con Snipcart, Gumroad o Stripe.
• En lugar de los comentarios de WordPress con Akismet, puede usar Disqus, Facebook Comments o IntenseDebate.

Algunos complementos de WordPress se pueden emular con el núcleo de Jekyll. Aquí hay una galería de fotos usando material frontal y Liquid:

 --- layout: default images: - image_path: /images/bill.jpg title: Bill - image_path: /images/burt.jpg title: Burt - image_path: /images/gary.jpg title: Gary - image_path: /images/tina.jpg title: Tina - image_path: /images/suzy.jpg title: Suzy --- <ul class="photo-gallery"> {% for image in page.images %} <li><img src="{{ image.image_path }}" alt="{{ image.title }}"/></li> {% endfor %} </ul>

Solo necesitamos agregar nuestro propio JavaScript y CSS para completarlo.

Los complementos de Jekyll pueden emular la funcionalidad de otros complementos de WordPress. Tenga en cuenta que los complementos de Jekyll solo se ejecutan mientras se genera el sitio web; no agregan funcionalidad en tiempo real:

• En lugar del mapa del sitio XML de un clic, use el complemento Jekyll Sitemap Generator.
• Jekyll SEO Tag le brinda algunas de las funciones de SEO Wizard.
• En lugar de WPGlobus para un sitio web multilingüe, use Jekyll Language Plugin.

Control de versiones

Uno de los principales beneficios de usar un generador de sitios estáticos como Jekyll es que todo el sitio y el contenido pueden vivir en Git. En un nivel básico, Git le brinda un historial de todos los cambios en el sitio. Para los equipos, abre todo tipo de flujos de trabajo y procesos de aprobación.

GitHub tiene un fantástico tutorial interactivo para principiantes que aprenden Git.

Entrega del cliente

Eso cubre los aspectos prácticos de la creación del sitio web. Si tiene curiosidad por ver cómo encaja un sitio web completo de Jekyll, eche un vistazo a la plantilla de Justicia. Es una plantilla gratuita con licencia del MIT para Jekyll. Los fragmentos anteriores se basan en esta plantilla.

El CMS de WordPress está integrado en la plataforma, por lo que tendríamos que configurar una cuenta para el cliente.

Con nuestro sitio web de Jekyll, vincularíamos nuestro repositorio de Git a una de las GUI de Jekyll mencionadas anteriormente. Una de las cosas buenas de este flujo de trabajo es que los cambios de los clientes se vuelven a enviar al repositorio. Como desarrolladores, podemos continuar usando flujos de trabajo locales incluso con personas que no son desarrolladores que actualizan el sitio web.

Algunas GUI de Jekyll ofrecen alojamiento, mientras que otras tienen una forma de salida a un depósito de Amazon S3 o a páginas de GitHub.

Resumen

En este punto, nuestro sitio web de Jekyll está activo y el cliente puede editarlo. Si necesitamos hacer algún cambio en el sitio web, simplemente ingresamos al repositorio y se implementará automáticamente en vivo.

Su primer sitio web Jekyll

Ahora es tu turno. Hay muchos recursos disponibles para ayudarlo a crear su primer sitio web de Jekyll:

• El sitio web oficial de Jekyll es un excelente lugar para comenzar con documentación detallada sobre todas las características de Jekyll.
• Jekyll.tips tiene una serie de tutoriales en video que cubren los temas principales de Jekyll.
• Eche un vistazo a las plantillas de Jekyll en GitHub para ver cómo se combinan: Frisco para sitios web de marketing, Scholar para documentación y Urban para agencias digitales.

Si está migrando, Jekyll tiene herramientas para importar publicaciones de los sitios web de WordPress y WordPress.com. Después de importar, deberá migrar o crear manualmente los diseños, páginas, CSS, JavaScript y otros recursos para el sitio web.

Terminando

La belleza de Jekyll está en su sencillez. Si bien WordPress puede coincidir con muchas de las características de Jekyll, a menudo tiene el costo de la complejidad a través de complementos o infraestructura adicionales.

En última instancia, se trata de encontrar la herramienta que funcione mejor para usted. Descubrí que Jekyll es una forma rápida y eficiente de crear sitios web. Te animo a que lo pruebes y publiques tu experiencia en los comentarios.