Salut à tous, aujourd’hui on va s’intéresser aux générateurs de sites dit « statiques » et plus particulièrement comment déployer un site Jekyll avec Nginx(avec le thème beautiful-jekyll). Et oui, je sais ça fait 10 ans que cette techno est sortie, mais moi j’en ai pas eu besoin jusqu’ici hein…^^
C’est quoi un « site statique » ?
Un site statique, par opposition à un site dynamique, est un site ou le serveur web n’exécute pas de code lors des requêtes du client. Exit : PHP, Node-JS ou Django, en gros le serveur se contentera de servir des fichiers statiques de type HTML, JavaScript et CSS.
C’est quoi l’intérêt ?
Les CMS comme WordPress, Drupal ou encore Joomla qui vous permettent de construire vos sites grâce à des interfaces web avec des sous-parties réservées à l’administration et à l’édition de vos textes, images, etc. Les sites statiques à contrario, doivent être générés (et transférés si besoin) sur le serveur à chaque mise à jour, puisque lors des appels clients, votre serveur web ne fera que renvoyer des fichiers et n’exécutera aucun code.
En contrepartie de cette perte de fonctionnalités, vous obtenez en gain non négligeable sur les éléments suivant :
- Facilité l’administration : plus besoin de bases de données, de cache (varnish), d’optimisations diverses ou de règles de fail2ban maison. Vous déployer un simple serveur web comme Nginx et c’est plié.
- Sécurité : plus de code exécuté côté serveur, ça veut aussi dire plus failles de sécurité PHP (ou autre) sur votre CMS, plus de vuln MySQL, non plus. Cela réduit fortement la « surface d’exposition » de votre serveur.
- Performance : le site web ne servant que des pages fixes, pas de calculs compliqués à faire avant de servir le contenu, pas d’appel à une base de données sur le réseau. Vous pouvez optimiser les pages à mort à la génération et offrir des temps de réponses bien supérieurs à ceux des sites traditionnels qui exécutent du code côté serveur.
Dans quels cas utiliser des sites statiques
On peut imaginer plein de cas d’usages tordus mais le plus souvent vous aurez envi de mettre en place un site statique quand :
- Votre site ne nécessite pas (trop) de mise à jour.
- Vous n’avez pas besoin d’interface WYSIWYG pour les publications.
- Vous n’avez pas (trop) envie de vous occuper de la sécurité du serveur.
- Vous n’avez pas besoin de gérer des utilisateurs avec des droits différents.
Donc typiquement vous aimez LateX et vous voulez la version Web :
- Page web d’une petite entreprise ou d’une association.
- Site web personnel.
- Site d’un évènement (genre PowerShell Saturday Paris).
Comment déployer un site Jekyll avec Nginx
Aller on va mettre un peu le nez dedans maintenant, la première étape c’est d’installer Ruby sur la machine qui générera le site. Machine qui peut et devrait donc être différente de votre serveur, ici pour simplifier je fait tout depuis le même serveur.
Soit via les dépôts :
apt-get install ruby-full build-essential
Soit via les sources officielles, ce qui peut être nécessaire si vous avez une vieille distribution qui n’a pas de version récente de Ruby dans ces dépôts :
cd /opt wget https://cache.ruby-lang.org/pub/ruby/2.6/ruby-2.6.5.tar.gz tar -xvf ruby-2.6.5.tar.gz rm ruby-2.6.5.tar.gz cd ruby-2.6.5 ./configure make sudo make install
Il faut ensuite installer jekyll et bundler avec gem !
gem install jekyll bundler bundle install
Vous pouvez choisir de redévelopper votre propre thème. Mais le plus simple est d’en prendre un déjà fait, vous en trouverez tout un tas sur le net. Ici j’ai choisit beautiful-jekyll arbitrairement parce qu’il est assez populaire et que la dernière mise à jour est récente.
On va créer un nouveau dossier pour le site et placer les sources du site jekyll dedans :
cd /usr/share/nginx git clone https://github.com/daattali/beautiful-jekyll.git cd beautiful-jekyll
A partir de là, vous pouvez déjà commencer à modifier les sources du sites via les fichiers de configuration ou en modifiant le contenu des fichiers sources, exemple :
vim _config.yml vim index.html vim contact.md vim _post/[...].md
Quand vous pensez avoir modifié et ajouté le contenu que vous souhaitez dans le site, pour le construire il vous suffit de taper :
bundle exec jekyll build
Ce qui généra les sources du site dans le sous dossier « _site ».
Servir le site avec Jekyll
Jekyll est livré avec un serveur web natif que vous pouvez démarrer via la commande suivante :
bundle exec jekyll serve
Je vous avoue qu’en dehors des tests locaux, je vois pas bien l’intérêt de mettre un site en production via ce système quand il existe des vrais logiciels de serveurs Web comme Nginx ou Apache qui sont 30 fois plus standardisés, documentés et performant.
Servir le site Jekyll avec Nginx
A ce stade je suppose que vous avez déjà installé un serveur web nginx, sinon je vous invite à relire tous mes articles sur le sujet.
Donc à partir de là, il vous suffit de servir le contenu de ce dossier comme n’importe quel serveur web, via un fichier .conf dans « /etc/nginx/conf.d » ou « /etc/nginx/site-available », voici un exemple :
server {
listen 80;
listen [::]:80;
server_name <SITE_DNS>;
#https only
location / {
return 301 https://$server_name$request_uri;
}
}
server {
listen 443 ssl http2;
listen [::]:443 ssl http2;
server_name <SITE_DNS> ;
access_log /var/log/nginx/jekyll-access.log splunk;
error_log /var/log/nginx/jekyll-error.log;
root /usr/share/nginx/beautiful-jekyll/_site/;
index index.html;
location / {
try_files $uri $uri/ index.html;
}
# SSL configuration with certbot
# certbot webroot : .well-known doit rester accessible pour tous, pour que le serveur cerbot puisse y accéder
# certbot certonly --webroot -w /usr/share/nginx/beautiful-jekyll/_site/ -d <SITE_DNS>
location ~ /.well-known/acme-challenge {
allow all;
}
ssl_certificate /etc/letsencrypt/live/<SITE_DNS>/fullchain.pem;
ssl_certificate_key /etc/letsencrypt/live/<SITE_DNS>/privkey.pem;
}Suivi d’un coup de :
service nginx restart
Personnaliser le site
Et c’est tout, votre site jekyll devrait être accessible à l’url choisie. Enfin, à partir de là, il faut passer par une série de modifications et tests du contenu et de l’organisation du site. Ces modifications dépendent en partie du thème que vous aurez choisi, du coup je peux pas trop vous aider, c’est à vous de lire les documentation du thème et de l’ajuster à votre gout.
Comme il n’y a pas d’éditeur et que tous les fichiers sont des fichiers « .conf » (au format txt donc), ce type de site est parfait si vous recevez en amont les textes à intégrer d’un tiers/client et qu’il ne vous reste plus qu’a les recopier, voir les mettre un peu en forme via le système de markdown.
Exemple : SystemSec
J’ai monté le domaine systemsec.fr dans le cadre de ce TP. Je vous laisse aller voir cette petite (et humble) démo du coup.
Ceux qui iront lire verront qu’il s’agit d’une vitrine pour la petite autoentreprise que j’envisage de lancer sous peu, donc si vous cherchez quelqu’un pour vous donner un coup de main en SSI, c’est par ici que ça se passe pour me contacter !
Conclusion
Bref, comme d’habitude, j’espère que ça vous aura intéressé, c’est pas l’article du siècle vu que jekyll fait parti du paysage depuis un moment maintenant. Mais si ça peut permettre à certain d’entre vous se mettre le pied à l’étrier quand vous aurez besoin de montez un site Jekyll avec Nginx, vite fait, et l’oublier dans un coin… Pour finir, pour ceux qui sont allergique au Ruby et à Jekyll, allez voir Hugo !
