Ce post a été traduit par une IA et seulement revu de manière sommaire par rétrotraduction.

Début des travaux... Encore une fois

Cela fait un moment que je n'ai pas mis à jour mon site Web. J'ai beaucoup changé de configurations. Pendant un certain temps, j'ai utilisé Hugo Academic, puis je suis passé à Bay où je suis resté un moment sans rien toucher. À un moment donné, je jouais avec Flask, mais je ne m'y suis jamais vraiment engagé. Alors que je m'approche de la fin de mon doctorat, j'ai pensé que ce serait le bon moment pour mettre à jour mon site Web avec quelque chose de plus moderne et commencer à publier du contenu réel.

En faisant cela, j'ai défini quelques critères que je voulais respecter :

Tout d'abord, je voulais quelque chose de déjà bien construit avec des fonctionnalités modernes. L'un des principaux problèmes que j'ai rencontrés avec mes sites précédents est qu'ils manquaient de certaines nécessités comme des mises en page réactives, un thème clair/sombre et une barre de recherche. Je voulais aussi une esthétique agréable. C'est étonnamment difficile à trouver gratuitement - la plupart des modèles gratuits semblent datés, sont un peu hackers ou ne sont pas conçus pour un site personnel.

Deuxièmement, je voulais quelque chose dont je pouvais comprendre la majeure partie du code back-end. Je peux me débrouiller en JavaScript, HTML et CSS, mais je ne suis expert en aucun d'eux. En tant que biologiste interdisciplinaire, je passe la plupart de mon temps de programmation à travailler en R et Python avec des scripts et des outils en ligne de commande, bien que je me sois également auto-appris le Rust juste pour avoir une langue de bas niveau dans mon répertoire. Hugo est écrit en Go et Jekyll en Ruby. Une fois que vous connaissez une langue, vous pouvez en apprendre d'autres ; cependant, je ne veux pas que mon site personnel se transforme en un projet de codage substantiel. Le but est d'avoir un site simple où je peux publier mes idées et potentiellement fournir des ressources pour que les autres puissent apprendre. En utilisant un langage que je connais déjà, je peux rapidement examiner le code pour ajouter toute fonctionnalité dont j'ai besoin ou trouver des solutions aux problèmes que je rencontre.

Troisièmement, je voulais quelque chose avec une faible surface d'attaque. WordPress est un moyen agréable et peu codé de créer un site Web, mais il est notoirement vulnérable aux attaques. Si l'idée est de créer un site à faible maintenance, je ne veux pas avoir à me soucier de la sécurité du serveur sur lequel il fonctionne. Ces problèmes existent si je devais créer mon propre site à partir de zéro avec un cadre dynamique comme Flask. Bien qu'il serait agréable d'avoir un éditeur visuel et du contenu dynamique, je pense que je peux obtenir beaucoup d'avantages simplement en utilisant un cadre markdown solide. Toutes les fonctionnalités dynamiques que je souhaite peuvent probablement être ajoutées en jouant avec JavaScript. Si cela ne suffit pas, je peux toujours rediriger vers un site dynamique sur un sous-domaine.

Mise en place de la pile

Zola - Un générateur de sites statiques riche en fonctionnalités

Zola coche toutes les cases pour moi. Il est écrit en Rust, un langage que je connais déjà. C'est aussi un générateur de sites statiques, ce qui signifie qu'il ne nécessite ni base de données ni serveur pour fonctionner. Bien que son adoption semble inférieure à celle de Hugo, Jekyll ou d'autres solutions majeures, j'ai trouvé de beaux thèmes déjà adaptés. J'ai fini par utiliser Blow ici. Il est super propre, réactif et comporte une recherche intégrée et des bascules clair/sombre.

