[{"data":1,"prerenderedAt":501},["ShallowReactive",2],{"post-\u002Ffr\u002Fposts\u002Fenhancing-engagement-adding-reactions-to-my-articles":3,"post-link-fr-a06fbfe1-6283-4eed-b3ec-e1d454613b9a":270},{"id":4,"title":5,"body":6,"contentId":258,"date":259,"description":260,"extension":261,"meta":262,"navigation":133,"path":263,"rawbody":264,"robots":265,"schemaOrg":265,"seo":266,"sitemap":267,"stem":268,"__hash__":269},"posts\u002Ffr\u002Fposts\u002Fenhancing-engagement-adding-reactions-to-my-articles.md","Améliorer l'Engagement : Ajouter des Réactions aux Articles",{"type":7,"value":8,"toc":250},"minimark",[9,13,18,33],[10,11,12],"p",{},"Salut ! J'espère que vous allez bien. Je suis ravi de partager avec toi le début d'un projet significatif qui m'accompagnera dans les mois à venir.",[14,15,17],"h2",{"id":16},"introduction","Introduction",[10,19,20,21,28,29],{},"En mars 2024, j'ai annoncé la refonte de mon site personnel pour la quatrième fois, cette fois en utilisant ",[22,23,27],"a",{"href":24,"rel":25},"https:\u002F\u002Fvitepress.dev\u002F",[26],"nofollow","VitePress",". Cette décision a été guidée par le désir d'un outil à la fois simplifié et robuste, qui me permet d'écrire facilement et rapidement tout en conservant le contrôle sur le design et les fonctionnalités. ",[30,31,32],"em",{},"VitePress est vraiment exceptionnel à cet égard.",[34,35,37,41,50,56,65,82,86,98,101,107,111,130,140,143,227,233,242,247],"callout-read-more",{"id":36},"a06fbfe1-6283-4eed-b3ec-e1d454613b9a",[14,38,40],{"id":39},"explorer-de-nouveaux-horizons","Explorer de Nouveaux Horizons",[10,42,43,44,49],{},"En juin 2024, j'ai commencé à apprendre ",[22,45,48],{"href":46,"rel":47},"https:\u002F\u002Flaravel.com",[26],"Laravel"," pour deux raisons.",[10,51,52,53],{},"Tout d'abord, je cherchais à élargir mon expertise et mes compétences en développement web. Je veux créer des applications de A à Z, transformer des idées en réalité sans trop dépendre des services externes. ",[30,54,55],{},"Et je travaille déjà sur mon premier SaaS 🤫.",[10,57,58,59,64],{},"Deuxièmement, je voulais plus de flexibilité dans mes options de carrière. Depuis le début de mon parcours professionnel, j'ai utilisé ",[22,60,63],{"href":61,"rel":62},"https:\u002F\u002Fangular.dev\u002F",[26],"Angular"," comme principal outil. Je cherche à explorer de nouvelles voies car Angular ne me procure plus la même satisfaction.",[10,66,67],{},[30,68,69,70,75,76,81],{},"J'ai envisagé ",[22,71,74],{"href":72,"rel":73},"https:\u002F\u002Frubyonrails.org\u002F",[26],"Rails",", mais une fois que vous avez expérimenté la documentation de Laravel et ",[22,77,80],{"href":78,"rel":79},"https:\u002F\u002Flaracasts.com\u002Freferral\u002FBarbapapazes",[26],"Laracasts",", le choix devient évident.",[14,83,85],{"id":84},"progresser-par-étapes","Progresser par Étapes",[10,87,88,89],{},"S'attaquer à la première raison nécessite un temps et un effort considérables. C'est une initiative à long terme que je perçois comme un défi majeur. Bien que je ne sache peut-être pas exactement par où commencer ou comment le parcours se déroulera, je suis clair sur mon objectif ultime. Comme pour tous les défis, la meilleure approche est de les décomposer en tâches plus petites et gérables, de les résoudre individuellement, puis d'intégrer les solutions. ",[30,90,91,92,97],{},"C'est l'essence du ",[22,93,96],{"href":94,"rel":95},"https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FDivide-and-conquer_algorithm",[26],"diviser pour régner",".",[10,99,100],{},"Je crois profondément que le moyen le plus efficace d'apprendre est à travers des projets concrets. Pas juste une simple to-do app, mais quelque chose de fonctionnel avec un vrai but.",[10,102,103,104],{},"Dans le même temps, j'aimerai faciliter l'engagement sur mon site. C'est beaucoup plus agréable de partager et de converser, d'avoir des interactions avec les autres. Pendant des mois, j'ai réfléchi à des ajouts pour mon site mais j'ai eu du mal à trouver une idée pratique, engageante et utile. ",[30,105,106],{},"Jusqu'à présent.",[14,108,110],{"id":109},"faire-le-premier-pas","Faire le Premier Pas",[10,112,113,114,118,119,122,123],{},"Nous y sommes. J'ai décidé de mettre en pace une fonctionnalité permettant de ",[115,116,117],"strong",{},"réagir à mes articles en utilisant des emoji prédéfinis",", propulsée par une API développée avec ",[22,120,48],{"href":46,"rel":121},[26],". ",[30,124,125,126,97],{},"Et le front-end continue d'être réalisé avec ",[22,127,27],{"href":128,"rel":129},"https:\u002F\u002Fvitepress.dev",[26],[131,132,134,135],"video",{"autoPlay":133,"loop":133,"muted":133,"playsInline":133},true,"\n  ",[136,137],"source",{"src":138,"type":139},"https:\u002F\u002Fimages.soubiran.dev\u002Fposts\u002Fenhancing-engagement-adding-reactions-to-my-articles\u002Fdemo.mp4","video\u002Fmp4",[10,141,142],{},"Au départ, cela peut sembler être une fonctionnalité mineure, et c'est vrai ; ce n'est pas si grand, mais pour un premier pas, cela suffit. Dans ce processus, j'ai abordé de nombreux concepts différents :",[144,145,146,155,163,182,190,198,207,215],"ul",{},[147,148,149,154],"li",{},[22,150,153],{"href":151,"rel":152},"https:\u002F\u002Flaravel.com\u002Fdocs\u002Fsocialite",[26],"Laravel Socialite"," pour l'authentification GitHub.",[147,156,157,162],{},[22,158,161],{"href":159,"rel":160},"https:\u002F\u002Flaravel.com\u002Fdocs\u002Fsanctum",[26],"Laravel Sanctum"," pour l'authentification API.",[147,164,165,170,171,170,176,181],{},[22,166,169],{"href":167,"rel":168},"https:\u002F\u002Flaravel.com\u002Fdocs\u002Fpint",[26],"Laravel Pint",", ",[22,172,175],{"href":173,"rel":174},"https:\u002F\u002Fphpstan.org\u002F",[26],"PHPStan",[22,177,180],{"href":178,"rel":179},"https:\u002F\u002Fgetrector.org\u002F",[26],"Rector"," pour l'assurance qualité du code.",[147,183,184,189],{},[22,185,188],{"href":186,"rel":187},"https:\u002F\u002Fforge.laravel.com\u002F",[26],"Laravel Forge"," pour le déploiement.",[147,191,192,197],{},[22,193,196],{"href":194,"rel":195},"https:\u002F\u002Fwww.hetzner.com\u002F",[26],"Hetzner"," pour l'infrastructure serveur.",[147,199,200,201,206],{},"Commande personnalisée pour les sauvegardes de base de données et ",[22,202,205],{"href":203,"rel":204},"https:\u002F\u002Fwww.cloudflare.com\u002Fdeveloper-platform\u002Fr2\u002F",[26],"R2"," pour leur stockage.",[147,208,209,214],{},[22,210,213],{"href":211,"rel":212},"https:\u002F\u002Ffilamentphp.com\u002F",[26],"Filament"," pour la gestion du tableau de bord.",[147,216,217,218],{},"Couverture de tests à 100%. ",[30,219,220,221,226],{},"Réaliser avec aisance en utilisant Laravel et ",[22,222,225],{"href":223,"rel":224},"https:\u002F\u002Fpestphp.com\u002F",[26],"Pest",". 💫",[10,228,229,230],{},"Et c'est à peu près tout. ",[30,231,232],{},"Pas mal pour cinq jours de travail !",[10,234,235,236],{},"La lecture de tout le code source de ",[237,238,241],"git-hub-link",{"repo":239,"name":240},"pinkary-project\u002Fpinkary.com","Pinkary Project"," a considérablement amélioré ma compréhension de ces outils et du processus de construction d'une application Laravel.",[10,243,244],{},[30,245,246],{},"Un des aspects majeurs de cette étape est de poser les bases pour plus de fonctionnalités sur mon site et de nombreux articles pour partager ce que j'ai appris.",[10,248,249],{},"Alors, qu'en pensez-vous ? ⬇️",{"title":251,"searchDepth":252,"depth":252,"links":253},"",2,[254,255,256,257],{"id":16,"depth":252,"text":17},{"id":39,"depth":252,"text":40},{"id":84,"depth":252,"text":85},{"id":109,"depth":252,"text":110},"8c14b61c-fdf9-443a-924b-050b1395910a","2024-10-01","Phase initiale mais cruciale d'un projet important qui m'accompagnera dans les mois à venir en ouvrant la possibilité de réagir à mes articles.","md",{},"\u002Ffr\u002Fposts\u002Fenhancing-engagement-adding-reactions-to-my-articles","---\ncontentId: 8c14b61c-fdf9-443a-924b-050b1395910a\ntitle: \"Améliorer l'Engagement : Ajouter des Réactions aux Articles\"\ndescription: Phase initiale mais cruciale d'un projet important qui m'accompagnera dans les mois à venir en ouvrant la possibilité de réagir à mes articles.\ndate: 2024-10-01\n---\n\nSalut ! J'espère que vous allez bien. Je suis ravi de partager avec toi le début d'un projet significatif qui m'accompagnera dans les mois à venir.\n\n## Introduction\n\nEn mars 2024, j'ai annoncé la refonte de mon site personnel pour la quatrième fois, cette fois en utilisant [VitePress](https:\u002F\u002Fvitepress.dev\u002F). Cette décision a été guidée par le désir d'un outil à la fois simplifié et robuste, qui me permet d'écrire facilement et rapidement tout en conservant le contrôle sur le design et les fonctionnalités. _VitePress est vraiment exceptionnel à cet égard._\n\n\u003CCalloutReadMore id=\"a06fbfe1-6283-4eed-b3ec-e1d454613b9a\" \u002F>\n\n## Explorer de Nouveaux Horizons\n\nEn juin 2024, j'ai commencé à apprendre [Laravel](https:\u002F\u002Flaravel.com) pour deux raisons.\n\nTout d'abord, je cherchais à élargir mon expertise et mes compétences en développement web. Je veux créer des applications de A à Z, transformer des idées en réalité sans trop dépendre des services externes. _Et je travaille déjà sur mon premier SaaS 🤫._\n\nDeuxièmement, je voulais plus de flexibilité dans mes options de carrière. Depuis le début de mon parcours professionnel, j'ai utilisé [Angular](https:\u002F\u002Fangular.dev\u002F) comme principal outil. Je cherche à explorer de nouvelles voies car Angular ne me procure plus la même satisfaction.\n\n_J'ai envisagé [Rails](https:\u002F\u002Frubyonrails.org\u002F), mais une fois que vous avez expérimenté la documentation de Laravel et [Laracasts](https:\u002F\u002Flaracasts.com\u002Freferral\u002FBarbapapazes), le choix devient évident._\n\n## Progresser par Étapes\n\nS'attaquer à la première raison nécessite un temps et un effort considérables. C'est une initiative à long terme que je perçois comme un défi majeur. Bien que je ne sache peut-être pas exactement par où commencer ou comment le parcours se déroulera, je suis clair sur mon objectif ultime. Comme pour tous les défis, la meilleure approche est de les décomposer en tâches plus petites et gérables, de les résoudre individuellement, puis d'intégrer les solutions. _C'est l'essence du [diviser pour régner](https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FDivide-and-conquer_algorithm)._\n\nJe crois profondément que le moyen le plus efficace d'apprendre est à travers des projets concrets. Pas juste une simple to-do app, mais quelque chose de fonctionnel avec un vrai but.\n\nDans le même temps, j'aimerai faciliter l'engagement sur mon site. C'est beaucoup plus agréable de partager et de converser, d'avoir des interactions avec les autres. Pendant des mois, j'ai réfléchi à des ajouts pour mon site mais j'ai eu du mal à trouver une idée pratique, engageante et utile. _Jusqu'à présent._\n\n## Faire le Premier Pas\n\nNous y sommes. J'ai décidé de mettre en pace une fonctionnalité permettant de **réagir à mes articles en utilisant des emoji prédéfinis**, propulsée par une API développée avec [Laravel](https:\u002F\u002Flaravel.com). _Et le front-end continue d'être réalisé avec [VitePress](https:\u002F\u002Fvitepress.dev)._\n\n\u003Cvideo autoplay loop muted playsinline>\n  \u003Csource src=\"https:\u002F\u002Fimages.soubiran.dev\u002Fposts\u002Fenhancing-engagement-adding-reactions-to-my-articles\u002Fdemo.mp4\" type=\"video\u002Fmp4\">\n\u003C\u002Fvideo>\n\nAu départ, cela peut sembler être une fonctionnalité mineure, et c'est vrai ; ce n'est pas si grand, mais pour un premier pas, cela suffit. Dans ce processus, j'ai abordé de nombreux concepts différents :\n\n- [Laravel Socialite](https:\u002F\u002Flaravel.com\u002Fdocs\u002Fsocialite) pour l'authentification GitHub.\n- [Laravel Sanctum](https:\u002F\u002Flaravel.com\u002Fdocs\u002Fsanctum) pour l'authentification API.\n- [Laravel Pint](https:\u002F\u002Flaravel.com\u002Fdocs\u002Fpint), [PHPStan](https:\u002F\u002Fphpstan.org\u002F), [Rector](https:\u002F\u002Fgetrector.org\u002F) pour l'assurance qualité du code.\n- [Laravel Forge](https:\u002F\u002Fforge.laravel.com\u002F) pour le déploiement.\n- [Hetzner](https:\u002F\u002Fwww.hetzner.com\u002F) pour l'infrastructure serveur.\n- Commande personnalisée pour les sauvegardes de base de données et [R2](https:\u002F\u002Fwww.cloudflare.com\u002Fdeveloper-platform\u002Fr2\u002F) pour leur stockage.\n- [Filament](https:\u002F\u002Ffilamentphp.com\u002F) pour la gestion du tableau de bord.\n- Couverture de tests à 100%. _Réaliser avec aisance en utilisant Laravel et [Pest](https:\u002F\u002Fpestphp.com\u002F). 💫_\n\nEt c'est à peu près tout. _Pas mal pour cinq jours de travail !_\n\nLa lecture de tout le code source de \u003CGitHubLink repo=\"pinkary-project\u002Fpinkary.com\" name=\"Pinkary Project\" \u002F> a considérablement amélioré ma compréhension de ces outils et du processus de construction d'une application Laravel.\n\n_Un des aspects majeurs de cette étape est de poser les bases pour plus de fonctionnalités sur mon site et de nombreux articles pour partager ce que j'ai appris._\n\nAlors, qu'en pensez-vous ? ⬇️\n",null,{"title":5,"description":260},{"loc":263},"fr\u002Fposts\u002Fenhancing-engagement-adding-reactions-to-my-articles","oiTcCfUTIJYVnsflsj6VK9zGk2MF3DhXd7FO_THoOmk",{"id":271,"title":272,"body":273,"contentId":36,"date":492,"description":493,"extension":261,"meta":494,"navigation":133,"path":495,"rawbody":496,"robots":265,"schemaOrg":265,"seo":497,"sitemap":498,"stem":499,"__hash__":500},"posts\u002Ffr\u002Fposts\u002Fvitepress-for-a-personal-website-is-that-possible.md","VitePress pour un Site Personnel, est-ce Possible ?",{"type":7,"value":274,"toc":484},[275,278,282,294,308,319,323,328,331,337,340,349,352,358,363,367,370,373,376,379,385,389,392,395,398,401,410,417,423,427,430,439,445,448,452,463,472,478,481],[10,276,277],{},"Depuis de nombreuses années, j'essaie de créer un site personnel qui reflète mon style. Jusqu'à présent, je n'ai pas réussi. Peut-être que cet effort échouera également, mais je n'ai jamais été aussi sûr de mon choix. Laissez-moi vous expliquer pourquoi !",[14,279,281],{"id":280},"le-site-personnel","Le site personnel",[10,283,284,285],{},"À première vue, la création d'un site personnel semble simple. Si simple que c'était mon premier projet significatif il y a 5 ans, ",[237,286,288,289,97],{"repo":287},"barbapapazes\u002Festeban-s-website",", avec Express.js tout en apprenant ",[22,290,293],{"href":291,"rel":292},"https:\u002F\u002Fnodejs.org",[26],"Node.js",[10,295,296,297],{},"Par la suite, j'ai expérimenté avec Nuxt 2, ",[237,298,300,301],{"repo":299},"barbapapazes\u002Festeban-soubiran.site\u002Ftree\u002Fv2",", puis Nuxt 3, ",[237,302,304,305],{"repo":303},"barbapapazes\u002Festeban-soubiran.site",", mais il me manquait toujours quelque chose. Je n'étais jamais satisfait du résultat, et l'utiliser n'était pas agréable. ",[30,306,307],{},"S'il n'y a pas de plaisir, il n'y a pas d'élan pour le maintenir. Alors, quel est l'intérêt d'avoir un site personnel ?",[10,309,310,311,314,315,318],{},"Je veux ",[115,312,313],{},"être fier de mon site"," et le partager avec tout le monde, mais ces tentatives étaient clairement ",[115,316,317],{},"l'opposé"," de ce que j'avais envisionné.",[14,320,322],{"id":321},"histoire","Histoire",[10,324,325],{},[30,326,327],{},"Créer un site personnel est plus compliqué que je ne le pensais initialement.",[10,329,330],{},"Tout au long du processus d'apprentissage et de création de sites Web, j'ai connu une croissance significative, tant dans mes besoins et mes compétences que dans mon appréciation pour différentes approches.",[10,332,333,334],{},"Au départ, je visais à construire un site avec une base de données, un éditeur de markdown et une authentification, comme on le voit dans les tutoriels et de nombreux sites. Mais pourquoi cherchais-je quelque chose d'aussi complexe ? Pour apprendre et écrire des articles. Finalement, j'ai acquis beaucoup de connaissances mais je n'ai jamais publié d'articles, car déployer quelque chose de cette complexité était intimidant pour un débutant. ",[30,335,336],{},"Et j'étais un débutant.",[10,338,339],{},"Pour le prochain site de blog, je me suis interrogé sur mon intention de créer un site personnel. C'est bénéfique pour le CV et cela sert de plateforme pour tester de nouvelles technologies. C'est exactement ce que j'ai fait. J'ai exploré Nuxt 2 quand j'apprenais à son sujet. Pour cette deuxième tentative, je n'avais jamais envisagé d'écrire des articles.",[10,341,342,343,348],{},"Finalement, je comptais écrire un tutoriel sur Adonis 5 mais je n'avais nulle part où le partager. J'ai fini par le publier sur ",[22,344,347],{"href":345,"rel":346},"https:\u002F\u002Fdev.to\u002Fbarbapapazes\u002Fobjectifs-et-mise-en-route-creer-un-blog-avec-adonis-20lg",[26],"dev.to",". Je n'étais pas satisfait. L'expérience était insatisfaisante, et je manquais d'une sauvegarde de mon travail.",[10,350,351],{},"Plusieurs mois plus tard, j'ai décidé de rénover mon site Web depuis zéro en utilisant Nuxt 3. Inclure une section d'articles était prévu, mais expérimenter de nouvelles fonctionnalités est resté l'objectif principal.",[10,353,354,355,97],{},"Et aujourd'hui, je suis de retour, reconstruisant une fois de plus mon site personnel. Le temps passe, mais maintenant, ",[115,356,357],{},"je sais exactement ce que je veux",[10,359,360],{},[30,361,362],{},"Même si c'est le même projet, le contexte et mes besoins ont évolué au point que cela ressemble à un nouveau départ.",[14,364,366],{"id":365},"besoins","Besoins",[10,368,369],{},"La première nécessité est un blog. Je veux la capacité de créer et de publier du contenu sans effort. Ma méthode préférée est d'écrire en markdown dans mon éditeur de texte. J'apprécie cette expérience grâce à des plugins qui améliorent mes compétences en écriture.",[10,371,372],{},"Ce markdown doit être personnalisable pour incorporer des composants uniques et une syntaxe étendue, similaire aux alertes GitHub.",[10,374,375],{},"Je désire un blog qui nécessite peu de maintenance. Moins il faut d'efforts pour publier un article, mieux c'est. Je ne veux pas mettre à jour continuellement mon site à cause de vulnérabilités de sécurité ou de mises à jour de packages. Moins de dépendances me laisse plus de temps pour me concentrer sur l'écriture.",[10,377,378],{},"Je veux générer un flux RSS et une image Open Graph pour chaque article. Je veux que cette procédure soit simple et automatique lors de la publication d'un article. L'outil doit être extensible pour les améliorations futures.",[10,380,381,382,97],{},"Le point crucial est que ",[115,383,384],{},"je veux me concentrer sur le contenu, pas sur le code",[14,386,388],{"id":387},"outils","Outils",[10,390,391],{},"Je suis familier avec la création de sites Web en utilisant WordPress, Adonis, Astro, Nuxt et Vite avec Vue.",[10,393,394],{},"Compte tenu de mes besoins, WordPress et Adonis ne sont pas des choix optimaux. Je ne souhaite pas maintenir un serveur et une base de données. Bien qu'Adonis offre une méthode pour générer un site statique, il n'est pas documenté. Je ne veux pas consacrer de temps à cela.",[10,396,397],{},"Nuxt avec le plugin Content est une option viable, mais au cours de l'année passée, j'ai développé de nombreux sites avec cette pile. L'expérience développeur du plugin Content est insatisfaisante. Elle ralentit considérablement le serveur de développement (jusqu'à 30 secondes pour démarrer) et le temps de construction (jusqu'à 2 minutes), et nécessite trop de maintenance. Je ne souhaite plus l'utiliser pour ce type de projet.",[10,399,400],{},"Astro est un choix adapté. C'est rapide et prêt à l'emploi. La seule préoccupation est qu'il pourrait offrir trop de fonctionnalités. J'ai peur de perdre le fil, et configurer le module de contenu est quelque chose que je préfère éviter.",[10,402,403,404,409],{},"Créer un projet personnalisé avec Vite et Vue est une autre option solide, me permettant d'explorer les plugins de Vite. Cette technologie alimente ",[22,405,408],{"href":406,"rel":407},"https:\u002F\u002Fantfu.me",[26],"le site d'Anthony Fu",", fournissant un exemple fiable à suivre.",[10,411,412,413,416],{},"J'ai décidé de construire mon prochain site en utilisant ",[115,414,415],{},"un projet personnalisé avec Vite et Vue",". Cela me permet d'avoir le plus de contrôle possible sur le projet, de le garder minimal et d'avoir tout l'écosystème Vue à ma disposition.",[10,418,419,420],{},"C'est le plan. ",[30,421,422],{},"Ou du moins, je le pensais.",[14,424,426],{"id":425},"choix-final","Choix final",[10,428,429],{},"Trois jours après avoir choisi et commencé le développement de mon site, j'ai utilisé VitePress au travail pour documenter un ensemble de fonctions. C'était un plaisir à utiliser, mais le modèle par défaut est orienté documentation. Je ne voulais pas que mon site personnel ressemble à un site de documentation.",[10,431,432,433,438],{},"Deux jours plus tard, ",[22,434,437],{"href":435,"rel":436},"https:\u002F\u002Fx.com\u002Fyouyuxi\u002Fstatus\u002F1770837536509661339",[26],"Evan You a annoncé VitePress 1.0"," et a déclaré :",[440,441,442],"blockquote",{},[10,443,444],{},"Découvrez pourquoi nous le considérons comme l'une des meilleures façons de construire des sites statiques (pas seulement pour la documentation !)",[10,446,447],{},"Cela a piqué ma curiosité. J'ai lu l'intégralité de la documentation et j'ai réalisé qu'elle correspond parfaitement à mes besoins.",[14,449,451],{"id":450},"la-réalité-derrière-vitepress","La réalité derrière VitePress",[10,453,454,455,458,459,462],{},"En essence, ",[115,456,457],{},"VitePress est un outil qui traite des fichiers Markdown pour créer des routes et les rendre en HTML."," Rien de plus. L'aspect documentation n'est qu'un thème, une couche sur ce noyau puissant avec un routage basé sur des fichiers, un parsing markdown, des hooks, un chargement de données au moment de la construction et SSG. ",[115,460,461],{},"Vous pouvez facilement créer votre propre thème"," sur ce noyau puissant et maintenable.",[10,464,465,466,471],{},"En résumé, je peux tirer parti de ce noyau robuste pour construire mon site personnel avec un thème personnalisé créé en ",[22,467,470],{"href":468,"rel":469},"https:\u002F\u002Fvuejs.org",[26],"Vue.js",". Idéal pour l'extensibilité et la personnalisation tout en ayant une base solide autour du contenu.",[10,473,474,475],{},"C'est précisément ce que je prévois de faire. Essentiellement, ce noyau est ce que j'avais l'intention de créer avec la pile Vite et Vue. Avec VitePress, c'est une seule dépendance, prête à l'emploi, bien documentée, maintenue, et avec une communauté, me permettant de me concentrer sur le contenu dès le départ. ",[30,476,477],{},"Créer un thème est simple car c'est purement esthétique. La fonctionnalité de base est déjà établie. Je peux commencer à écrire maintenant tout en prenant le temps de créer un thème et d'ajouter des fonctionnalités au besoin.",[10,479,480],{},"Je compte garder ce blog aussi minimal que possible, et avec VitePress, composer du contenu et déployer est maintenant facilité.",[10,482,483],{},"Je recommande vivement d'essayer VitePress, malgré son image de constructeur de documentation. C'est vraiment impressionnant et dépasse les attentes. 📖",{"title":251,"searchDepth":252,"depth":252,"links":485},[486,487,488,489,490,491],{"id":280,"depth":252,"text":281},{"id":321,"depth":252,"text":322},{"id":365,"depth":252,"text":366},{"id":387,"depth":252,"text":388},{"id":425,"depth":252,"text":426},{"id":450,"depth":252,"text":451},"2024-03-22","J'ai choisi VitePress pour créer mon site personnel. Vous le connaissez peut-être comme un outil de documentation, mais c'est bien plus que cela.",{},"\u002Ffr\u002Fposts\u002Fvitepress-for-a-personal-website-is-that-possible","---\ncontentId: a06fbfe1-6283-4eed-b3ec-e1d454613b9a\ntitle: VitePress pour un Site Personnel, est-ce Possible ?\ndescription: J'ai choisi VitePress pour créer mon site personnel. Vous le connaissez peut-être comme un outil de documentation, mais c'est bien plus que cela.\ndate: 2024-03-22\n---\n\nDepuis de nombreuses années, j'essaie de créer un site personnel qui reflète mon style. Jusqu'à présent, je n'ai pas réussi. Peut-être que cet effort échouera également, mais je n'ai jamais été aussi sûr de mon choix. Laissez-moi vous expliquer pourquoi !\n\n## Le site personnel\n\nÀ première vue, la création d'un site personnel semble simple. Si simple que c'était mon premier projet significatif il y a 5 ans, \u003CGitHubLink repo=\"barbapapazes\u002Festeban-s-website\" \u002F>, avec Express.js tout en apprenant [Node.js](https:\u002F\u002Fnodejs.org).\n\nPar la suite, j'ai expérimenté avec Nuxt 2, \u003CGitHubLink repo=\"barbapapazes\u002Festeban-soubiran.site\u002Ftree\u002Fv2\" \u002F>, puis Nuxt 3, \u003CGitHubLink repo=\"barbapapazes\u002Festeban-soubiran.site\" \u002F>, mais il me manquait toujours quelque chose. Je n'étais jamais satisfait du résultat, et l'utiliser n'était pas agréable. _S'il n'y a pas de plaisir, il n'y a pas d'élan pour le maintenir. Alors, quel est l'intérêt d'avoir un site personnel ?_\n\nJe veux **être fier de mon site** et le partager avec tout le monde, mais ces tentatives étaient clairement **l'opposé** de ce que j'avais envisionné.\n\n## Histoire\n\n_Créer un site personnel est plus compliqué que je ne le pensais initialement._\n\nTout au long du processus d'apprentissage et de création de sites Web, j'ai connu une croissance significative, tant dans mes besoins et mes compétences que dans mon appréciation pour différentes approches.\n\nAu départ, je visais à construire un site avec une base de données, un éditeur de markdown et une authentification, comme on le voit dans les tutoriels et de nombreux sites. Mais pourquoi cherchais-je quelque chose d'aussi complexe ? Pour apprendre et écrire des articles. Finalement, j'ai acquis beaucoup de connaissances mais je n'ai jamais publié d'articles, car déployer quelque chose de cette complexité était intimidant pour un débutant. _Et j'étais un débutant._\n\nPour le prochain site de blog, je me suis interrogé sur mon intention de créer un site personnel. C'est bénéfique pour le CV et cela sert de plateforme pour tester de nouvelles technologies. C'est exactement ce que j'ai fait. J'ai exploré Nuxt 2 quand j'apprenais à son sujet. Pour cette deuxième tentative, je n'avais jamais envisagé d'écrire des articles.\n\nFinalement, je comptais écrire un tutoriel sur Adonis 5 mais je n'avais nulle part où le partager. J'ai fini par le publier sur [dev.to](https:\u002F\u002Fdev.to\u002Fbarbapapazes\u002Fobjectifs-et-mise-en-route-creer-un-blog-avec-adonis-20lg). Je n'étais pas satisfait. L'expérience était insatisfaisante, et je manquais d'une sauvegarde de mon travail.\n\nPlusieurs mois plus tard, j'ai décidé de rénover mon site Web depuis zéro en utilisant Nuxt 3. Inclure une section d'articles était prévu, mais expérimenter de nouvelles fonctionnalités est resté l'objectif principal.\n\nEt aujourd'hui, je suis de retour, reconstruisant une fois de plus mon site personnel. Le temps passe, mais maintenant, **je sais exactement ce que je veux**.\n\n_Même si c'est le même projet, le contexte et mes besoins ont évolué au point que cela ressemble à un nouveau départ._\n\n## Besoins\n\nLa première nécessité est un blog. Je veux la capacité de créer et de publier du contenu sans effort. Ma méthode préférée est d'écrire en markdown dans mon éditeur de texte. J'apprécie cette expérience grâce à des plugins qui améliorent mes compétences en écriture.\n\nCe markdown doit être personnalisable pour incorporer des composants uniques et une syntaxe étendue, similaire aux alertes GitHub.\n\nJe désire un blog qui nécessite peu de maintenance. Moins il faut d'efforts pour publier un article, mieux c'est. Je ne veux pas mettre à jour continuellement mon site à cause de vulnérabilités de sécurité ou de mises à jour de packages. Moins de dépendances me laisse plus de temps pour me concentrer sur l'écriture.\n\nJe veux générer un flux RSS et une image Open Graph pour chaque article. Je veux que cette procédure soit simple et automatique lors de la publication d'un article. L'outil doit être extensible pour les améliorations futures.\n\nLe point crucial est que **je veux me concentrer sur le contenu, pas sur le code**.\n\n## Outils\n\nJe suis familier avec la création de sites Web en utilisant WordPress, Adonis, Astro, Nuxt et Vite avec Vue.\n\nCompte tenu de mes besoins, WordPress et Adonis ne sont pas des choix optimaux. Je ne souhaite pas maintenir un serveur et une base de données. Bien qu'Adonis offre une méthode pour générer un site statique, il n'est pas documenté. Je ne veux pas consacrer de temps à cela.\n\nNuxt avec le plugin Content est une option viable, mais au cours de l'année passée, j'ai développé de nombreux sites avec cette pile. L'expérience développeur du plugin Content est insatisfaisante. Elle ralentit considérablement le serveur de développement (jusqu'à 30 secondes pour démarrer) et le temps de construction (jusqu'à 2 minutes), et nécessite trop de maintenance. Je ne souhaite plus l'utiliser pour ce type de projet.\n\nAstro est un choix adapté. C'est rapide et prêt à l'emploi. La seule préoccupation est qu'il pourrait offrir trop de fonctionnalités. J'ai peur de perdre le fil, et configurer le module de contenu est quelque chose que je préfère éviter.\n\nCréer un projet personnalisé avec Vite et Vue est une autre option solide, me permettant d'explorer les plugins de Vite. Cette technologie alimente [le site d'Anthony Fu](https:\u002F\u002Fantfu.me), fournissant un exemple fiable à suivre.\n\nJ'ai décidé de construire mon prochain site en utilisant **un projet personnalisé avec Vite et Vue**. Cela me permet d'avoir le plus de contrôle possible sur le projet, de le garder minimal et d'avoir tout l'écosystème Vue à ma disposition.\n\nC'est le plan. _Ou du moins, je le pensais._\n\n## Choix final\n\nTrois jours après avoir choisi et commencé le développement de mon site, j'ai utilisé VitePress au travail pour documenter un ensemble de fonctions. C'était un plaisir à utiliser, mais le modèle par défaut est orienté documentation. Je ne voulais pas que mon site personnel ressemble à un site de documentation.\n\nDeux jours plus tard, [Evan You a annoncé VitePress 1.0](https:\u002F\u002Fx.com\u002Fyouyuxi\u002Fstatus\u002F1770837536509661339) et a déclaré :\n\n> Découvrez pourquoi nous le considérons comme l'une des meilleures façons de construire des sites statiques (pas seulement pour la documentation !)\n\nCela a piqué ma curiosité. J'ai lu l'intégralité de la documentation et j'ai réalisé qu'elle correspond parfaitement à mes besoins.\n\n## La réalité derrière VitePress\n\nEn essence, **VitePress est un outil qui traite des fichiers Markdown pour créer des routes et les rendre en HTML.** Rien de plus. L'aspect documentation n'est qu'un thème, une couche sur ce noyau puissant avec un routage basé sur des fichiers, un parsing markdown, des hooks, un chargement de données au moment de la construction et SSG. **Vous pouvez facilement créer votre propre thème** sur ce noyau puissant et maintenable.\n\nEn résumé, je peux tirer parti de ce noyau robuste pour construire mon site personnel avec un thème personnalisé créé en [Vue.js](https:\u002F\u002Fvuejs.org). Idéal pour l'extensibilité et la personnalisation tout en ayant une base solide autour du contenu.\n\nC'est précisément ce que je prévois de faire. Essentiellement, ce noyau est ce que j'avais l'intention de créer avec la pile Vite et Vue. Avec VitePress, c'est une seule dépendance, prête à l'emploi, bien documentée, maintenue, et avec une communauté, me permettant de me concentrer sur le contenu dès le départ. _Créer un thème est simple car c'est purement esthétique. La fonctionnalité de base est déjà établie. Je peux commencer à écrire maintenant tout en prenant le temps de créer un thème et d'ajouter des fonctionnalités au besoin._\n\nJe compte garder ce blog aussi minimal que possible, et avec VitePress, composer du contenu et déployer est maintenant facilité.\n\nJe recommande vivement d'essayer VitePress, malgré son image de constructeur de documentation. C'est vraiment impressionnant et dépasse les attentes. 📖\n",{"title":272,"description":493},{"loc":495},"fr\u002Fposts\u002Fvitepress-for-a-personal-website-is-that-possible","VUoUcY30zNfJSWBOdsyVI2_tjeT2xF5yu_XZvqySPmY",1790086903988]