Jekyll pour les développeurs Wordpress

Publié: 2022-03-10
Résumé rapide ↬ Jekyll gagne en popularité en tant qu'alternative légère à WordPress. Il est souvent catalogué comme un outil utilisé par les développeurs pour créer leur blog personnel. Ce n'est que la partie émergée de l'iceberg — il est capable de bien plus ! Dans cet article, nous jouerons le rôle d'un développeur Web qui crée un site Web pour un cabinet d'avocats fictif. WordPress est un choix évident pour un site Web comme celui-ci, mais est-ce le seul outil que nous devrions envisager ? Regardons une manière complètement différente de construire un site Web, en utilisant Jekyll.

Dans cet article, nous jouerons le rôle d'un développeur Web qui crée un site Web pour un cabinet d'avocats fictif. WordPress est un choix évident pour un site Web comme celui-ci, mais est-ce le seul outil que nous devrions envisager ? Regardons une manière complètement différente de construire un site Web, en utilisant Jekyll.

Jekyll pour les développeurs Wordpress

Lectures complémentaires sur SmashingMag :

  • Créer un blog avec des pages Jekyll et GitHub
  • Modélisation de contenu avec Jekyll
  • Générateurs de sites statiques examinés : Jekyll, Middleman, Roots, Hugo
  • Pourquoi les générateurs de sites statiques sont la prochaine grande chose
Plus après saut! Continuez à lire ci-dessous ↓

Qu'est-ce que Jekyll ?

Jekyll est un générateur de site Web statique. Au lieu d'installer un logiciel et une base de données sur notre serveur, un site Web Jekyll est simplement un répertoire de fichiers sur notre ordinateur. Lorsque nous exécutons Jekyll sur ce répertoire, il génère un site Web statique, que nous téléchargeons sur un fournisseur d'hébergement.

Pourquoi Jekyll ?

Nous devons considérer un certain nombre de compromis pour décider si Jekyll convient à un projet.

Avantages de Jekyll

  • Moins de complexité
    Un site Web Jekyll est essentiellement un site Web statique avec un langage de modèle. Il a moins de composants à créer et à entretenir. Sur le serveur, nous n'avons besoin que d'un serveur Web capable de servir des fichiers.
  • Vitesse
    Lorsque les visiteurs consultent des pages sur des sites Jekyll, le serveur renvoie les fichiers existants sans aucun traitement supplémentaire . C'est beaucoup plus rapide que WordPress, qui génère des pages dynamiquement au moment de la demande. Remarque : les plugins WordPress Caching peuvent éliminer cet écart de performances.
  • La stabilité
    WordPress a plus de composants travaillant ensemble pour générer des pages pour les visiteurs. Si un composant tombe en panne, les visiteurs peuvent ne pas être en mesure d'afficher le site Web. Beaucoup moins peut mal tourner lorsqu'un serveur Web ne sert que des fichiers.
  • Sécurité
    Wordpress fait beaucoup pour atténuer les risques de sécurité tels que les attaques par injection CSRF, XSS ou SQL, mais il dépend du fait que vous disposiez toujours des dernières mises à jour. Les sites statiques éliminent ce problème car il n'y a pas de stockage de données dynamique qu'un pirate puisse exploiter.
  • Contrôlé par la source
    Un site Web Jekyll est un répertoire de fichiers, nous pouvons donc stocker l'intégralité du site Web dans un référentiel Git. Travailler avec un référentiel nous offre de nombreux avantages (bien que VersionPress soit en développement et permette ce flux de travail pour WordPress).