Zola propose également des fonctionnalités que je n'ai pas vues dans d'autres générateurs de sites statiques. En plus de la recherche intégrée (qui nécessite un support JavaScript du thème), il dispose également d'un support multilingue. Je suis enthousiaste à l'idée de l'utiliser pour toucher un public plus large que si je devais me limiter à une seule langue. J'aime aussi le mode serveur en ligne de commande avec rechargement en direct. C'est un moyen pratique de voir à quoi ressemble votre site et les changements au fur et à mesure que vous apportez des modifications à votre contenu. Cela me permet d'itérer rapidement et de voir les résultats de mes modifications même si le site sera finalement statique.

J'ai trouvé que la documentation de configuration de Zola était excellente. Si vous me suivez, vous pouvez la trouver ici. Je suis sur Arch Linux, donc j'ai suivi ces étapes :

# Pour Arch Linux
$ sudo pacman -S zola
$ cd ~/code/ # ou où que vous vouliez stocker votre site Web
$ zola init nom_du_site
$ cd nom_du_site
$ git init
$ git submodule add https://github.com/tchartron/blow.git themes/blow
$ zola serve

En plus de bloguer et de promouvoir certains de mes outils, je veux aussi utiliser mon site Web comme un raccourcisseur d'URL pratique que je contrôle. C'est un espace que Zola prend moins en charge. C'est une fonctionnalité précieuse car j'ai du contenu en dehors de mon blog. Je peux également utiliser le même moteur de blog pour diriger les gens vers une liste de mes outils. J'ai pu implémenter cela en utilisant un shortcode.

<div {% if class %}class="{{class}}" {% endif %}>
    <p><a href="http://{{loc | safe}}">Redirection</a></p>
    <script>
        window.location.href = "http://{{loc | safe}}";
    </script>
</div>

Après avoir ajouté ceci à templates/shortcodes/redirect.html, je peux configurer des redirections qui fonctionnent même avec mes analyses.

Apaiser l'UE avec Umami

Chaque fois que je visite un site Web, je suis accueilli par une fenêtre contextuelle qui obscurcit le contenu de la page. Cette fenêtre contextuelle me demande de consulter la politique de cookies et de sélectionner mes préférences. Parfois, je ne suis même pas autorisé à le faire, le site me force simplement à accepter. D'autres fois, je dois attendre une période arbitrairement gonflée où le site "configure les partenaires de cookies" ou autre. Plutôt que de soumettre mes visiteurs à cela, j'ai décidé d'utiliser un service d'analyse conforme au RGPD. J'ai décidé d'utiliser Umami. Je veux toujours pouvoir suivre les vues de page et voir quelles pages attirent l'attention (surtout si je configure cela avec des redirections pour un QR code de poster ou de conférence). Umami me permet de suivre mes analyses sans avoir à me soucier des bannières de cookies. Ils ont également un niveau gratuit qui devrait suffire à moins que je ne devienne viral ou autre.

Plausible est une excellente alternative à Umami et mérite d'être mentionné ici. La raison pour laquelle j'ai décidé d'utiliser Umami est qu'il offre un niveau gratuit dans le cadre de leur service hébergé. Vous pouvez utiliser une version communautaire de Plausible gratuitement, mais vous devez l'héberger vous-même pour cela. Je voulais éviter cela pour les raisons mentionnées ci-dessus.

Configurer Umami était vraiment simple. Il suffisait d'ajouter une balise script à mon en-tête HTML et j'étais prêt à partir. Cela a été décrit lors du processus de création de compte. Je ne sais pas si je vais continuer à utiliser Umami à long terme, mais cette intégration en une ligne signifie que je peux passer à un autre fournisseur d'analyses avec un effort minimal.

Hébergement statique gratuit avec Cloudflare Pages

