diff --git a/components/TheFooter.vue b/components/TheFooter.vue
index 296f5c56c..e5b7d0087 100644
--- a/components/TheFooter.vue
+++ b/components/TheFooter.vue
@@ -1,111 +1,106 @@
 <template>
     <footer class="lg:mt-40 border-t border-t-2">
-        <div class="flex flex-col items-center mt-16">
-            <div class="flex mb-3 space-x-4">
-                <a
-                    aria-label="Open RSS feed"
-                    target="_self"
-                    :href="siteMetadata.rss"
-                    class="text-sm text-gray-500 transition hover:text-gray-600"
-                >
-                    <img
-                        alt="Icon for RSS feed"
-                        class="transition-transform hover:scale-110 w-8 h-8"
-                        src="~assets/icon/rss.svg"
-                    />
-                </a>
-                <a
-                    aria-label="Open Youtube profile"
-                    class="text-sm text-gray-500 transition hover:text-gray-600"
-                    target="_blank"
-                    rel="me"
-                    :href="siteMetadata.youtube"
-                    ><span class="sr-only">Youtube</span>
-                    <img
-                        alt="Icon for Youtube"
-                        class="transition-transform hover:scale-110 w-8 h-8"
-                        src="~assets/icon/youtube.svg"
-                    />
-                </a>
-                <a
-                    aria-label="Open Mastodon profile"
-                    class="text-sm text-gray-500 transition hover:text-gray-600"
-                    target="_blank"
-                    rel="me"
-                    :href="siteMetadata.mastodon"
-                    ><span class="sr-only">Mastodon</span>
-                    <img
-                        alt="Icon for Mastodon"
-                        class="transition-transform hover:scale-110 w-8 h-8"
-                        src="~assets/icon/mastodon.svg"
-                    />
-                </a>
-                <a
-                    aria-label="Open github profile"
-                    class="text-sm text-gray-500 transition hover:text-gray-600"
-                    target="_blank"
-                    rel="nofollow noopener noreferrer"
-                    :href="siteMetadata.github"
-                    ><span class="sr-only">github</span>
-                    <img
-                        alt="Icon for Github"
-                        class="transition-transform hover:scale-110 w-8 h-8"
-                        src="~assets/icon/github_new.svg"
-                    /> </a
-                ><a
-                    aria-label="Open linkedin profile"
-                    class="text-sm text-gray-500 transition hover:text-gray-600"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    :href="siteMetadata.linkedin"
-                    ><span class="sr-only">Linkedin</span>
-                    <img
-                        alt="Icon for Linkedin"
-                        class="transition-transform hover:scale-110 w-8 h-8"
-                        src="~assets/icon/linkeding.svg"
-                    />
-                </a>
-                <a
-                    aria-label="Open twitter profile"
-                    target="_blank"
-                    rel="nofollow noopener noreferrer"
-                    :href="siteMetadata.twitter + siteMetadata.twitter_user"
-                    class="text-sm text-gray-500 transition hover:text-gray-600"
-                >
-                    <img
-                        alt="Icon for Twitter"
-                        class="transition-transform hover:scale-110 w-8 h-8"
-                        src="~assets/icon/twitter.svg"
-                    />
-                </a>
-            </div>
-            <div
-                class="flex mb-2 space-x-2 text-sm text-gray-500 dark:text-gray-400"
-            >
-                <div>Copyright © {{ new Date().getFullYear() }}</div>
-                <div>•</div>
-                {{ siteMetadata.title }} - {{ siteMetadata.slogan }}
-            </div>
-            <div class="text-sm text-gray-500">
-                Credits to www.freepik.com -
-                <a href="https://www.freepik.com/vectors/citizen"
-                    >Citizen vector created by freepik -
-                </a>
-                <a href="https://www.freepik.com/vectors/css"
-                    >Css vector created by vectorjuice</a
+        <div
+            class="max-w-6xl mx-auto grid grid-cols-1 gap-4"
+            :class="newsletterEnabled ? 'md:grid-cols-2' : 'md:grid-cols-1'"
+        >
+            <div class="flex flex-col items-center mt-16">
+                <div class="flex mb-3 space-x-4">
+                    <a
+                        aria-label="Open RSS feed"
+                        target="_self"
+                        :href="siteMetadata.rss"
+                        class="text-sm text-gray-500 transition hover:text-gray-600"
+                    >
+                        <img
+                            alt="Icon for RSS feed"
+                            class="transition-transform hover:scale-110 w-8 h-8"
+                            src="~assets/icon/rss.svg"
+                        />
+                    </a>
+                    <a
+                        aria-label="Open Youtube profile"
+                        class="text-sm text-gray-500 transition hover:text-gray-600"
+                        target="_blank"
+                        rel="me"
+                        :href="siteMetadata.youtube"
+                        ><span class="sr-only">Youtube</span>
+                        <img
+                            alt="Icon for Youtube"
+                            class="transition-transform hover:scale-110 w-8 h-8"
+                            src="~assets/icon/youtube.svg"
+                        />
+                    </a>
+                    <a
+                        aria-label="Open Mastodon profile"
+                        class="text-sm text-gray-500 transition hover:text-gray-600"
+                        target="_blank"
+                        rel="me"
+                        :href="siteMetadata.mastodon"
+                        ><span class="sr-only">Mastodon</span>
+                        <img
+                            alt="Icon for Mastodon"
+                            class="transition-transform hover:scale-110 w-8 h-8"
+                            src="~assets/icon/mastodon.svg"
+                        />
+                    </a>
+                    <a
+                        aria-label="Open github profile"
+                        class="text-sm text-gray-500 transition hover:text-gray-600"
+                        target="_blank"
+                        rel="nofollow noopener noreferrer"
+                        :href="siteMetadata.github"
+                        ><span class="sr-only">github</span>
+                        <img
+                            alt="Icon for Github"
+                            class="transition-transform hover:scale-110 w-8 h-8"
+                            src="~assets/icon/github_new.svg"
+                        /> </a
+                    ><a
+                        aria-label="Open linkedin profile"
+                        class="text-sm text-gray-500 transition hover:text-gray-600"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        :href="siteMetadata.linkedin"
+                        ><span class="sr-only">Linkedin</span>
+                        <img
+                            alt="Icon for Linkedin"
+                            class="transition-transform hover:scale-110 w-8 h-8"
+                            src="~assets/icon/linkeding.svg"
+                        />
+                    </a>
+                    <a
+                        aria-label="Open twitter profile"
+                        target="_blank"
+                        rel="nofollow noopener noreferrer"
+                        :href="siteMetadata.twitter + siteMetadata.twitter_user"
+                        class="text-sm text-gray-500 transition hover:text-gray-600"
+                    >
+                        <img
+                            alt="Icon for Twitter"
+                            class="transition-transform hover:scale-110 w-8 h-8"
+                            src="~assets/icon/twitter.svg"
+                        />
+                    </a>
+                </div>
+                <div
+                    class="flex mb-2 space-x-2 text-sm text-gray-500 dark:text-gray-400"
                 >