Inconvénients de Jekyll

  • Pas d'interface graphique
    Un client peut s'inscrire sur WordPress.com, choisir un thème et créer lui-même un site Web de base. Jekyll est un outil en ligne de commande, qui submerge la plupart des utilisateurs non techniques. Il existe des interfaces graphiques tierces pour Jekyll, notamment CloudCannon (avertissement : je suis le cofondateur), Forestry, Jekyll Admin, Netlify CMS, Prose et Siteleaf. Cependant, ceux-ci doivent être configurés par le développeur avant d'être remis au client.
  • Temps de construction
    Dans notre situation, ce n'est pas un problème car le site Web sera construit en moins d'une seconde. Cependant, un site Web plus grand avec 10 000 à 100 000 messages pourrait prendre quelques minutes à construire. C'est frustrant lorsque nous développons car nous devons attendre que le site Web soit créé avant de le prévisualiser dans le navigateur.
  • Thèmes
    Jekyll a quelques thèmes disponibles, mais ce n'est rien comparé aux milliers de thèmes disponibles pour WordPress.
  • Extensibilité
    Si nous devons ajouter des fonctionnalités personnalisées à notre site Web WordPress, nous pouvons écrire notre propre PHP. Nous pouvons créer des plugins Ruby personnalisés pour Jekyll, cependant, ceux-ci s'exécutent au moment de la construction plutôt qu'au moment de la demande.
  • Support
    WordPress a une énorme communauté d'experts et d'autres ressources pour vous aider. Jekyll dispose de ressources similaires mais à plus petite échelle.

Jekyll est un excellent outil pour les sites Web largement informatifs, comme ce projet. Si le projet est plus une application, nous pourrions ajouter des éléments dynamiques en utilisant JavaScript, mais à un moment donné, nous aurions probablement besoin d'un back-end comme WordPress.

Mise en œuvre

WordPress et Jekyll adoptent des approches différentes pour créer un site Web tout en partageant de nombreuses fonctionnalités. Commençons à construire notre site Web Jekyll.

Installation

Un environnement de développement typique pour WordPress nécessite l'installation d'Apache ou NGINX, PHP et MySQL. Ensuite, nous installerions WordPress et configurerions le serveur Web.

Pour Jekyll, nous devons nous assurer que Ruby est installé (parfois c'est plus difficile qu'il n'y paraît). Puis on installe le gem Jekyll :

 gem install jekyll

Si vous utilisez macOS, assurez-vous que le développeur Xcode est d'abord installé.

 xcode-select --install

Fonctionnement

L'exécution d'un site WordPress consiste généralement à démarrer la base de données et le serveur Web.

Dans Jekyll, nous naviguons vers nos fichiers de site (un répertoire vide à ce stade) dans le terminal et exécutons :

 jekyll serve

Cela démarre un serveur Web local sur le port 4000 et reconstruit le site chaque fois qu'un fichier change.

pages

Il est temps de créer notre première page. Commençons par la page d'accueil. Les pages sont destinées au contenu autonome sans date associée. WordPress stocke le contenu de la page dans la base de données.

Dans Jekyll, les pages sont des fichiers HTML. Nous commencerons par du HTML pur, puis nous ajouterons les fonctionnalités de Jekyll au besoin. Voici index.html dans son état actuel :

 <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>

Liquide

Dans WordPress, nous pouvons écrire PHP pour faire presque n'importe quoi. Jekyll adopte une approche différente. Au lieu de fournir un langage de programmation complet, il utilise un langage de modèles nommé Liquid. (WordPress propose également des langages de modèles, tels que Timber.)

Le pied de page de index.html contient un avis de droit d'auteur avec une année :

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

Il est peu probable que nous nous souvenions de mettre à jour cela chaque année, alors utilisons Liquid pour produire l'année en cours :

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

Nous construisons un site Web statique dans Jekyll, donc cette date ne changera pas tant que nous n'aurons pas reconstruit le site Web. Si nous voulions que la date change sans avoir à reconstruire le site Web, nous pourrions utiliser JavaScript.

Comprend

La majeure partie du code HTML dans index.html sert à configurer la mise en page globale et ne changera pas entre les pages. Cette répétition entraînera beaucoup d'entretien, alors réduisons-le.

Les inclusions ont été l'une des premières choses que j'ai apprises en PHP. En utilisant les inclusions, nous pouvons placer le contenu de l'en-tête et du pied de page dans différents fichiers, puis inclure le même contenu sur plusieurs pages.

Jekyll a exactement la même fonctionnalité. Les inclusions sont stockées dans un dossier nommé _includes . Nous utilisons Liquid pour les inclure dans 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 %}