Il existe de nombreux fournisseurs d'hébergement statique gratuit. Lorsque j'ai commencé à utiliser un générateur de sites statiques, j'ai utilisé Netlify. C'était un excellent service, mais j'utilise déjà Cloudflare dans le cadre de mon site personnel pour filtrer les bots et je suis heureux de rester avec eux. Plus récemment, mon site a été hébergé directement via Github Pages. Cependant, Github a récemment eu des problèmes avec des dépôts privés étant accessibles publiquement, et je ne conserverai probablement pas mon abonnement Github Pro après l'expiration de ma licence éducative. De plus, Github a une limitation quant à la quantité de données que vous pouvez stocker dans un dépôt. J'ai quelques idées intéressantes pour des articles de blog qui pourraient nécessiter plus de quelques centaines de kilo-octets de données brutes, et il serait agréable de pouvoir gérer ma structure de données de manière à garder mon site et les données proches. J'ai un bon plan

de redondance des données en place (un autre article de blog pour un autre jour), donc je suis à l'aise de gérer mes données de cette manière.

Cloudflare Pages est bien car vous pouvez télécharger directement votre site statique sur leur service. Cela évite d'avoir à utiliser quelque chose comme Github CI ou de se soucier d'un processus de publication API compliqué. Je pense qu'il est possible d'intégrer directement les redirections dans Cloudflare, ce qui me permettrait d'éviter de jongler avec cette fonctionnalité dans Zola. Actuellement, Cloudflare Pages est gratuit et ne semble pas avoir de limites sur les données que vous pouvez stocker. Il dispose également de fonctions sans serveur intégrées, donc je pourrais utiliser cela pour ajouter plus de fonctionnalités à mon site statique. J'ai trop d'idées pour des projets personnels, donc m'habituer à la plateforme Cloudflare me prépare également pour des projets futurs.

Tout d'abord, je dois construire mon site en utilisant Zola. Pour cela, j'utilise la commande zola build. Cela créera un dossier appelé public dans mon répertoire de projet. Pour l'instant, je gère le processus de téléchargement manuellement. Créez simplement un compte Cloudflare si vous n'en avez pas et naviguez vers la section Workers & Pages de votre tableau de bord. Cliquez sur l'onglet Pages, nommez votre nouveau projet et téléchargez le dossier public. Si vous n'avez pas de domaine, ils vous fourniront un sous-domaine à utiliser. J'automatiserai le processus de téléchargement plus tard. La documentation pour cela est ici.

Il est important de mentionner qu'au moment de l'écriture, Cloudflare Pages présente un bug de longue date pour les utilisateurs de Firefox. Lors du téléchargement de contenu, Cloudflare inclut pour une raison inconnue des métadonnées supplémentaires qui modifient la manière dont Cloudflare gère les pages, ce qui entraîne l'affichage uniquement du HTML brut. Il pourrait exister un moyen de corriger cela automatiquement, mais ce problème peut être résolu en ajoutant un fichier supplémentaire "_headers" à la racine de votre dossier "public/".

/*
! X-Content-Type-Options

Plans futurs

Je suis sûr que ce ne sera pas la dernière fois que je ferai une refonte complète de mon site. J'espère que vous avez trouvé mes raisons derrière mes décisions utiles d'une manière ou d'une autre. Je pense que malgré la durée de vie des générateurs de sites statiques, il y a encore beaucoup de place pour les développements futurs. Je suis intéressé par la façon dont je pourrais intégrer une expérience plus interactive via des JavaScript intégrés ou en tirant parti des fonctions sans serveur. Je n'ai aucun doute que vous pourriez créer des applications assez impressionnantes avec un site statique et des fonctions sans serveur.

Dans un avenir proche, je veux tirer parti de nombreuses fonctionnalités offertes par Zola. Je ne suis pas immédiatement satisfait de la recherche et du support linguistique fournis par cette combinaison. Je commencerai probablement par ajouter du contenu dans des langues supplémentaires, puis j'examinerai comment rendre la recherche pleinement fonctionnelle. Ensuite, j'ai un certain nombre d'idées de blog qui, je pense, seront utiles pour les étudiants diplômés actuels et futurs dans le domaine de la biologie synthétique. Je pense également que ce site servira de bon tremplin pour certains des outils que j'ai créés. Plus que tout, je suis excité de enfin avoir une configuration cohérente et de commencer à créer du contenu - quelque chose que je voulais faire depuis longtemps.