Exécution de HTML::Mason avec nginx et FastCGI

Cet article est un guide étape par étape pour installer le module HTML::Mason à utiliser avec le serveur web ngingx et FastCGI. Il a été testé sur Debian (lenny), mais cela devrait être très similaire avec Ubuntu et d’autres distributions basées sur Debian.

Installation d’un serveur minimal

Tout d’abord, nous allons installer un serveur minimal avec nginx et FastCGI. J’ai créé des scripts de base pour le faire fonctionner. Plus tard, nous pourrons personnaliser ces scripts.

Installer nginx

Maintenant, nous installons nginx et le faisons fonctionner. On suppose qu’il n’y a pas d’autre serveur web actif sur l’hôte. Tout sera installé par défaut.

apt-get install nginx

Voyons si cela fonctionne en se connectant au port 80.

/etc/init.d/nginx start  
telnet locahost 80  
Escape character is '^]'  
GET /  
  
  
Bienvenue sur ngingx!<title>  
...</code></pre></div><h4 class="text-lg font-bold py-2">Installer FastCGI</h4><div class="code-ui group"><pre class=""><code class="">apt-get install libcgi-fast-perl libio-all-perl</code></pre></div><h4 class="text-lg font-bold py-2">Installer HTML::Mason</h4><p class="">HTML::Mason est censé avoir besoin d’apache2 pour fonctionner, donc il va le télécharger et l’installer. Nous nous en débarrasserons plus tard.</p><div class="code-ui group"><pre class=""><code class="">apt-get install libhtml-mason-perl  
apt-get --purge remove apache2-mpm-worker apache2-utils  
apt-get --purge autoremove</code></pre></div><p class="">Espérons que nous avons maintenant HTML::Mason installé et aucune trace d’apache. Assurez-vous que nginx fonctionne toujours en vérifiant qu’il répond toujours sur le port 80.</p><h4 class="text-lg font-bold py-2">Configurer FastCGI</h4><p class="">Nous avons besoin d’un serveur FastCGI en cours d’exécution pour pouvoir exécuter le code HTML::Mason. Ce script téléchargera tous les fichiers de configuration et d’initialisation. Nous devons l’exécuter en tant que root. Veuillez le consulter avant de l’exécuter. Il télécharge et copie certains fichiers depuis github. Cela pourrait être dangereux pour votre serveur.</p><div class="code-ui group"><pre class=""><code class="">wget http://github.com/frankiejol/mason-fcgi/raw/master/download.sh  
bash ./download.sh</code></pre></div><p class="">Il est très important de changer l’option server_name dans /etc/nginx/sites-available/mason par le vrai nom du serveur. Localhost ne fonctionnera pas. Ensuite, modifiez la variable %SITES dans /var/www/mason/mason_fcgi.pl.</p><h4 class="text-lg font-bold py-2">Exécuter le code Mason</h4><p class="">Enfin, créons une simple page Mason.</p><div class="code-ui group"><pre class=""><code class="">mkdir /var/www/site1  
echo '<% 2 + 2 %>' > /var/www/site1/index.html</code></pre></div><p class="">Ensuite, démarrons le service. Un 4 devrait apparaître si vous avez connecté le site avec votre navigateur.</p><div class="code-ui group"><pre class=""><code class="">/etc/init.d/nginx restart  
/etc/init.d/fcgi start</code></pre></div><h3 class="text-xl font-bold py-2" id="h2-2">Personnaliser le serveur</h3><p class="">En ce moment, nous avons un serveur Mason alimenté par nginx+FastCGI. Tous les fichiers de configuration et scripts peuvent être trouvés dans mon dépôt github.</p><h4 class="text-lg font-bold py-2">nginx</h4><p class="">La configuration de nginx se trouve dans /etc/nginx/sites-available/mason. L’emplacement peut être modifié selon vos besoins. Remarquez qu’il y a deux lignes de réécriture car Mason ne peut pas gérer correctement les répertoires. Donc, lorsque la demande ressemble à un répertoire, un suffixe index.html est ajouté.</p><h4 class="text-lg font-bold py-2">FastCGI</h4><p class="">Le script de démarrage FastCGI est /var/www/mason/mason_fcgi.pl. Un certain nombre d’arguments peuvent être fournis.</p><div class="code-ui group"><pre class=""><code class="">/var/www/mason/mason_fcgi.pl --help  
mason_fcgi.pl [--help] [--pid=/var/run/fcgi/fcgi.pid] [--log=/var/log/nginx/fcgi/fcgi.log] [--debug] [--socket=/var/run/fcgi/mason_fcgi.sock] [--basedir=/var/www] [--workspace=/var/www/mason/workspace] [--error-uri=/errors/503.html] [--listen-queue=100] [--default-host=debian.localdomain]</code></pre></div><p class="">Il y a une section pour ajouter le chargement des modules Perl et des variables globales. Voici le code par défaut :</p><div class="code-ui group"><pre class=""><code class="">{
    package HTML::Mason::Commands;
    # use My::Own::Module;
    # use Data::Dumper;
    # tout ce que vous voulez disponible pour les composants                                
    use vars(qw($DBH %stash));
}</code></pre></div><h4 class="text-lg font-bold py-2">Exécuter plusieurs sites FastCGI</h4><p class="">Le démon FastCGI est exécuté depuis /etc/init.d/fcgi. Ce script charge la configuration depuis /etc/default/fcgi. Si vous avez besoin de plusieurs serveurs FastCGI pour différents sites, il suffit de copier le script d’initialisation sous un autre nom et d’appeler le fichier de configuration de la même manière. Le script d’initialisation chargera un fichier dans /etc/default avec le même nom de base que lui-même.</p><h3 class="text-xl font-bold py-2" id="h2-3">Liens</h3><ul class="my-6 list-disc space-y-2 pl-6 md:pl-8 [&_li]:marker:text-slate-400"><li class="">nginx</li><li class="">HTML::Mason</li><li class="">fichiers mason-fcgi</li></ul>
</div>
      </div>

      <div class="mt-10">
        <div class="flex flex-wrap items-center gap-3">
  <span class="text-sm text-slate-600 dark:text-slate-300">Share:</span>
  <a href="https://twitter.com/intent/tweet?text=Ex%C3%A9cution%20de%20HTML::Mason%20avec%20nginx%20et%20FastCGI&url=https://techrealizes.com/fr/p/running-html-mason-with-nginx-and-fastcgi-93832990" target="_blank" rel="noopener" class="rounded-xl border border-slate-300 px-3 py-1.5 text-sm hover:bg-slate-50 dark:border-slate-700 dark:hover:bg-slate-800">
    X/Twitter
  </a>
  <a href="https://www.linkedin.com/sharing/share-offsite/?url=https://techrealizes.com/fr/p/running-html-mason-with-nginx-and-fastcgi-93832990" target="_blank" rel="noopener" class="rounded-xl border border-slate-300 px-3 py-1.5 text-sm hover:bg-slate-50 dark:border-slate-700 dark:hover:bg-slate-800">
    LinkedIn
  </a>
  <button type="button" onclick="navigator.clipboard.writeText('https://techrealizes.com/fr/p/running-html-mason-with-nginx-and-fastcgi-93832990')" class="rounded-xl border border-slate-300 px-3 py-1.5 text-sm hover:bg-slate-50 dark:border-slate-700 dark:hover:bg-slate-800">