Dispositions

Inclut réduire une partie de la répétition, mais nous les avons toujours sur chaque page. WordPress résout ce problème avec des fichiers modèles qui séparent la structure d'un site Web de son contenu.

L'équivalent Jekyll des fichiers modèles est les mises en page. Les mises en page sont des fichiers HTML avec un espace réservé pour le contenu. Ils sont stockés dans le répertoire _layouts . Nous allons créer _layouts/default.html pour contenir une mise en page HTML de base :

 <!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>

Ensuite, remplacez les inclusions dans index.html en spécifiant la mise en page. Nous spécifions la mise en page à l'aide de la matière liminaire, qui est un extrait de YAML qui se trouve entre deux lignes à trois tirets en haut d'un fichier (plus à ce sujet bientôt).

 --- 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>

Maintenant, nous pouvons avoir la même mise en page sur toutes nos pages.

Matière avant

Dans WordPress, les champs personnalisés nous permettent de définir des métadonnées sur un article. Nous pouvons les utiliser pour définir des balises SEO ou pour afficher et masquer des sections d'une page pour un article particulier.

Ce concept est appelé front matter dans Jekyll. Auparavant, nous utilisions les avant-propos pour définir la mise en page de index.html . Nous pouvons maintenant définir nos propres variables et y accéder en utilisant Liquid. Cela réduit encore les répétitions sur notre site Web.

Ajoutons plusieurs témoignages à index.html . Nous pourrions copier et coller le HTML, mais encore une fois, cela entraîne une maintenance accrue. Au lieu de cela, ajoutons les témoignages en avant-propos et parcourons-les avec 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>

Des postes

WordPress stocke le contenu HTML, la date et d'autres métadonnées pour les publications dans la base de données.

Dans Jekyll, chaque article est un fichier statique stocké dans un répertoire _posts . Le nom du fichier contient la date de publication et le titre du message — par exemple, _posts/2016-11-11-real-estate-flipping.md . Le code source d'un article de blog adopte cette structure :

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

Nous pouvons également utiliser les pages liminaires pour définir des catégories et des balises.

Au-dessous de l'avant-propos se trouve le corps du message, écrit en Markdown. Markdown est une alternative plus simple au HTML.

Jekyll nous permet de créer des layouts qui héritent d'autres layouts. Vous avez peut-être remarqué que ce post a une mise en page de post . La mise en page du post hérite de la mise en page par défaut et ajoute une date et un titre :

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

Créons blog.html pour itérer sur les articles et créer un lien vers eux :

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

Collections

Dans WordPress, les types de publication personnalisés sont utiles pour gérer des groupes de contenu. Par exemple, vous pouvez utiliser des types de publication personnalisés pour des témoignages, des produits ou des annonces immobilières.

Jekyll a cette fonctionnalité et l'appelle collections.

La page about.html affiche les profils des membres du personnel. Nous pourrions définir les métadonnées du personnel (nom, image, numéro de téléphone, biographie) dans les premières lignes, mais nous ne pourrions ensuite les référencer que sur cette page. À l'avenir, nous souhaitons utiliser les mêmes données pour afficher des informations sur les auteurs sur les articles de blog. Une collection nous permet de faire référence aux membres du personnel n'importe où sur le site Web.

La configuration de notre site Web réside dans _config.yml . Ici, nous définissons une nouvelle collection :

 collections: staff_members: output: false

Maintenant, nous ajoutons nos membres du personnel. Chaque membre du personnel est représenté dans un fichier Markdown stocké dans un dossier avec le nom de la collection ; par exemple, _staff_members/jane-doe.md .

