Pourquoi ce site existe-t-il ?

Un problème de longue date lorsqu’on apprend une nouvelle technologie, c’est que la plupart de la documentation et des exemples que vous pouvez trouver sur Internet ou auprès des IA sont si simplistes qu’ils ne vous donnent aucune idée de savoir si la technologie, ou votre implémentation, tiendra le coup sous une charge de travail réelle et complexe. Un exemple de cela est la multitude d’exemples de listes de tâches.

J’ai un projet de SASS prévu, basé sur plusieurs hypothèses technologiques qui doivent être testées avant même d’essayer de construire le vrai projet, et un site de profil personnel comme celui-ci, propulsé par un back-end CMS complet, est juste assez complexe pour mériter une mise en production en bonne et due forme et assez simple pour ne pas prendre trop de temps à assembler; avec l’avantage supplémentaire que, si tout se passe bien, j’obtiens un site de profil performant qui servira de bon banc d’essai pour d’autres expériences plus techniques.

Cloudflare comme cible de déploiement

Cloudflare Workers https://workers.cloudflare.com/ semble, à première vue, être un moyen extrêmement économique de déployer une application complexe. Le développement back-end semble simple et robuste, et le paquet OpenNext https://opennext.js.org/ semble offrir une façon efficace de développer votre front-end dans Next.js https://nextjs.org/ et de le déployer sur Cloudflare.

Je doute que ce site attire beaucoup de trafic humain; toutefois, je vais tenter d’y diriger le plus possible de trafic provenant des recherches Web et des robots d’exploration d’IA. Ainsi, je devrais pouvoir déterminer le coût réel d’exploitation d’un site très fréquenté sur la plateforme de Cloudflare.

Rendre ce site plus compliqué qu’il ne devrait l’être

Back-end de gestion de contenu (CMS)

En toute honnêteté, ce site, dans son état actuel, pourrait être bricolé avec un agent de codage en quelques heures; toutefois, un système sérieux ne devrait pas nécessiter un déploiement pour modifier le contenu de base. Ainsi, ce site utilise un CMS complet basé sur Payload CMS (https://payloadcms.com/) déployé comme un Cloudflare Worker distinct.

Payload utilise lui-même une base de données SQL, qui doit à son tour être déployée comme instance de base de données SQLite CloudFlare D1 https://developers.cloudflare.com/d1/, et être correctement gérée avec des migrations de base de données pour soutenir le cycle de vie de développement.

Traductions automatisées

Ce site prend en charge 20 langues. Étant donné que le site Web est une simple ossature pour le contenu du CMS, le volet i18n est géré avec un agent de codage (Co-pilot et Claude Opus 4.5) pendant le développement.

Il reste donc tout le contenu actuel et futur du CMS à traduire automatiquement chaque fois qu’un contenu en anglais est modifié.

Worker basé sur une file et sur Cron

L’exigence de traduction impose un processus assez complexe qui :

• Se déclenchera selon un minuteur Cron.
• Identifiera tout contenu nécessitant une nouvelle traduction.
• Exécutera de manière fiable une traduction.
• Se rétablira de manière fiable après un échec.

Par conséquent, une autre instance CloudFlare D1 est utilisée pour suivre le travail de traduction, et les files d’attente Cloudflare (https://developers.cloudflare.com/queues/) sont utilisées avec un modèle producteur-consommateur basé sur Cron afin de gérer et de mettre à l’échelle les tâches. L’API gpt-5.2 d’OpenAI est appelée pour effectuer les traductions et AI.SDK https://ai-sdk.dev/ relie le tout.

Pour ce site, c’est exagéré, mais tout système en production, peu importe l’échelle, a besoin d’un modèle robuste pour orchestrer le traitement en arrière-plan.

Versions précédentes de ce site

J’ai déjà refait ce site deux fois comme outil pour apprendre de nouvelles technologies :

2013 - Apprendre Ruby et AWS

• Ruby on Rails v4.0.0.
• Stylisation Bootstrap v3.
• CoffeeScript pour l’interface utilisateur.
• Modèle front-end Backbone Marionette VMC.
• Déployé sur un hôte AWS.

2017 - Apprendre React

• React v16.0.0 pour l’interface utilisateur.
• Redux et Thunk pour les opérations asynchrones.
• Semantic UI pour la mise en forme.

Et ensuite

Le site est correctement configuré pour le SEO, et une cadence régulière de nouveau contenu est nécessaire pour alimenter le trafic des robots d’exploration. Je publierai des articles plus détaillés sur les différentes technologies et solutions utilisées.