Copy link
</button>
</div>
      </div>

      <div class="mt-6">
        <div class="flex flex-wrap gap-2">
          <a href="/fr/tag/serveur-web" class="rounded-full bg-slate-100 px-3 py-1 text-xs font-medium text-slate-700 ring-1 ring-inset ring-slate-200 dark:bg-slate-800 dark:text-slate-300 dark:ring-slate-700">
            #Serveur Web
          </a>
        </div>
      </div>

      <div class="mt-12">
        <section class="rounded-2xl border border-slate-200 bg-gradient-to-br from-slate-50 to-white p-6 dark:border-slate-800 dark:from-slate-900 dark:to-slate-950">
  <div class="flex flex-col items-start justify-between gap-4 sm:flex-row sm:items-center">
    <div>
      <h3 class="text-lg font-semibold">Recevez de nouveaux articles dans votre boîte de réception.</h3>
      <p class="text-sm text-slate-600 dark:text-slate-300">
        Aucun spam. Désabonnez-vous à tout moment.
      </p>
    </div>
    <form class="flex w-full max-w-md items-center gap-2">
      <input type="email" required placeholder="you@example.com" class="w-full flex-1 rounded-xl border border-slate-300 bg-white px-3 py-2 outline-none dark:border-slate-700 dark:bg-slate-900">
      <button class="rounded-xl bg-slate-900 px-4 py-2 text-sm font-medium text-white hover:bg-slate-800 dark:bg-white dark:text-slate-900">
        S'abonner
      </button>
    </form>
  </div>