Nous ajoutons les métadonnées dans l'avant-propos et le texte de présentation dans le corps :

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

Comme pour les publications, nous pouvons parcourir la collection dans about.html pour afficher chaque membre du personnel :

 --- 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>

Rechercher

WordPress a une puissante recherche intégrée et des plugins de recherche encore plus puissants.

Jekyll n'a pas de recherche intégrée, mais il existe des solutions :

  • recherche côté client à l'aide d'une bibliothèque JavaScript telle que Lunr.js (Jekyll.tips a un tutoriel sur la façon de configurer cela);
  • des solutions tierces comme Algolia pour une recherche performante ;
  • des solutions instantanées, telles que la recherche personnalisée Google.

Plugins

Les plugins sont une partie attrayante de WordPress. Il est facile de charger des fonctionnalités pour que WordPress puisse faire presque n'importe quoi.

Sur notre site Jekyll, de nombreux plugins WordPress populaires ne sont pas nécessaires :

  • Sécurité iThèmes
    Notre site Web Jekyll est aussi sécurisé que le serveur Web sur lequel il s'exécute.
  • Garde de secours
    Notre site Web Jekyll vivra dans un référentiel qui nous donne accès à l'historique complet des modifications.
  • WP Super Cache
    Notre site Web Jekyll est déjà statique.

D'autres plugins WordPress ont des équivalents tiers que nous pouvons déposer sur le site Web :

  • Les plugins de formulaire de contact tels que Contact Form 7 peuvent être remplacés par Formspree, FormKeep ou Wufoo.
  • Pour une boutique simple, WP eCommerce peut être remplacé par Snipcart, Gumroad ou Stripe.
  • Au lieu des commentaires WordPress avec Akismet, vous pouvez utiliser Disqus, Facebook Comments ou IntenseDebate.

Certains plugins WordPress peuvent être émulés avec le noyau Jekyll. Voici une galerie de photos utilisant Front Matter et 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>

Nous avons juste besoin d'ajouter notre propre JavaScript et CSS pour le compléter.

Les plugins Jekyll peuvent émuler les fonctionnalités d'autres plugins WordPress. Gardez à l'esprit que les plugins Jekyll ne fonctionnent que pendant la génération du site Web — ils n'ajoutent pas de fonctionnalité en temps réel :

  • Au lieu de One Click XML Sitemap, utilisez le plugin Jekyll Sitemap Generator.
  • Jekyll SEO Tag vous offre certaines des fonctionnalités de SEO Wizard.
  • Au lieu de WPGlobus pour un site Web multilingue, utilisez Jekyll Language Plugin.

Contrôle de version

L'un des principaux avantages de l'utilisation d'un générateur de site statique comme Jekyll est que le site entier et le contenu peuvent vivre dans Git. Au niveau de base, Git vous donne un historique de tous les changements sur le site. Pour les équipes, cela ouvre toutes sortes de flux de travail et de processus d'approbation.

GitHub propose un didacticiel interactif fantastique pour les débutants qui apprennent Git.

Transfert client

Cela couvre les écrous et les boulons de la création du site Web. Si vous êtes curieux de voir comment un site Web Jekyll entier s'intègre, jetez un œil au modèle Justice. C'est un modèle gratuit sous licence MIT pour Jekyll. Les extraits ci-dessus sont basés sur ce modèle.

Le CMS WordPress est intégré à la plate-forme, nous aurions donc besoin de créer un compte pour le client.

Avec notre site Web Jekyll, nous lierons notre référentiel Git à l'une des interfaces graphiques Jekyll mentionnées précédemment. L'un des avantages de ce flux de travail est que les modifications des clients sont renvoyées au référentiel. En tant que développeurs, nous pouvons continuer à utiliser des flux de travail locaux même si des non-développeurs mettent à jour le site Web.

Certaines interfaces graphiques Jekyll offrent un hébergement, tandis que d'autres ont un moyen de sortir vers un compartiment Amazon S3 ou vers des pages GitHub.

