Comment configurer un site de développement Jekyll sur Ubuntu 16.04

Jekyll est un générateur de sites statiques qui offre certains des avantages d’un système de gestion de contenu (CMS) tout en évitant les problèmes de performances et de sécurité engendrés par ces sites. Il est «compatible avec les blogs» et inclut des fonctionnalités spéciales pour gérer le contenu organisé par date, bien que son utilité ne se limite pas aux sites de blogs. Jekyll convient parfaitement aux personnes qui ont besoin de travailler hors ligne, préfèrent utiliser des éditeurs légers aux formulaires Web pour la maintenance du contenu et souhaitent utiliser le contrôle de version pour suivre les modifications apportées à leur site Web.

Dans ce tutoriel, nous allons installer un site de développement Jekyll 3.7.3 sur Ubuntu 16.04. Dans des didacticiels ultérieurs, nous allons explorer le contenu généré ici, publier un site statique sur le même serveur et éventuellement le déployer sur un site de production.

Pour suivre ce tutoriel, vous aurez besoin de:

Une fois ces conditions préalables remplies, vous êtes prêt à installer Jekyll et ses dépendances.

Nous allons commencer par mettre à jour notre liste de paquets pour nous assurer de disposer des informations les plus récentes sur les versions les plus récentes des paquets et leurs dépendances:

Ensuite, nous installerons Ruby et ses bibliothèques de développement, ainsi que + make + et + + build-essential + `, afin que les bibliothèques de Jekyll soient compilées une fois que nous installerons Jekyll:

Une fois cette opération terminée, nous ajouterons deux lignes à votre fichier + .bashrc pour indiquer au gestionnaire de paquets` + gem` de Ruby de placer les gems dans le dossier personnel de notre utilisateur. Cela évite les complications pouvant découler d’une installation à l’échelle du système, tout en ajoutant la commande locale + jekyll + à la commande + PATH + de l’utilisateur.

Ouvrez + .bashrc + en tapant ce qui suit:

Au bas du fichier, ajoutez les lignes suivantes:

Enregistrez et fermez le fichier. Pour activer les exportations, exécutez ce qui suit:

Lorsque cela sera terminé, nous utiliserons + gem + pour installer Jekyll lui-même ainsi que Bundler, qui gère les dépendances Gem:

Nous nous assurerons ensuite que les paramètres de votre pare-feu autorisent le trafic depuis et vers le serveur Web de développement de Jekyll.

Nous commencerons par vérifier l’état du pare-feu pour voir s’il est activé. Si tel est le cas, nous nous assurerons que le trafic sur notre site est autorisé et nous pourrons ainsi visualiser notre site de développement dans un navigateur Web.

Dans ce cas, seul SSH est autorisé via:

Vous pouvez avoir d’autres règles en place ou aucune règle de pare-feu du tout. Comme seul le trafic SSH est autorisé dans ce cas, nous devons ouvrir le port 4000, le port par défaut du serveur de développement Jekyll:

Revérifions l’état:

Maintenant, nos règles de pare-feu ressemblent à ceci:

Avec le logiciel installé et le port nécessaire ouvert, nous sommes prêts à créer le site de développement.

Dans notre répertoire personnel, nous utiliserons la commande + new + de Jekyll pour créer un échafaudage pour un site dans un sous-répertoire appelé + www +:

La commande + jekyll new + initialise + bundle install + pour installer les dépendances requises et installe automatiquement un thème appelé Minima. Après une installation réussie, vous devriez voir les résultats suivants:

La commande + new + de Jekyll crée les répertoires et les fichiers suivants:

Ce ne sont pas les fichiers du site Web. Ce sont les fichiers sources que Jekyll utilisera pour créer le site statique. Jekyll s’appuie sur des noms, des modèles de dénomination et des structures de répertoires spécifiques pour analyser les différentes sources de contenu et les assembler dans un site statique. Il est important d’utiliser la structure existante et de suivre les conventions de nommage de Jekyll lors de l’ajout de nouvelles publications et de nouvelles pages.

Le serveur Web léger intégré de Jekyll est conçu pour prendre en charge le développement du site en surveillant les fichiers du répertoire et en régénérant automatiquement le site statique chaque fois qu’une modification est enregistrée. Comme nous travaillons sur un serveur distant, nous allons spécifier l’adresse de l’hôte afin de naviguer sur le site à partir de notre ordinateur local. Si vous travaillez sur une machine locale, vous pouvez exécuter + jekyll serve + sans le paramètre host et vous connecter avec + http: // localhost: 4000 +.

Lorsque nous avons appelé + jekyll serve +, Jekyll a analysé les fichiers de configuration et de contenu dans un nouveau répertoire, + _site + et a commencé à servir le contenu de ce dossier + _site +:

Il a également commencé à regarder le répertoire en cours, + www +, pour des modifications. Dès qu’une modification apportée à un message ou à une page est enregistrée, le site statique est automatiquement reconstruit. Il est donc important de ne pas modifier directement les fichiers du dossier + _site +.

Si nous laissons ce terminal ouvert avec le serveur de développement exécuté au premier plan lorsque nous travaillons sur notre site, nous recevrons un retour immédiat dès que nous ajoutons des pages et des publications et que nous modifions le contenu.

Le site est maintenant disponible. Dans un navigateur Web, nous pouvons le visiter à l’adresse du serveur et au port indiqués dans le résultat de + jekyll serve +:

image: http: //assets.digitalocean.com/articles/jekyll-1604/jekyll_home_update.png [Capture d’écran de la page d’accueil de Jekyll]

Dans ce tutoriel, nous avons installé Jekyll et créé un site de développement avec du contenu généré automatiquement. Dans notre next guide, nous allons explorer ce contenu pour illustrer comment Jekyll transforme les fichiers source en site statique et en informe le décisions concernant nos paramètres de configuration.