</section>
      </div>
    </div>

    <aside class="lg:col-span-4">
      <div class="lg:sticky lg:top-20">
        <div class="mb-6 rounded-2xl border border-slate-200 bg-white p-4 dark:border-slate-800 dark:bg-slate-900">
          <div class="mb-2 text-sm font-semibold">Sur cette page</div>
          <ul class="space-y-2 text-sm">

              <li>
                <a href="#h2-0" class="text-slate-600 hover:text-slate-900 dark:text-slate-300 dark:hover:text-white">
                   Exécution de HTML::Mason avec nginx et FastCGI
                </a>
              </li>

              <li>
                <a href="#h2-1" class="text-slate-600 hover:text-slate-900 dark:text-slate-300 dark:hover:text-white">
                   Installation d'un serveur minimal
                </a>
              </li>

              <li>
                <a href="#h2-2" class="text-slate-600 hover:text-slate-900 dark:text-slate-300 dark:hover:text-white">
                   Personnaliser le serveur
                </a>
              </li>

              <li>
                <a href="#h2-3" class="text-slate-600 hover:text-slate-900 dark:text-slate-300 dark:hover:text-white">
                   Liens
                </a>
              </li>

          </ul>
        </div>
        <div>
          <h3 class="mb-3 text-sm font-semibold">Lié</h3>
          <div class="grid grid-cols-1 gap-4">

              <a href="/fr/p/linux-c-programming-tutorial-part-7-arrays-94220576" class="group overflow-hidden rounded-2xl border border-slate-200 bg-white hover:bg-slate-50 dark:border-slate-800 dark:bg-slate-900 dark:hover:bg-slate-800/40">

                <img src="/files/8756669e-5f11-4dbd-9c13-47ec7432dae3.jpg" alt="" class="h-32 w-full object-cover" loading="lazy">
                <div class="p-3">
                  <div class="mb-1 text-xs text-slate-500">
                    Programmation C · Feb 14, 2026
                  </div>
                  <div class="line-clamp-2 text-sm font-medium group-hover:underline">
                    Tutoriel de programmation C sous Linux Partie 7 : Tableaux
                  </div>
                </div>
              </a>

              <a href="/fr/p/logitech-mx-mechanical-mini-review-the-type-for-writers-93237314" class="group overflow-hidden rounded-2xl border border-slate-200 bg-white hover:bg-slate-50 dark:border-slate-800 dark:bg-slate-900 dark:hover:bg-slate-800/40">

                <img src="/files/9ca1697f-cadf-4e4c-9cb7-c4e153445240.jpg" alt="logitech mx mechanical mini review" class="h-32 w-full object-cover" loading="lazy">
                <div class="p-3">
                  <div class="mb-1 text-xs text-slate-500">
                    Clavier Mécanique · Feb 14, 2026
                  </div>
                  <div class="line-clamp-2 text-sm font-medium group-hover:underline">
                    Logitech MX Mechanical Mini Review : Le type pour les écrivains
                  </div>
                </div>
              </a>

              <a href="/fr/p/microsoft-security-essentials-gives-false-positives-that-bitcoin-blockchain-infected-by-stoned-virus-94222075" class="group overflow-hidden rounded-2xl border border-slate-200 bg-white hover:bg-slate-50 dark:border-slate-800 dark:bg-slate-900 dark:hover:bg-slate-800/40">

                <img src="/files/0bdcdeb0-9887-4110-af71-2d1e425c5d0a.jpg" alt="" class="h-32 w-full object-cover" loading="lazy">
                <div class="p-3">
                  <div class="mb-1 text-xs text-slate-500">
                    Sécurité informatique · Feb 14, 2026
                  </div>
                  <div class="line-clamp-2 text-sm font-medium group-hover:underline">
                    Microsoft Security Essentials signale des faux positifs indiquant que la blockchain Bitcoin est infectée par le virus ‘Stoned’
                  </div>
                </div>
              </a>

              <a href="/fr/p/google-unveils-slurry-of-new-security-features-in-android-5-0-lollipop-94325355" class="group overflow-hidden rounded-2xl border border-slate-200 bg-white hover:bg-slate-50 dark:border-slate-800 dark:bg-slate-900 dark:hover:bg-slate-800/40">

                <img src="/files/ab534329-e080-4d33-ade7-8dd2490beefb.jpg" alt="" class="h-32 w-full object-cover" loading="lazy">
                <div class="p-3">
                  <div class="mb-1 text-xs text-slate-500">
                    Sécurité Android · Feb 14, 2026
                  </div>
                  <div class="line-clamp-2 text-sm font-medium group-hover:underline">
                    Google dévoile une série de nouvelles fonctionnalités de sécurité dans Android 5.0 Lollipop
                  </div>
                </div>
              </a>

              <a href="/fr/p/setting-up-an-android-app-build-environment-with-eclipse-android-sdk-phonegap-debian-squeeze-94271797" class="group overflow-hidden rounded-2xl border border-slate-200 bg-white hover:bg-slate-50 dark:border-slate-800 dark:bg-slate-900 dark:hover:bg-slate-800/40">

                <img src="/files/ae3d5143-2876-4cc3-b5aa-19e15ea52407.jpg" alt="" class="h-32 w-full object-cover" loading="lazy">
                <div class="p-3">
                  <div class="mb-1 text-xs text-slate-500">
                    Développement Android · Feb 14, 2026
                  </div>
                  <div class="line-clamp-2 text-sm font-medium group-hover:underline">
                    Configuration d'un environnement de construction d'applications Android avec Eclipse, Android SDK, PhoneGap (Debian Squeeze)
                  </div>
                </div>
              </a>

              <a href="/fr/p/sony-announces-xperia-10-ii-xperia-l4-and-xperia-pro-smartphones-93418471" class="group overflow-hidden rounded-2xl border border-slate-200 bg-white hover:bg-slate-50 dark:border-slate-800 dark:bg-slate-900 dark:hover:bg-slate-800/40">

                <img src="/files/66b03667-d75e-441e-bce0-86b391409a27.jpg" alt="sony annonce les smartphones xperia 10 ii, xperia l4 et xperia pro - sony xperia pro" class="h-32 w-full object-cover" loading="lazy">
                <div class="p-3">
                  <div class="mb-1 text-xs text-slate-500">
                    Smartphones · Feb 14, 2026
                  </div>
                  <div class="line-clamp-2 text-sm font-medium group-hover:underline">
                    Sony annonce les smartphones Xperia 10 II, Xperia L4 et Xperia Pro
                  </div>
                </div>
              </a>

              <a href="/fr/p/face-off-nokia-7-plus-vs-xiaomi-redmi-note-5-pro-comeback-kid-meets-the-new-king-93328755" class="group overflow-hidden rounded-2xl border border-slate-200 bg-white hover:bg-slate-50 dark:border-slate-800 dark:bg-slate-900 dark:hover:bg-slate-800/40">

                <img class="h-32 w-full object-cover" loading="lazy">
                <div class="p-3">
                  <div class="mb-1 text-xs text-slate-500">
                    Comparaison smartphones · Feb 14, 2026
                  </div>
                  <div class="line-clamp-2 text-sm font-medium group-hover:underline">
                    [Face Off] Nokia 7 Plus vs Xiaomi Redmi Note 5 Pro : Le retour du gamin rencontre le nouveau roi
                  </div>
                </div>
              </a>

              <a href="/fr/p/the-perfect-setup-debian-woody-3-0-94643535" class="group overflow-hidden rounded-2xl border border-slate-200 bg-white hover:bg-slate-50 dark:border-slate-800 dark:bg-slate-900 dark:hover:bg-slate-800/40">

                <img src="/files/8a3fe69a-7ca2-4536-a19c-7bb5df2a4246.jpg" alt="" class="h-32 w-full object-cover" loading="lazy">
                <div class="p-3">
                  <div class="mb-1 text-xs text-slate-500">
                    Configuration Debian · Feb 14, 2026
                  </div>
                  <div class="line-clamp-2 text-sm font-medium group-hover:underline">
                    La configuration parfaite - Debian Woody (3.0)
                  </div>
                </div>
              </a>

              <a href="/fr/p/phoenix-browser-for-pc-download-windows-11-10-7-94170189" class="group overflow-hidden rounded-2xl border border-slate-200 bg-white hover:bg-slate-50 dark:border-slate-800 dark:bg-slate-900 dark:hover:bg-slate-800/40">

                <img src="/files/5d2162fe-a352-4ec0-a017-2ef3c3ff0aed.jpg" alt="" class="h-32 w-full object-cover" loading="lazy">
                <div class="p-3">
                  <div class="mb-1 text-xs text-slate-500">
                    Téléchargement navigateur · Feb 14, 2026
                  </div>
                  <div class="line-clamp-2 text-sm font-medium group-hover:underline">
                    Télécharger Phoenix Browser Pour PC (Windows 11/10/7)
                  </div>
                </div>
              </a>

              <a href="/fr/p/the-perfect-setup-ubuntu-feisty-fawn-ubuntu-7-04-page-4-94643734" class="group overflow-hidden rounded-2xl border border-slate-200 bg-white hover:bg-slate-50 dark:border-slate-800 dark:bg-slate-900 dark:hover:bg-slate-800/40">

                <img class="h-32 w-full object-cover" loading="lazy">
                <div class="p-3">
                  <div class="mb-1 text-xs text-slate-500">
                    Installation · Feb 14, 2026
                  </div>
                  <div class="line-clamp-2 text-sm font-medium group-hover:underline">
                    La configuration parfaite - Ubuntu Feisty Fawn (Ubuntu 7.04) - Page 4
                  </div>
                </div>
              </a>

              <a href="/fr/p/asus-marshmallow-keyboard-kw100-and-mouse-md100-review-great-tab-pals-to-point-click-and-type-93237311" class="group overflow-hidden rounded-2xl border border-slate-200 bg-white hover:bg-slate-50 dark:border-slate-800 dark:bg-slate-900 dark:hover:bg-slate-800/40">

                <img src="/files/932e911a-8d8d-4ca0-8b5d-1821d416313e.jpg" alt="critique du clavier et de la souris asus marshmallow" class="h-32 w-full object-cover" loading="lazy">
                <div class="p-3">
                  <div class="mb-1 text-xs text-slate-500">
                    Critique produit · Feb 14, 2026
                  </div>
                  <div class="line-clamp-2 text-sm font-medium group-hover:underline">
                    Critique du clavier Asus Marshmallow KW100 et de la souris MD100 : De grands compagnons de tablette pour pointer, cliquer et taper
                  </div>
                </div>
              </a>

              <a href="/fr/p/switch-emulator-skyline-shuts-down-over-nintendos-latest-dmca-order-94427592" class="group overflow-hidden rounded-2xl border border-slate-200 bg-white hover:bg-slate-50 dark:border-slate-800 dark:bg-slate-900 dark:hover:bg-slate-800/40">

                <img src="/files/50e5eaa3-f5d2-40b6-98b8-e30b3d560df2.jpeg" alt="" class="h-32 w-full object-cover" loading="lazy">
                <div class="p-3">
                  <div class="mb-1 text-xs text-slate-500">
                    Émulateurs · Feb 14, 2026
                  </div>
                  <div class="line-clamp-2 text-sm font-medium group-hover:underline">
                    L'émulateur Skyline de Switch ferme en raison de la dernière ordonnance DMCA de Nintendo
                  </div>
                </div>
              </a>

              <a href="/fr/p/assp-with-embedded-clamav-integrated-into-postfix-with-virtual-users-and-domains-94168386" class="group overflow-hidden rounded-2xl border border-slate-200 bg-white hover:bg-slate-50 dark:border-slate-800 dark:bg-slate-900 dark:hover:bg-slate-800/40">

                <img class="h-32 w-full object-cover" loading="lazy">
                <div class="p-3">
                  <div class="mb-1 text-xs text-slate-500">
                    Serveur de messagerie · Feb 14, 2026
                  </div>
                  <div class="line-clamp-2 text-sm font-medium group-hover:underline">
                    ASSP Avec ClamAV Intégré Dans Postfix Avec Utilisateurs Et Domaines Virtuels
                  </div>
                </div>
              </a>

              <a href="/fr/p/hits-and-misses-at-mwc-2017-what-rocked-what-sank-93327858" class="group overflow-hidden rounded-2xl border border-slate-200 bg-white hover:bg-slate-50 dark:border-slate-800 dark:bg-slate-900 dark:hover:bg-slate-800/40">

                <img src="/files/878d8198-363c-4daf-a9f8-f2403469dd25.jpg" alt="succès et échecs au mwc 2017 : ce qui a fonctionné, ce qui a échoué ! - mwc barcelone" class="h-32 w-full object-cover" loading="lazy">
                <div class="p-3">
                  <div class="mb-1 text-xs text-slate-500">
                    Technologie · Feb 14, 2026
                  </div>
                  <div class="line-clamp-2 text-sm font-medium group-hover:underline">
                    Succès et Échecs au MWC 2017 : Ce qui a Fonctionné, Ce qui a Échoué !
                  </div>
                </div>
              </a>

              <a href="/fr/p/virtualization-with-xenserver-5-5-0-94323139" class="group overflow-hidden rounded-2xl border border-slate-200 bg-white hover:bg-slate-50 dark:border-slate-800 dark:bg-slate-900 dark:hover:bg-slate-800/40">

                <img src="/files/81326419-3e3c-46e7-8904-666592b05bdd.png" alt="" class="h-32 w-full object-cover" loading="lazy">
                <div class="p-3">
                  <div class="mb-1 text-xs text-slate-500">
                    Virtualisation · Feb 14, 2026
                  </div>
                  <div class="line-clamp-2 text-sm font-medium group-hover:underline">
                    Virtualisation Avec XenServer 5.5.0
                  </div>
                </div>
              </a>

              <a href="/fr/p/russian-hackers-are-trying-to-steal-covid-19-vaccine-research-us-uk-canada-officials-94020201" class="group overflow-hidden rounded-2xl border border-slate-200 bg-white hover:bg-slate-50 dark:border-slate-800 dark:bg-slate-900 dark:hover:bg-slate-800/40">

                <img src="/files/d358fd41-8b0c-46ac-abaa-c3564f5f4372.jpg" alt="" class="h-32 w-full object-cover" loading="lazy">
                <div class="p-3">
                  <div class="mb-1 text-xs text-slate-500">
                    Cyber Sécurité · Feb 14, 2026
                  </div>
                  <div class="line-clamp-2 text-sm font-medium group-hover:underline">
                    Des hackers russes tentent de voler des recherches sur le vaccin COVID-19 : responsables des États-Unis, du Royaume-Uni et du Canada
                  </div>
                </div>
              </a>

              <a href="/fr/p/the-perfect-server-debian-lenny-debian-5-0-with-bind-dovecot-ispconfig-3-94533937" class="group overflow-hidden rounded-2xl border border-slate-200 bg-white hover:bg-slate-50 dark:border-slate-800 dark:bg-slate-900 dark:hover:bg-slate-800/40">

                <img src="/files/bdbc7eec-2d79-45c8-af52-81fe7fd35cc9.png" alt="" class="h-32 w-full object-cover" loading="lazy">
                <div class="p-3">
                  <div class="mb-1 text-xs text-slate-500">
                    Serveur Debian · Feb 14, 2026
                  </div>
                  <div class="line-clamp-2 text-sm font-medium group-hover:underline">
                    Le Serveur Parfait - Debian Lenny (Debian 5.0) Avec BIND & Dovecot [ISPConfig 3]
                  </div>
                </div>
              </a>

              <a href="/fr/p/maintaining-remote-web-sites-with-sitecopy-on-ubuntu-16-04-94534889" class="group overflow-hidden rounded-2xl border border-slate-200 bg-white hover:bg-slate-50 dark:border-slate-800 dark:bg-slate-900 dark:hover:bg-slate-800/40">

                <img class="h-32 w-full object-cover" loading="lazy">
                <div class="p-3">
                  <div class="mb-1 text-xs text-slate-500">
                    Site Management · Feb 14, 2026
                  </div>
                  <div class="line-clamp-2 text-sm font-medium group-hover:underline">
                    Maintenir des sites web distants avec sitecopy sur Ubuntu 16.04
                  </div>
                </div>
              </a>

              <a href="/fr/p/random-bluetooth-disconnection-in-windows-10-11-fixed-93236764" class="group overflow-hidden rounded-2xl border border-slate-200 bg-white hover:bg-slate-50 dark:border-slate-800 dark:bg-slate-900 dark:hover:bg-slate-800/40">

                <img src="/files/96d46d9d-51eb-4aa5-a170-b9926f8bcbd3.jpg" alt="déconnexion bluetooth aléatoire dans windows 10 11" class="h-32 w-full object-cover" loading="lazy">
                <div class="p-3">
                  <div class="mb-1 text-xs text-slate-500">
                    Dépannage Bluetooth · Feb 14, 2026
                  </div>
                  <div class="line-clamp-2 text-sm font-medium group-hover:underline">
                    Déconnexion Bluetooth aléatoire dans Windows 10/11 [RÉSOLU]
                  </div>
                </div>
              </a>

              <a href="/fr/p/installing-apache2-with-php5-and-mysql-support-on-ubuntu-11-10-lamp-94068951" class="group overflow-hidden rounded-2xl border border-slate-200 bg-white hover:bg-slate-50 dark:border-slate-800 dark:bg-slate-900 dark:hover:bg-slate-800/40">

                <img src="/files/27e20a4f-88d6-4c41-a204-42a016efee9a.jpg" alt="" class="h-32 w-full object-cover" loading="lazy">
                <div class="p-3">
                  <div class="mb-1 text-xs text-slate-500">
                    Installation LAMP · Feb 14, 2026
                  </div>
                  <div class="line-clamp-2 text-sm font-medium group-hover:underline">
                    Installation d'Apache2 avec PHP5 et support MySQL sur Ubuntu 11.10 (LAMP)
                  </div>
                </div>
              </a>

          </div>
        </div>
      </div>
    </aside>
  </article>