Sommaire

À ce stade, notre site Web Jekyll est en ligne et modifiable par le client. Si nous devons apporter des modifications au site Web, nous poussons simplement vers le référentiel et il se déploiera automatiquement en direct.

<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 de {{ testimonial.name }}”> {{ testimonial.name }} </p> </blockquote> { % endfor %} </div>

Des postes

WordPress stocke le contenu HTML, la date et d'autres métadonnées pour les publications dans la base de données.

Dans Jekyll, chaque article est un fichier statique stocké dans un répertoire _posts . Le nom du fichier contient la date de publication et le titre du message — par exemple, _posts/2016-11-11-real-estate-flipping.md . Le code source d'un article de blog adopte cette structure :

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

Nous pouvons également utiliser les pages liminaires pour définir des catégories et des balises.

Au-dessous de l'avant-propos se trouve le corps du message, écrit en Markdown. Markdown est une alternative plus simple au HTML.

Jekyll nous permet de créer des layouts qui héritent d'autres layouts. Vous avez peut-être remarqué que ce post a une mise en page de post . La mise en page du post hérite de la mise en page par défaut et ajoute une date et un titre :

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

Créons blog.html pour itérer sur les articles et créer un lien vers eux :

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

Collections

Dans WordPress, les types de publication personnalisés sont utiles pour gérer des groupes de contenu. Par exemple, vous pouvez utiliser des types de publication personnalisés pour des témoignages, des produits ou des annonces immobilières.

Jekyll a cette fonctionnalité et l'appelle collections.

La page about.html affiche les profils des membres du personnel. Nous pourrions définir les métadonnées du personnel (nom, image, numéro de téléphone, biographie) dans les premières lignes, mais nous ne pourrions ensuite les référencer que sur cette page. À l'avenir, nous souhaitons utiliser les mêmes données pour afficher des informations sur les auteurs sur les articles de blog. Une collection nous permet de faire référence aux membres du personnel n'importe où sur le site Web.

La configuration de notre site Web réside dans _config.yml . Ici, nous définissons une nouvelle collection :

 collections: staff_members: output: false

Maintenant, nous ajoutons nos membres du personnel. Chaque membre du personnel est représenté dans un fichier Markdown stocké dans un dossier avec le nom de la collection ; par exemple, _staff_members/jane-doe.md .

Nous ajoutons les métadonnées dans l'avant-propos et le texte de présentation dans le corps :

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

Comme pour les publications, nous pouvons parcourir la collection dans about.html pour afficher chaque membre du personnel :

 --- 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>

Rechercher

WordPress a une puissante recherche intégrée et des plugins de recherche encore plus puissants.

Jekyll n'a pas de recherche intégrée, mais il existe des solutions :

  • recherche côté client à l'aide d'une bibliothèque JavaScript telle que Lunr.js (Jekyll.tips a un tutoriel sur la façon de configurer cela);
  • des solutions tierces comme Algolia pour une recherche performante ;
  • des solutions instantanées, telles que la recherche personnalisée Google.

Plugins

Les plugins sont une partie attrayante de WordPress. Il est facile de charger des fonctionnalités pour que WordPress puisse faire presque n'importe quoi.

Sur notre site Jekyll, de nombreux plugins WordPress populaires ne sont pas nécessaires :

  • Sécurité iThèmes
    Notre site Web Jekyll est aussi sécurisé que le serveur Web sur lequel il s'exécute.
  • Garde de secours
    Notre site Web Jekyll vivra dans un référentiel qui nous donne accès à l'historique complet des modifications.
  • WP Super Cache
    Notre site Web Jekyll est déjà statique.

D'autres plugins WordPress ont des équivalents tiers que nous pouvons déposer sur le site Web :

  • Les plugins de formulaire de contact tels que Contact Form 7 peuvent être remplacés par Formspree, FormKeep ou Wufoo.
  • Pour une boutique simple, WP eCommerce peut être remplacé par Snipcart, Gumroad ou Stripe.
  • Au lieu des commentaires WordPress avec Akismet, vous pouvez utiliser Disqus, Facebook Comments ou IntenseDebate.

