Projets

J'ai créé mon propre langage de balisage pour publier mes poèmes sur un site web.

D'un simple clic, je les injecte dans une chaîne de déploiement : de mon ordinateur vers GitHub, puis vers un bucket S3, une instance EC2, et enfin dans une base de données MySQL, à partir de laquelle un site PHP les extrait et les affiche.

Introduction

Le contenu du site est stocké dans un fichier Excel, injecté dans une base MySQL via Python, puis affiché dynamiquement en HTML par du code PHP. Le tout est multilingue, facile à maintenir, et publié en un clic.

Avant d’entrer dans le concept complet, voyons comment cette page est réellement générée.

Tout le contenu textuel est stocké dans un fichier Excel, qui contient une colonne pour les balises et deux colonnes pour les langues : français et anglais.

Un script Python injecte ces données dans une base de données MySQL, et un peu de code PHP lit cette base et génère le HTML approprié en fonction des balises.

Aucun HTML n’est écrit manuellement — ce qui rend le contenu facile à maintenir, multilingue par conception, et entièrement dynamique.

Ce mécanisme représente l’architecture de base de l’ensemble du site.

Et le meilleur dans tout ça ? Je peux tout envoyer de mon disque dur au serveur en ligne en un seul clic.

N’hésitez pas à découvrir la suite ci-dessous.

Problématique

Je veux publier mes poèmes sous plusieurs formats (PDF, LaTeX, EPUB, site web), mais Word est trop brouillon et le texte brut trop limité. Il me faut un système propre, cohérent, qui gère les structures complexes, évite les doublons, et reste élégant — Word et Markdown ne suffisent pas.