</section>
    </main>

    <footer class="border-t border-slate-200 bg-slate-50 py-10 text-sm dark:border-slate-800 dark:bg-slate-900">
      <div class="mx-auto grid max-w-7xl grid-cols-1 gap-6 px-4 sm:px-6 md:grid-cols-3 lg:px-8">
        <div>
          <img src="/logo.svg" alt="Technologies en quelques mots" width="280" height="40">
          <p class="my-2 text-slate-600 dark:text-slate-400">
            Exécution de HTML::Mason avec nginx et FastCGI
          </p>
        </div>
        <div class="grid grid-cols-1 gap-6">
          <div>
            <div class="mb-2 font-semibold">Société</div>
            <ul class="space-y-2 text-slate-600 dark:text-slate-400">
              <li>
                <a href="#" class="hover:text-slate-900 dark:hover:text-white">
                  À propos
                </a>
              </li>
              <li>
                <a href="#" class="hover:text-slate-900 dark:hover:text-white">
                  Contactez-nous
                </a>
              </li>
              <li>
                <a href="#" class="hover:text-slate-900 dark:hover:text-white">
                  Confidentialité
                </a>
              </li>
            </ul>
          </div>
        </div>
        <div class="md:text-right">
          <div class="font-semibold">Recevoir des mises à jour</div>
          <form class="mt-2 flex w-full items-center gap-2 md:justify-end">
            <input type="email" placeholder="you@example.com" class="w-full max-w-xs rounded-xl border border-slate-300 bg-white px-3 py-2 outline-none dark:border-slate-700 dark:bg-slate-900">
            <button class="rounded-xl bg-slate-900 px-3 py-2 text-white shadow-sm hover:bg-slate-800 dark:bg-white dark:text-slate-900">
              S'abonner
            </button>
          </form>
          <p class="mt-3 text-slate-500">© 2026. All rights reserved.</p>
        </div>
      </div>
    </footer>
  </body>
</html>