Certains plugins WordPress peuvent être émulés avec le noyau Jekyll. Voici une galerie de photos utilisant Front Matter et 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>

Nous avons juste besoin d'ajouter notre propre JavaScript et CSS pour le compléter.

Les plugins Jekyll peuvent émuler les fonctionnalités d'autres plugins WordPress. Gardez à l'esprit que les plugins Jekyll ne fonctionnent que pendant la génération du site Web — ils n'ajoutent pas de fonctionnalité en temps réel :

  • Au lieu de One Click XML Sitemap, utilisez le plugin Jekyll Sitemap Generator.
  • Jekyll SEO Tag vous offre certaines des fonctionnalités de SEO Wizard.
  • Au lieu de WPGlobus pour un site Web multilingue, utilisez Jekyll Language Plugin.

Contrôle de version

L'un des principaux avantages de l'utilisation d'un générateur de site statique comme Jekyll est que le site entier et le contenu peuvent vivre dans Git. Au niveau de base, Git vous donne un historique de tous les changements sur le site. Pour les équipes, cela ouvre toutes sortes de flux de travail et de processus d'approbation.

GitHub propose un didacticiel interactif fantastique pour les débutants qui apprennent Git.

Transfert client

Cela couvre les écrous et les boulons de la création du site Web. Si vous êtes curieux de voir comment un site Web Jekyll entier s'intègre, jetez un œil au modèle Justice. C'est un modèle gratuit sous licence MIT pour Jekyll. Les extraits ci-dessus sont basés sur ce modèle.

Le CMS WordPress est intégré à la plate-forme, nous aurions donc besoin de créer un compte pour le client.

Avec notre site Web Jekyll, nous lierons notre référentiel Git à l'une des interfaces graphiques Jekyll mentionnées précédemment. L'un des avantages de ce flux de travail est que les modifications des clients sont renvoyées au référentiel. En tant que développeurs, nous pouvons continuer à utiliser des flux de travail locaux même si des non-développeurs mettent à jour le site Web.

Certaines interfaces graphiques Jekyll offrent un hébergement, tandis que d'autres ont un moyen de sortir vers un compartiment Amazon S3 ou vers des pages GitHub.

Sommaire

À ce stade, notre site Web Jekyll est en ligne et modifiable par le client. Si nous devons apporter des modifications au site Web, nous poussons simplement vers le référentiel et il se déploiera automatiquement en direct.

Votre premier site Jekyll

Maintenant c'est ton tour. De nombreuses ressources sont disponibles pour vous aider à créer votre premier site Web Jekyll :

  • Le site officiel de Jekyll est un excellent point de départ avec une documentation détaillée sur toutes les fonctionnalités de Jekyll.
  • Jekyll.tips propose une série de didacticiels vidéo couvrant les principaux sujets de Jekyll.
  • Jetez un œil aux modèles Jekyll sur GitHub pour voir comment ils sont assemblés : Frisco pour les sites Web marketing, Scholar pour la documentation et Urban pour les agences numériques.

Si vous migrez, Jekyll dispose d'outils pour importer des publications à partir de sites Web WordPress et WordPress.com. Après l'importation, vous devrez migrer ou créer manuellement les mises en page, les pages, le CSS, le JavaScript et d'autres actifs pour le site Web.

Emballer

La beauté de Jekyll réside dans sa simplicité. Bien que WordPress puisse correspondre à de nombreuses fonctionnalités de Jekyll, cela se fait souvent au prix de la complexité grâce à des plugins ou une infrastructure supplémentaires.

En fin de compte, il s'agit de trouver l'outil qui vous convient le mieux. J'ai trouvé que Jekyll était un moyen rapide et efficace de créer des sites Web. Je vous encourage à l'essayer et à poster votre expérience dans les commentaires.