+                    <div>Copyright © {{ new Date().getFullYear() }}</div>
+                    <div>•</div>
+                    {{ siteMetadata.title }} - {{ siteMetadata.slogan }}
+                </div>
             </div>
+            <Newsletter />
         </div>
     </footer>
 </template>
 
-<script>
+<script setup lang="ts">
+import { ref } from "vue";
 import siteMetaInfo from "@/data/siteMetaData";
-export default {
-    data() {
-        return {
-            siteMetadata: siteMetaInfo,
-        };
-    },
-};
+
+const siteMetadata = ref(siteMetaInfo);
+const config = useRuntimeConfig();
+const newsletterEnabled = config.public.newsletter.enabled;
 </script>
diff --git a/components/content/Newsletter.vue b/components/content/Newsletter.vue
new file mode 100644
index 000000000..3d42f2158
--- /dev/null
+++ b/components/content/Newsletter.vue
@@ -0,0 +1,64 @@
+<template>
+    <div v-if="newsletterEnabled" class="justify-center items-center flex mt-6">
+        <div class="border-2 border-gray-200 bg-amber-100 rounded-lg p-8">
+            <span class="font-bold text-xl mb-8 mt-6">
+                Subscribe to get the latest posts by email.
+            </span>
+            <p v-if="error" class="text-red-500 text-xs italic mb-2">
+                Subscription failed. Please retry later
+            </p>
+            <p v-if="success" class="text-green-500 text-xs italic mb-2">
+                You have successfully subscribed
+            </p>
+
+            <form :action="formAction" method="post" target="_blank">
+                <input
+                    v-model="email"
+                    name="fields[email]"
+                    autocomplete="email"
+                    type="email"
+                    placeholder="Your email"
+                    class="mt-6 p-2 text-gray-700 w-full"
+                    required
+                />
+                <input type="hidden" name="ml-submit" value="1" />
+                <input type="hidden" name="anticsrf" value="true" />
+
+                <button
+                    class="mt-4 mb-2 w-full bg-blue-500 hover:bg-blue-700 text-white font-bold py-3 px-4 rounded"
+                    @click.prevent="subscribe"
+                >
+                    Subscribe
+                </button>
+            </form>
+        </div>
+    </div>
+</template>
+<script setup lang="ts">
+import { ref } from "vue";
+
+const config = useRuntimeConfig();
+const newsletterEnabled = config.public.newsletter.enabled;
+const formAction = config.public.newsletter.form_action;
+const email = ref("");
+const success = ref(false);
+const error = ref(false);
+
+async function subscribe() {
+    const formData = new FormData();
+    formData.append("fields[email]", email.value);
+    formData.append("ml-submit", "1");
+    formData.append("anticsrf", "true");
+    const response = await fetch(formAction, {
+        method: "POST",
+        body: formData,
+    });
+    email.value = "";
+
+    if (response.ok) {
+        success.value = true;
+    } else {
+        error.value = true;
+    }
+}
+</script>
diff --git a/content/articles/2024/02/add-newsletter-static-website.md b/content/articles/2024/02/add-newsletter-static-website.md
new file mode 100644
index 000000000..83f6182f9
--- /dev/null
+++ b/content/articles/2024/02/add-newsletter-static-website.md
@@ -0,0 +1,80 @@
+---
+id: "35"
+title: "Profiter de son flux RSS pour créer une newsletter"
+description: "Comment utiliser son flux RSS pour créer une newsletter sur un site statique."
+tags: []
+date: "2024-02-16"
+cover: "/add-newsletter-static-website/postier.jpg"
+
+language: "fr"
+---
+
+
+Vous vous doutez bien si vous lisez ce blog, j'aime ce format.
+L'écrit a pour moi toujours sa place et je lis personnellement des tonnes de billets de blog.
+
+Cependant, je rate également beaucoup d'articles de qualité. Il y a très longtemps j'utilisais [Google Reader](https://en.wikipedia.org/wiki/Google_Reader) qui me permettait de ne rien louper de mes blogs préférés.
+
+Et puis Google Reader a rejoint le [cimetière des applications tuées par Google](https://killedbygoogle.com/) en 2013. Snif.
+
+Je n'ai pas vraiment remplacé cette application en tant que tel. J'aurais pu, il y a désormais feedbly, flipboard et plein d'autres apps équivalentes.
+
+Mais mes habitudes ont changé.
+
+J'aime qu'on me recommande du contenu :
+
+- je regarde plus de vidéos youtube qu'avant, que je découvre directement sur la page d'acceuil (je vous invite d'ailleurs à découvrir [la chaine eventuallycoding](https://youtube.com/@eventuallycoding))
+- je suis les recommandations qui me sont faites sur Medium
+
+Mais surtout, je me suis inscrit sur de nombreuses newsletters (codrops, pragmatic engineer, leaddev, SWLW etc...).
+
+Par contre jusqu'ici, pour les petits blogs, qui, comme le mien, ont décidé de ne pas donner leur contenu à Medium ou Substack, je comptais un peu sur la chance pour les découvrir via un Tweet ou un Toot.
+
+Parce que, très souvent, ces petits blogs ont deux défauts :
+1. ils n'ont pas mis en place de flux RSS
+2. ce sont des sites statiques qui ne proposent pas d'inscription à une newsletter
+
+Eh bien je vous propose de découvrir comment remédier à ces deux points. Et n'hésitez pas à renvoyer les auteurs de vos blogs favoris vers ce billet s'ils n'ont toujours pas de flux RSS :)
+
+## Un flux RSS ?
+
+Un flux RSS reprend l'historique des publications d'un blog dans un fichier xml. Sur ce blog par exemple, il est disponible sur /rss.xml.
+
+Ce flux peut être facilement exploité par une application comme feedly ou mailbrew par exemple.
+
+Vous avez un blog, mais pas de flux RSS ?
+
+Aahhh ! S'il vous plait, rajoutez en un. Ca vous coute rien. 
+
+Si vous utilisez wordpress, le flux RSS est en principe sur https://monsitewordpress.com/feed.
+
+Si vous utilisez un générateur de site statique, il faut l'activer via des plugins, des modules ou un peu de dev supplémentaire :
+
+- [hugo](https://gohugo.io/templates/rss/)
+- [Gatsby](https://www.gatsbyjs.com/docs/how-to/adding-common-features/adding-an-rss-feed/)
+- [Jekyll](https://github.com/jekyll/jekyll-feed)
+
+Pour Nuxt-content, [vous pouvez regarder ce que j'ai fait sur github](https://github.com/hlassiege/bloggr/blob/main/server/routes/rss.xml.ts).
+
+## RSS vers email
+
+Vous allez me dire, "oui, mais le reflexe des lecteurs de blogs aujourd'hui n'est plus d'utiliser un flux RSS"
+
+Certes, c'est un peu vrai. Mais, vous pouvez vous en servir pour proposer une newsletter ! Le fameux "Si tu ne viens pas à Lagardère, Lagardère ira à toi !"
+
+Parce que si vos lecteurs n'utilisent pas d'outils de suivi RSS, vous pouvez leur proposer l'inscription à une newsletter.
+
+Bien sûr, je sais que si vous avez choisi d'utiliser un générateur de site statique, vous ne pouvez pas déclencher des envois d'emails à vos utilisateurs. Mais vous pouvez utiliser une application de RSS to email qui va parcourir à intervalles réguliers votre flux RSS pour envoyer les nouvelles entrées du flux aux personnes qui le souhaitent.
+
+C'est l'approche que j'utilise désormais pour ce blog via [Mailerlite](https://www.mailerlite.com/), dont l'usage s'est avéré peu complexe. Le plus complexe a été le fait d'avoir une adresse email d'envoi pro. C'est-à-dire que désormais la plupart des outils permettant l'envoi d'email vous demanderont une adresse associée à un domaine que vous possédez, sinon vos emails vont très probablement finir en spam.
+
+Je vous passe la procédure d'inscription de Mailerlite, l'idée, c'est de comprendre le fonctionnement, mais après, vous pouvez en essayer d'autres qui proposent la même fonctionnalité.
+
+Une fois inscrit, il faudra créer un formulaire d'abonnement à la newsletter. Ce formulaire sera directement intégré ensuite sur votre site.
+Enfin, la dernière étape consiste à créer une campagne "RSS to email". Vous allez devoir indiquer l'adresse de votre flux RSS, et le tour est joué.
+
+Et voilà, vous avez maintenant une newsletter pour votre blog statique, qui utilise votre flux RSS et qui va donc permettre d'envoyer un email à chaque nouvelle publication à ceux qui le souhaitent. 
+
+Et si vous souhaitez vous inscrire à la newsletter de ce blog, c'est juste ici : 
+
+:newsletter
diff --git a/nuxt.config.ts b/nuxt.config.ts
index ce6e73b2f..18c2235ad 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -19,6 +19,16 @@ export default defineNuxtConfig({
         },
     },
 
+    runtimeConfig: {
+        public: {
+            newsletter: {
+                enabled: true,
+                form_action:
+                    "https://assets.mailerlite.com/jsonp/824357/forms/113155364217685975/subscribe",
+            },
+        },
+    },
+
     css: ["@/assets/css/main.css", "@/assets/scss/main.scss"],
     modules: ["@nuxt/content", "@nuxtjs/tailwindcss", "@nuxt/image"],
     image: {
@@ -35,4 +45,9 @@ export default defineNuxtConfig({
             routes: ["/sitemap.xml", "/rss.xml"],
         },
     },
+    vue: {
+        compilerOptions: {
+            isCustomElement: (tag) => ["hyvor-talk-comments"].includes(tag),
+        },
+    },
 });
diff --git a/public/images/add-newsletter-static-website/postier.jpg b/public/images/add-newsletter-static-website/postier.jpg
new file mode 100644
index 000000000..1f805356d
Binary files /dev/null and b/public/images/add-newsletter-static-website/postier.jpg differ