J’ai une collection de poèmes sur mon disque dur, et je souhaite les publier sous plusieurs formats différents :

  • J’aimerais un format de fichier pratique, comme le PDF, pour les partager facilement.
  • Je publie mes livres avec LaTeX, donc je veux pouvoir convertir facilement mes poèmes en LaTeX.
  • Il serait utile de générer une version EPUB si besoin.
  • Idéalement, j’aimerais une page web propre et élégante qui rassemble tous mes poèmes.
  • La solution facile : Word

    La solution la plus simple serait d’utiliser un fichier Microsoft Word.

    Je peux l’exporter en PDF, en HTML, et probablement même en LaTeX. Avec une bonne utilisation des titres et du formatage, cela pourrait donner un résultat cohérent et esthétiquement agréable.

    Ce ne serait pas un mauvais choix — je suis même assez sûr que c’est ce que font 95 % des auteurs de poésie. Eh bien, il se trouve que je fais partie des 5 % restants, car Word n’est tout simplement pas pratique pour moi.

    Problème n°1 : Fichiers texte brut

    J’écris en texte brut, avec l’ancienne version du Bloc-notes Windows.

    Quand l’inspiration me vient, j’ai besoin que mon outil d’écriture apparaisse en une seconde, en un seul clic — pas plus.

    Une fois le poème écrit, je dépose simplement le fichier texte dans le bon dossier.

    Il peut y rester, intact, pendant des années avant d’être relu un jour.

    Problème n°2 : Trop de copies

    Dans un flux de travail classique, je me retrouverais avec plusieurs versions : le fichier texte brut, la version HTML sur le site, des fichiers exportés, etc.

    Si je fais une correction — même une virgule — je dois la répercuter partout.

    Et si j’oublie ne serait-ce qu’une fois, tout devient incohérent. Je perds la trace de la version “la plus juste”.

    Un vrai cauchemar.

    Problème n°3 : Poèmes complexes

    La plupart de mes poèmes sont assez simples. Mais certains incluent des sauts de ligne variés, des retraits, des citations…

    J’écris aussi des chansons, donc j’ai besoin de structures comme couplet, refrain, pont, etc.

    Utiliser un outil comme Markdown pour ça serait bien trop limité — et inutilement compliqué.

    Problème n°4 : Aucune fluidité

    Écrire des poèmes, c’est agréable. Coder de petites applications aussi.

    Mais envoyer les fichiers en FTP, ajouter manuellement les balises <code><p></p></code> à chaque ligne, et propager chaque correction partout…

    C’est agaçant et chronophage.

    Problème n°5 : Vilain petit Word

    J’ai une certaine approche minimaliste. J’aime le code propre — sans lignes inutiles. Du CSS propre — sans classes superflues.

    Si vous avez déjà exporté un document depuis Word, vous savez que « propre » est sûrement le dernier mot qui vous viendrait à l’esprit.

    Bien sûr, je pourrais écrire un script pour nettoyer tout ça (en fait, je l’ai fait pour mes scénarios — mais c’est une autre histoire).

    Mais si l’objectif est un flux de travail propre, Word devrait probablement rester à l’écart.

    La vraie solution

    Pour contourner les limites de Word et Markdown, j’ai créé Lyra, mon propre langage de balisage pour la poésie. Il gère la typographie multilingue, les contraintes LaTeX, la structure des chansons et les formats personnalisés. Un script Python traite les fichiers et les injecte dans une pipeline — de mon PC à GitHub, S3, EC2, MySQL, puis le site PHP — en un seul clic.

    Après avoir pris tout cela en compte, j’ai trouvé une solution plus adaptée : créer mon propre langage de balisage et construire une pipeline allant de mon disque dur local jusqu’à un serveur AWS.

    Donc oui — si je devais résumer ce projet de façon un peu plus poétique ou façon “portfolio technique”, cela donnerait quelque chose comme :

    J’ai créé mon propre langage de balisage pour publier mes poèmes sur un site web.

    D’un simple clic, je les injecte dans une pipeline : de mon ordinateur → vers GitHub → un bucket S3 → une instance EC2 → une base MySQL, extraite par un site PHP.

    Une pipeline plus courte serait techniquement possible, mais comme je dois aussi uploader tout le site — et pas seulement les poèmes — cette approche est plus logique.

    Et puis, si le site web met joliment en valeur la partie poétique, GitHub est le bon endroit pour mettre en avant la partie code.

    Et puisque l’on parle de poésie et de code, voyons à quoi ressemble concrètement mon langage de balisage maison.

    Lyra, un langage de balisage pour la poésie

    Créer un tel langage présente plusieurs défis.

    Typographie multilingue

    Le principal, ce sont les règles typographiques. J’écris principalement en français, mais parfois aussi en anglais — et leurs conventions de ponctuation et de typographie sont très différentes.

    LaTeX gère cela plutôt bien, mais HTML, pas du tout.

    Mon texte maître doit donc rester aussi neutre que possible typographiquement.

    Ensuite, le script de conversion se charge de corriger les incohérences et d’appliquer le formatage correct selon la langue.

    Voici un petit exemple pour illustrer le problème :

    Certaines personnes demanderaient : “What is typography?” That’s a legit question—that I need to answer in French.

    Vous demandez donc : « qu’est-ce que la typographie ? » Je vous répondrais bien — mais plus tard.

    On voit clairement les différences : “ ” vs. « » ; espaces fines ou absentes ; tirets cadratins ou simples traits…

    Tout cela doit être géré automatiquement, et avec soin.

    Contraintes LaTeX

    J’adore publier avec LaTeX, mais LaTeX a ses propres exigences.

    Par exemple, il n’aime pas le caractère “—” et préfère que l’on écrive “<code>---</code>” à la place.

    Après des années d’utilisation de LaTeX, taper “<code>--</code>” et “<code>---</code>” est devenu un réflexe.

    De plus, comme mentionné précédemment, LaTeX attend des espaces typographiques à l’anglaise par défaut, puis applique les règles correctes selon la langue définie.

    Je n’aimerais pas contrarier Monsieur LaTeX — alors je m’y plie volontiers.

    Chansons & poésie

    Comme vous le savez déjà, j’écris de la poésie — très bien.

    Mais j’écris aussi des chansons, ce qui signifie que j’ai besoin d’un balisage pour les couplets, refrains, ponts, et autres.

    Ce n’est pas un énorme défi, mais c’est quelque chose que mon langage de balisage doit pouvoir gérer.

    Le langage

    En prenant en compte toutes ces contraintes, j’ai conçu un langage de balisage personnalisé que j’ai appelé Lyra — probablement parce que je suis un peu trop obsédé par la culture de la Grèce antique.

    Vous pouvez voir l’implémentation complète dans le panneau de code, mais voici les principales transformations qu’il applique :

    text = text.replace('\u202f',' ').replace('\u00a0',' ').replace('\t',' ')

    text = re.sub(r'\s{2,}',' ', text)

    Cette première étape supprime tous les caractères invisibles comme :

  • <code>\u202f</code> (espace fine insécable)
  • <code>\u00a0</code> (espace insécable)
  • <code>\t</code> (tabulation)
  • Tous sont remplacés par une espace standard.

    Ensuite, <code>r'\s{2,}'</code> réduit les doubles espaces ou plus à un seul, garantissant que le texte traité est propre et cohérent.

    text = text.replace("<<","« ").replace(">>"," »")

    text = text.replace("+-+","—").replace("=+=","[…]")

    Même principe ici : je remplace des balises spécifiques par les caractères typographiques attendus.

    if typographie=="fr":

    text = re.sub(r'(?<! )([!?;:])', '\u202f\\1', text)

    else:

    text = re.sub(r'\s+([!?;:])', r'\1', text)

    Et c’est là que ça devient intéressant : les règles typographiques changent selon la langue.

    Si la langue est le français, on ajoute une espace fine avant certaines ponctuations.

    Si c’est l’anglais, on suit les règles d’espacement classiques de l’anglais.

    text = text.strip()

    text = re.sub(r'<!--.*?-->', '', text)

    text = re.sub(r'%.*$', '', text)

    return text

    Nettoyage final : <code>strip()</code> supprime les espaces en début et fin de texte.

    Les lignes <code>re.sub</code> suppriment les commentaires HTML et les lignes commençant par <code>%</code>, que j’utilise comme annotations internes.

    Ponctuation

    ’, ‘, ‛&nbsp;&nbsp;→&nbsp;'

    ----, ---, --, –&nbsp;&nbsp;→&nbsp;—

    …&nbsp;&nbsp;→&nbsp;…

    <<&nbsp;&nbsp;→&nbsp;«

    >>&nbsp;&nbsp;→&nbsp;»

    +-+&nbsp;&nbsp;→&nbsp;—

    =+=&nbsp;&nbsp;→&nbsp;[…]

    Commentaires

    <!-- xxx -->&nbsp;&nbsp;→&nbsp;supprimé

    %&nbsp;&nbsp;→&nbsp;supprimé

    Style de police

    * xxx *&nbsp;&nbsp;→&nbsp;italique

    *µ xxx µ*&nbsp;&nbsp;→&nbsp;gras

    *µµ xxx µµ*&nbsp;&nbsp;→&nbsp;italique gras

    ££&nbsp;&nbsp;→&nbsp;acrostiche

    Titres

    #&nbsp;&nbsp;→&nbsp;Titre

    ##&nbsp;&nbsp;→&nbsp;Auteur

    ###&nbsp;&nbsp;→&nbsp;Titre du recueil

    ####&nbsp;&nbsp;→&nbsp;Année

    #####&nbsp;&nbsp;→&nbsp;Sous-titre

    >$&nbsp;&nbsp;→&nbsp;Numéro de partie

    Hors-vers

    <=+ xxx +=>&nbsp;&nbsp;→&nbsp;Texte hors vers

    <+ xxx +>&nbsp;&nbsp;→&nbsp;Citation

    <++ xxx ++>&nbsp;&nbsp;→&nbsp;Auteur de la citation

    Structure de chanson

    ²cpl1&nbsp;&nbsp;→&nbsp;fr : [Couplet 1] en : [Verse 1]

    ²rfn1&nbsp;&nbsp;→&nbsp;fr : [Refrain 1] en : [Chorus 1]

    ²pnt&nbsp;&nbsp;→&nbsp;fr : [Pont] en : [Bridge]

    ²rnv&nbsp;&nbsp;→&nbsp;fr : [Renvoi]en : [Tag]

    ²itl&nbsp;&nbsp;→&nbsp;[Interlude]

    ²int&nbsp;&nbsp;→&nbsp;[Intro]

    ²out&nbsp;&nbsp;→&nbsp;[Outro]

    ²brp&nbsp;&nbsp;→&nbsp;(bis repetitas)

    Alignements

    <= xxx =>&nbsp;&nbsp;→&nbsp;Centré

    <== xxx ==>&nbsp;&nbsp;→&nbsp;Aligné à droite

    Strophes

    >=&nbsp;&nbsp;→&nbsp;Saut de ligne simple

    >==&nbsp;&nbsp;→&nbsp;Saut de ligne moyen

    >===&nbsp;&nbsp;→&nbsp;Saut de ligne large

    Indentations

    >+&nbsp;&nbsp;→&nbsp;Indentation simple

    >++&nbsp;&nbsp;→&nbsp;Indentation moyenne

    >+++&nbsp;&nbsp;→&nbsp;Indentation large

    >++++&nbsp;&nbsp;→&nbsp;Décalage à droite

    Étape suivante

    Une fois le langage de balisage défini et le script Python de conversion prêt, il était temps de passer à l’étape suivante :

    construire la pipeline pour publier les poèmes en ligne.

    Construction du projet

    J’ai mis en place une pipeline complète pour publier mes poèmes et mettre à jour mon site en un seul clic :
    Depuis mon PC → GitHub → S3 → Lambda → EC2 → scripts Python → MySQL.
    J’ai conçu un langage de balisage maison (Lyra) pour gérer la typographie multilingue, et structuré le site autour de vrais services AWS : VPC, EC2, S3, Route 53, IAM, etc.
    Le développement local se fait sous Windows avec des scripts batch et shell déclenchant GitHub Actions. Le tout est automatisé et dynamique.

    La pipeline

    Le concept est simple : publier de nouveaux poèmes en ligne en un seul clic.

    À l’époque, on faisait ça avec un bon vieux serveur FTP — on se connectait, on déposait les fichiers dans le client, et le site était mis à jour.

    Ce n’était pas exactement un “clic”, mais ça s’en approchait.

    Malheureusement, cette époque est en grande partie révolue (bon, pas complètement — je vois encore des multinationales fonctionner comme ça quotidiennement, mais passons).

    Aujourd’hui, nous vivons à l’ère du Cloud, et comme je développe mes compétences sur AWS, voici comment fonctionne ma pipeline :

  • J’écris des fichiers texte <code>.ryu</code> en utilisant mon langage de balisage maison, Lyra. Ils sont stockés dans un sous-dossier Poetry de mon répertoire Writing.
  • Un script batch les copie dans mon dossier <code>scripts/website</code>, où ils sont regroupés avec tous les fichiers PHP/HTML.
  • À partir de là, j’envoie tout vers GitHub — parce que mon Gros et Magnifique code mérite d’être vu, et GitHub est fait pour ça.
  • Une GitHub Action zippe le projet et l’envoie dans mon bucket S3 sur AWS.
  • Ce dépôt dans S3 déclenche une fonction Lambda qui transfère l’archive vers mon instance EC2.
  • Sur l’instance EC2, un script Python dézippe le fichier, convertit tous les fichiers <code>.ryu</code> en HTML et les insère dans ma base MySQL.
  • Et voilà — mon site est mis à jour, et toute ma poésie est en ligne.

    En parallèle, je traite aussi un fichier Excel contenant tout le contenu en français et en anglais pour le site, je convertis certains documents Word en HTML, etc.

    Comme vous pouvez le voir, c’est une pipeline amusante. Restez dans les parages pour plus de détails techniques.

    Création des comptes

    Créer tous les comptes a en réalité été la dernière étape du projet — mais il est plus logique de la présenter au début de cette histoire.

    J’ai donc souscrit à un compte AWS, créé un VPC, lancé une instance EC2, ouvert un bucket S3, et enregistré mon nom de domaine fdelancelot.com via Route 53.

    J’ai également configuré les comptes IAM et les rôles de sécurité — mais nous y reviendrons plus tard.

    J’ai aussi créé un dépôt sur GitHub, ce qui m’a permis de préparer l’ensemble de la pipeline, du développement local au déploiement dans le cloud.

    Environnement de développement local (Windows)

    Je joue et j’enregistre de la musique. Pendant de nombreuses années, la plupart des outils de production musicale n’étaient pas disponibles sur Linux — c’est l’une des raisons pour lesquelles je travaille encore sur Windows aujourd’hui.

    Sur mon ordinateur, j’ai un dossier Writing qui contient toutes mes créations, organisées en sous-dossiers :

  • Novels
  • Short Novels
  • Poetry
  • Scripts (dans le sens scénarios de films — pas Python ?)
  • Articles
  • Quand un projet est terminé, je l’enregistre au format texte brut avec une extension <code>.ryu</code>.

    À partir de là, je peux l’exporter en LaTeX, PDF ou HTML.

    Pour des œuvres plus complexes, comme les romans ou les scénarios, j’utilise des modèles Word spécifiques, que j’ai perfectionnés avec le temps et que j’utilise au quotidien.

    Ainsi, la toute première étape de ma pipeline consiste simplement à récupérer les fichiers que je souhaite publier en ligne.

    Fichier batch & fichier sh

    Pour la poésie, j’utilise un fichier Batch qui copie tous les fichiers <code>.ryu</code> — en respectant l’arborescence — dans mon dépôt local.

    Ce même script copie également les fichiers <code>.ryu</code> du dossier Short Novels et les fichiers <code>.docx</code> du dossier Scripts dans leurs emplacements respectifs du dépôt.

    Enfin, le fichier batch lance un script Shell dans Git Bash afin de synchroniser le dépôt avec GitHub.

    Ce push déclenchera ensuite une GitHub Action — mais nous verrons cela dans la section suivante.

    GitHub

    Comme ce site web fait aussi office de portfolio, j’utilise évidemment GitHub comme partie intégrante de la pipeline.

    Cela me permet de montrer mon code et d’assurer le versioning.

    Quand je pousse le dépôt avec mon script shell, cela déclenche une GitHub Action qui téléverse automatiquement une archive ZIP du site web vers mon bucket S3.

    Ça, c’était la partie facile.

    Maintenant vient la partie amusante : configurer toute l’architecture AWS.

    Configuration AWS

    Je pourrais facilement écrire des milliers de lignes sur la manière dont j’ai configuré mon architecture AWS,

    mais pour rester lisible, voici une liste résumée de ce qui a été déployé.

    VPC

  • Plage CIDR : 10.0.0.0/16
  • Subnet public : 10.0.0.0/20 — pour héberger le site web (Apache sur les ports 80/443)
  • Subnet privé : 10.0.128.0/20 — réservé aux services internes futurs (ex. bases de données)
  • Passerelle Internet : attachée pour permettre l’accès à Internet
  • Table de routage : configurée correctement pour gérer le trafic
  • IP élastique : liée pour garantir la résolution persistante du domaine (13.48.51.102)
  • Une instance EC2 est déployée dans ce VPC et accessible en SSH via une clé <code>.pem</code>.

    Instance EC2

  • Type d’instance : Amazon Linux t2.micro (éligible Free Tier)
  • Stack installée : LAMP (Apache, MariaDB, PHP) via <code>yum</code>
  • Apache configuré avec des virtual hosts, PHP activé, support de <code>.htaccess</code>
  • MariaDB installée avec création d’utilisateurs et de base de données
  • Python 3.9 installé avec :
  • <code>mysql-connector-python</code>
  • <code>pandas</code>, <code>python-dotenv</code>, <code>sqlalchemy</code>, <code>unidecode</code>, etc.
  • Certbot installé avec Let’s Encrypt :
  • Certificats émis pour <code>fdelancelot.com</code> et <code>www.fdelancelot.com</code>
  • Tâche Cron prévue pour le renouvellement automatique
  • Agent SSM installé et configuré pour les commandes à distance
  • Amazon S3

  • Bucket créé pour stocker l’archive de déploiement <code>site.zip</code>
  • Politique du bucket ajustée pour autoriser l’accès depuis EC2
  • Amazon Route 53

    Nom de domaine fdelancelot.com acheté directement via Route 53.

    Lambda

    Une fonction Lambda a été créée pour transférer le fichier <code>.zip</code> du bucket S3 vers l’instance EC2.

    Elle est déclenchée automatiquement à chaque téléversement du fichier (manuellement ou via GitHub Action).

    Autres configurations AWS

  • AWS Systems Manager (SSM) : utilisé pour exécuter les commandes Lambda sur EC2
  • Budget : limite mensuelle fixée à 5€
  • IAM

  • Utilisateur admin : pour l’usage quotidien (MFA activée)
  • Utilisateur d’automatisation : pour GitHub CI/CD, avec les politiques suivantes :
  • AmazonS3FullAccess
  • AmazonSSMFullAccess
  • AmazonSSMManagedInstanceCore
  • Rôle d’instance EC2 : avec autorisations pour S3 et SSM
  • Rôle Lambda : avec la permission <code>ssm:SendCommand</code> et accès à l’archive S3
  • Sécurité

  • MFA activée sur le compte root et les autres utilisateurs critiques
  • Groupes de sécurité (firewall) correctement configurés :
  • Port 22 (SSH) : restreint à ma propre adresse IP uniquement
  • Ports 80 & 443 (HTTP/HTTPS) : ouverts pour l’accès web public
  • Écosystème Python & automatisation

    Récapitulatif

    Reprenons la séquence complète du déploiement depuis le début :

  • Script Batch : copie tous les fichiers artistiques nécessaires (poèmes, scénarios, nouvelles) dans le dépôt local
  • Script Bash : lancé par le fichier batch pour pousser le dépôt vers GitHub
  • GitHub Action : déclenchée par le push — elle compresse le projet en ZIP et l’upload dans le bucket S3
  • Fonction Lambda : déclenchée par le nouveau fichier ZIP dans S3
  • Copie le ZIP dans <code>/tmp</code> sur l’instance EC2 à l’aide de SSM
  • Exécute le script deploy.py
  • deploy.py

    Le script deploy.py orchestre tout le processus de déploiement :

  • Décompresse l’archive et déplace le contenu dans le dossier approprié
  • Copie le fichier <code>.env</code> depuis un dossier sécurisé de l’instance EC2
  • Exécute successivement trois scripts Python essentiels :
  • poemstohtml.py

    Ce script convertit les poèmes au format <code>.ryu</code> en HTML.

    Vous l’avez déjà vu — il transforme le contenu écrit en langage de balisage Lyra en HTML et envoie chaque poème dans la table <code>poems</code> de la base de données MySQL.

    Chaque poème est stocké sur une seule ligne.

    La table de base de données utilise de jolis noms de colonnes en français :

    uid → Un identifiant unique

    id_logique→ Un identifiant construit à partir des initiales de la compilation et du poème

    titre → Le titre du poème

    recueil → Le titre de la compilation

    type → Le type (ex. poème, chanson, etc.)

    fichier → Le nom du fichier original

    contenu → Le contenu HTML complet

    date_import → Je vous laisse traduire celui-là ;)

    Le <code>id_logique</code> suffit pour récupérer un poème spécifique, appeler une compilation entière, ou respecter l’ordre voulu en fonction des noms de fichiers.

    screenplayconvert.py

    Ce script parcourt tous les fichiers <code>.docx</code> du dossier Scripts et les convertit en fichiers <code>.php</code> prêts à être inclus directement sur le site web.

    Il existe des bibliothèques Python capables de faire cela automatiquement — mais le coder entièrement à la main était plus amusant.

    Pas forcément le choix le plus malin, certes, mais un bon exercice d’artisanat.

    translationxlsx.py

    C’est le cœur du site web.

    Je maintiens un fichier Excel qui contient :

  • 4 colonnes-clés, que je concatène pour former un identifiant unique au format : <code>pagename.section.subsection.number</code>
  • 1 colonne pour le texte en anglais
  • 1 colonne pour le texte en français
  • Le script envoie la clé combinée et les deux chaînes de texte dans une table MySQL à 3 colonnes.

    Sur le site, une fonction PHP appelle la bonne chaîne de texte en fonction de la page courante et de la langue sélectionnée, en utilisant la clé comme argument.

    Structure des fichiers

  • Une structure de projet complète avec des dossiers comme <code>site/</code>, <code>content/</code>, <code>scripts/</code>, etc.
  • Un fichier <code>.env.example</code> et un <code>.gitignore</code> pour éviter de committer des secrets
  • Un script PowerShell <code>deploy.ps1</code> pour automatiser les opérations Git
  • Remplacé plus tard par un script Bash <code>deploy.sh</code> pour une meilleure compatibilité multiplateforme
  • Un fichier <code>.bat</code> a été créé pour le lancer par double-clic sous Windows
  • Logique supplémentaire ajoutée pour :
  • Copier les fichiers <code>.ryu</code> et <code>.docx</code> depuis les dossiers Poésie, Nouvelles et Scripts vers le dépôt GitHub
  • Ajouter des balises <code><meta name="keywords"></code> (facultatif)
  • Générer <code>sitemap.xml</code> et <code>robots.txt</code>
  • Utiliser le JSON-LD ou des microdonnées pour le balisage sémantique (profil, œuvres, compétences)
  • Sections principales identifiées

  • Hero : une mise en page en deux colonnes avec un titre, une description, des boutons d’appel à l’action, des icônes sociales et une image
  • CV : contient une section “À propos de moi” et un CV complet — plusieurs paragraphes suivis d’un CV structuré (résumé, compétences, expérience, formation, certifications)
  • Compétences : barres horizontales montrant le niveau de maîtrise des technologies front-end et back-end
  • Contact : boîtes d’informations (localisation, téléphone, e-mail) et formulaire de contact en PHP
  • Pied de page : mentions légales et crédits
  • Architecture du site web

    Ce site est à la fois un portfolio artistique et une vitrine technique.
    Il s’appuie sur PHP et MySQL pour afficher dynamiquement le contenu multilingue depuis une table de traduction.
    Chaque page est chargée via une structure centrée sur index.php, avec un traitement particulier pour les nouvelles .ryu et un affichage dynamique de la poésie.
    Tout repose sur un système de clefs structuré : page.section.subsection.numero.

    Ce site a un double objectif :

    mettre en valeur à la fois mon travail artistique (musique, poésie, scénarios) et mes compétences techniques en technologies AWS.

    Voici comment le site est structuré :

  • Une page Accueil comprenant :
  • Une courte introduction
  • Une section “À propos de moi”
  • Une section “Compétences”
  • Une section “CV”
  • Une section “Contact”
  • Une page Projets — celle que vous êtes en train de lire
  • Une page Œuvres, avec des sous-sections :
  • Musique
  • Poésie
  • Scénarios
  • YouTube
  • Nouvelles
  • Livres
  • Une page Poésie — une compilation dynamique complète de tous mes poèmes
  • L’ensemble du site est multilingue (anglais/français).

    Une simple fonction PHP lit la variable <code>$_GET['l']</code> pour déterminer la langue de la page, puis récupère le contenu correspondant depuis la base MySQL.

    function t(string $key): void {

    global $pdo, $l;

    $stmt = $pdo->prepare("SELECT content FROM translations WHERE lang = :lang AND `key` = :key LIMIT 1");

    $stmt->execute([':lang' => $l, ':key' => $key]);

    $text = $stmt->fetchColumn() ?: "[$key]";

    $text = allowtags($text);

    echo $text;

    }

    Architecture PHP

    Le site repose sur un fichier central : <code>index.php</code>.

    Ce fichier charge les composants suivants :

  • <code>var.php</code>
  • <code>function.php</code>
  • <code>header.php</code>
  • <code>nav.php</code>
  • <code>footer.php</code>
  • Entre la navigation et le pied de page, l’une des pages de contenu principales est incluse, selon la route choisie :

  • <code>home.php</code>
  • <code>artwork.php</code>
  • <code>poetry.php</code>
  • <code>projects.php</code>
  • Il existe aussi 6 fichiers <code>.ryu</code> de nouvelles courtes, qui sont convertis dynamiquement en PHP et inclus dans une zone repliable déclenchée par un bouton — nous y reviendrons plus tard.

    Deux fichiers PHP spéciaux — <code>mariup.php</code> et <code>souven.php</code> — affichent respectivement une pièce de théâtre et un scénario, tout en conservant la mise en page et l’architecture générale du site.

    Détails de chaque page

    La plupart des pages sont générées en suivant la même logique :

    Une fonction PHP boucle sur une clé de traduction au format <code>page.section.soussection.numéro</code>, et continue à incrémenter le numéro tant qu’il reste du texte à afficher.

    La page Poésie utilise le même principe, mais à une échelle beaucoup plus grande — elle affiche dynamiquement l’intégralité de la table <code>poems</code>.

    La section Nouvelles est un peu plus avancée :

    Elle scanne dynamiquement le dossier <code>nouvelles</code> pour y détecter tous les fichiers <code>.ryu</code>, les convertit en HTML, et les associe à leur résumé correspondant issu de la table de traduction.

    Chaque nouvelle est ensuite intégrée dans un composant repliable, déclenché par un bouton.

    Cette méthode évite de surcharger la page en contenu, et garantit une mise en page lisible et épurée.

    Conclusion

    Ce projet avait deux objectifs : mettre en valeur ma poésie et démontrer mes compétences techniques AWS.
    J’ai tout construit moi-même en PHP, Python et MySQL, avec un langage de balisage personnalisé et une pipeline automatisée.
    L’architecture repose sur AWS (EC2, S3, Lambda, Route 53, etc.), et tout le contenu est modulaire, multilingue et à faible coût.
    J’ai atteint quasiment tous mes objectifs, tout en identifiant des axes d’amélioration : SEO, composants Vue.js, et validateur Lyra.

    Objectifs principaux

    En concevant ce site web, j’avais plusieurs objectifs en tête :

  • Créer un site élégant et responsive
  • Mettre en place une interface entièrement internationalisée (i18n), facilement extensible
  • Assurer un chargement rapide des pages
  • Développer un pipeline de déploiement en un clic
  • Publier ma poésie via mon langage de balisage Lyra, sans modification manuelle
  • Présenter mon travail artistique (musique, écrits, etc.)
  • Maintenir un code propre et minimaliste
  • Héberger l’ensemble sur AWS, avec une vraie infrastructure professionnelle
  • Utiliser ce site comme portfolio technique dans mes candidatures
  • Acquérir de nouvelles compétences via la pratique
  • Utiliser Python pour l’automatisation centrale
  • Respecter un budget réduit (objectif : moins de 5€/mois)
  • Construire un site dynamique, avec du contenu temps réel
  • Créer un système modulaire et facile à maintenir
  • Garder des URLs propres — sans ces affreux <code>$_GET[] ?var=name</code>
  • Utiliser MySQL comme moteur de base de données
  • Ne pas utiliser de CMS ou frameworks lourds — tout construire from scratch
  • Intégrer des cron jobs, du JSON structuré et des widgets JavaScript personnalisés
  • Axes d’amélioration

    J’aime travailler avec PHP, mais il est peut-être temps d’envisager une transition vers un framework Python complet comme Flask.

    Comme je préfère les sites web minimalistes et légers, adopter Tailwind CSS permettrait d’éliminer les 98 % de classes inutilisées de Bootstrap.

    À l’inverse, je pourrais aussi explorer davantage les composants intégrés de Bootstrap — comme les modales ou les carrousels.

  • Certains messages d’erreur ne sont pas encore multilingues — je devrais corriger cela.
  • Le pipeline mériterait plus de logs, de tests, et d’avertissements en cas d’échec.
  • Lyra mérite sa propre page de documentation — c’est prévu très bientôt.
  • Si je souhaite explorer les frameworks frontend, je pourrais commencer à migrer certains composants vers Vue.js ou React.
  • Une interface web pour exporter mes textes en EPUB, PDF ou LaTeX serait très utile.
  • Créer un validateur Lyra pourrait aider à détecter des fautes ou erreurs de balisage, même si le langage est simple.
  • Je pourrais aussi nettement améliorer le SEO avec des données structurées et un sitemap dynamique — ce sera sans doute la prochaine étape.
  • Outils & syntaxes utilisés

    Environnement de développement local

  • Notepad++ – Principal éditeur pour mes fichiers <code>.ryu</code>
  • Git Bash – Exécution des scripts Bash pour les opérations Git
  • Batch (.bat) – Automatisation Windows pour la gestion de fichiers
  • Visual Studio Code (VS Code) – Environnement de développement principal
  • XAMPP – Stack locale Apache + MariaDB pour le développement et les tests hors ligne
  • Microsoft Excel – Gestion du tableau multilingue de traduction
  • Microsoft Word – Outil principal d’écriture pour mes livres et scénarios
  • Git – Contrôle de version
  • GitHub – Hébergement du code et CI/CD via GitHub Actions
  • Langages de programmation

  • Python
  • Scripts personnalisés : <code>poemstohtml.py</code>, <code>screenplayconvert.py</code>, <code>translationxlsx.py</code>
  • Conversion du balisage Lyra vers HTML et LaTeX
  • Upload dans MySQL via <code>mysql-connector-python</code>
  • Utilisé pour le déploiement et l’orchestration sur EC2
  • PHP
  • Affichage dynamique du contenu
  • Fonctions multilingues
  • Logique du formulaire de contact
  • HTML / CSS
  • Structure du site
  • Design responsive et minimaliste
  • JavaScript
  • Vanilla JS pour les interactions
  • Widgets : collapsibles, compteurs, déclencheurs
  • SQL (MySQL / MariaDB)
  • Stockage des poèmes, base de données de traduction, métadonnées
  • Librairies & Frameworks

  • Bootstrap 5 (via CDN) – Système de grille responsive et composants (collapse, cartes, etc.)
  • AOS.js – Animations déclenchées au scroll
  • PureCounter.js – Compteurs animés
  • Waypoints.js – Déclencheurs selon la position dans la page
  • Google Fonts – Typographie en ligne
  • Certbot / Let’s Encrypt – Génération et renouvellement des certificats HTTPS
  • Services AWS

  • EC2 (Amazon Linux 2) – Hébergement web
  • S3 – Stockage des archives de déploiement
  • Lambda – Déclenchement du pipeline lors d’un upload
  • Systems Manager (SSM) – Exécution de commandes à distance sur EC2
  • IAM – Gestion des rôles et permissions
  • Route 53 – Gestion du nom de domaine (<code>fdelancelot.com</code>)
  • VPC – Architecture réseau personnalisée
  • Technologies serveur

  • Apache (httpd) – Serveur web
  • MariaDB – Moteur de base de données
  • PHP 8.x – Rendu dynamique des pages
  • Python 3.9 – Exécution de scripts sur le serveur EC2
  • SSM Agent – Permet l’exécution distante via SSM
  • YUM – Gestionnaire de paquets pour Amazon Linux
  • Structure & formats personnalisés

  • Lyra – Mon langage de balisage personnel pour la poésie
  • <code>.ryu</code> – Extension personnalisée pour les poèmes
  • <code>.env</code> – Fichier de configuration d’environnement
  • <code>.xlsx</code> – Base centralisée de traduction multilingue
  • Automatisation & DevOps

  • GitHub Actions – CI/CD automatisée : ZIP → S3
  • Scripts Bash – Push Git et déploiement des fichiers
  • Batch / PowerShell / Shell – Automatisation Windows et compatibilité multiplateforme
  • Scripts Python – Analyse, conversion, injection en base de données
  • Cron – Renouvellement automatique des certificats SSL (Let’s Encrypt)
  • ZIP – Archivage du site avant l’upload
  • Analyse finale

    J’ai atteint (presque) tous mes objectifs : site web responsive, multilingue et dynamique, déploiement en un clic, code propre, modulaire, à faible coût, hébergement complet sur AWS, langage de balisage maison pour la poésie, nouvelles compétences techniques acquises.
    Certains points restent à améliorer (richesse visuelle, SEO, usage avancé de Python/MySQL), mais dans l’ensemble, ce projet prouve mes compétences à la fois techniques et artistiques.

    Ai-je atteint tous mes objectifs ?

    ? Créer un site web élégant et responsive — OUI

    Ce portfolio a pour but de démontrer mes compétences AWS, donc il est probable qu’il soit consulté sur ordinateur par des recruteurs.

    Cela dit, nous vivons à l’ère du mobile, donc un design responsive était essentiel.

    Ce n’est pas une vraie approche “mobile-first”, mais le site reste parfaitement lisible sur mobile.

    Esthétiquement, je ne suis pas un designer professionnel, mais je trouve l’interface Noir & Or plutôt élégante — elle correspond bien à mon univers artistique.

    Je suis particulièrement fier de mes boutons personnalisés : transparents au repos, remplis au clic.

    ? Interface i18n (multilingue) — OUI

    L’interface multilingue est très facile à maintenir — tout est centralisé dans un seul fichier Excel.

    Ajouter une langue serait simple (si on oublie le temps de traduction en soi).

    ? Chargement rapide des pages — OUI

    AWS semble bien tenir la route, et j’ai fait de mon mieux pour garder le site léger : peu d’images, bibliothèques et polices en CDN.

    ? Pipeline de déploiement en un clic — OUI

    C’est le cœur du projet — et ça fonctionne parfaitement.

    Un simple clic sur un fichier batch déclenche toute la chaîne automatisée.

    ? Publication de poésie via mon langage de balisage, sans modification — OUI

    J’ai ajusté quelques détails pour plus de clarté, et modifié rapidement le script de conversion Python→LaTeX — moins de 30 minutes.

    Donc oui, c’est une réussite totale.

    ? Présentation de mon travail artistique (musique, écrits, etc.) — Partiellement OUI

    J’imaginais quelque chose de plus visuel : photos de groupes, lecteur audio, vidéos intégrées, etc.

    Techniquement faisable, mais cela risquait d’alourdir la navigation.

    Pour l’instant, des liens clairs vers les pages SoundCloud et YouTube suffisent.

    C’est plus sobre que prévu, mais aussi plus lisible — ce qui est une forme de réussite.

    ? Code propre et minimaliste — OUI

    Le projet contient beaucoup de fichiers et de fonctions — ce qui est normal vu sa complexité.

    J’ai fait un vrai effort pour éviter les redondances, écrire une logique claire, et commenter partout où c’était nécessaire.

    ? Hébergé sur AWS avec un vrai déploiement technique — OUI

    Le déploiement sur AWS a été bien plus complexe que prévu.

    Étudier pour la certification Cloud Practitioner est une chose — déployer concrètement en est une autre.

    De l’ouverture d’une session SSH à l’attribution des rôles Lambda, ça a été un apprentissage profond et enrichissant.

    Clairement, une certification seule ne suffit pas pour être opérationnel. Ce projet me l’a prouvé.

    ? Utiliser ce site comme portfolio en recherche d’emploi — OUI (je l’espère)

    Je dis “oui”, mais en réalité : je l’espère.

    Je crois que ce projet reflète ce que je suis capable de faire — techniquement et artistiquement.

    ? Apprendre de nouvelles compétences — OUI

    J’ai énormément appris — surtout sur AWS, mais pas uniquement :

    connexions SSH, installation LAMP, environnement Linux, configuration Apache, VPC personnalisé…

    Ma préparation à la certification CCNA m’a beaucoup aidé, surtout sur la partie réseau.

    J’ai aussi affiné mes compétences en code, et même découvert quelques astuces CSS inattendues.

    ? Utiliser Python — Partiellement OUI

    J’ai utilisé Python intensivement, mais dans une zone de confort : pas encore d’algorithmes avancés ni d’API externes.

    ? Rester sous budget (< 5€/mois) — OUI

    À part le nom de domaine, tout tourne à 0€/mois grâce au Free Tier AWS. Parfait.

    ? Site web dynamique — OUI

    Le site est entièrement dynamique.

    Presque tout repose sur PHP : les poèmes sont générés à la volée, et le contenu est chargé via des fonctions de traduction ou des requêtes SQL.

    ? Structure modulaire, facile à maintenir — OUI

    Stocker tout le texte dans un fichier Excel rend la mise à jour ultra simple :

    il suffit d’ajouter une ligne avec la bonne clé, et la fonction PHP l’affiche.

    Pour la poésie, c’est encore plus simple : ajouter ou renommer un fichier <code>.ryu</code> localement suffit — le site le reconnaît automatiquement.

    ? URLs propres (sans <code>$_GET[]</code> dégueu) — OUI

    Au départ, j’avais tout basé sur un seul <code>index.php</code> : élégant, mais catastrophique pour le SEO.

    J’ai donc retravaillé les URLs pour qu’elles soient propres et indexables — et j’en suis très satisfait.

    ? Utiliser MySQL — Partiellement OUI

    J’ai utilisé MySQL, mais de manière assez basique.

    La seule vraie nouveauté, c’était le déploiement de MariaDB sur mon serveur EC2.

    Cela reste une bonne base.

    ? Zéro framework, projet 100% maison — OUI (en grande partie)

    Je n’ai utilisé aucun CMS lourd comme WordPress — et c’était volontaire.

    J’utilise tout de même quelques bibliothèques JS (PureCounter, Waypoints, etc.), et bien sûr Bootstrap.

    Écrire mes propres widgets JS aurait été un bon exercice — je le ferai peut-être plus tard.

    Mais Bootstrap ? C’est un bon compromis.

    Assez léger, et comme ce n’est que du CSS et du JS, je garde la main sur tout le reste.

    Utiliser un framework CSS minimal m’a permis de me concentrer sur la logique — et c’était le bon choix.

    Et ce sera le mot de la fin : utiliser juste ce qu’il faut de framework pour rester efficace, sans jamais perdre le contrôle.

    Merci d’avoir lu ce très long texte.