[{"data":1,"prerenderedAt":682},["ShallowReactive",2],{"post-\u002Ffr\u002Fposts\u002Ffor-a-friend-from-infrastructure-to-web-development-in-2025":3,"post-link-fr-674a3932-aaba-445c-82bb-0896ce3a8e7e":452},{"id":4,"title":5,"body":6,"contentId":439,"date":440,"description":441,"extension":442,"meta":443,"navigation":444,"path":445,"rawbody":446,"robots":447,"schemaOrg":447,"seo":448,"sitemap":449,"stem":450,"__hash__":451},"posts\u002Ffr\u002Fposts\u002Ffor-a-friend-from-infrastructure-to-web-development-in-2025.md","Passer de l'infrastructure au développement web en 2025",{"type":7,"value":8,"toc":429},"minimark",[9,34,45,55,58,74,77,80,83,88,100,149,156,160,182,193,201,204,207,238],[10,11,12,13,17,18,21,22,25,26,29,30,33],"p",{},"Après un meetup où j'ai donné une présentation sur l'",[14,15,16],"strong",{},"optimistic UI",", un ami s'est approché de moi avec une question intéressante. Il travaille principalement dans l'infrastructure, utilisant ",[14,19,20],{},"Linux",", ",[14,23,24],{},"Terraform",", et ",[14,27,28],{},"Kubernetes",", et a fait un peu de ",[14,31,32],{},"développement web"," il y a des années. Il m'a demandé : \"J'aimerais revenir au développement web. Par où devrais-je commencer ?\"",[10,35,36,37,40,41,44],{},"La question m'a semblé à la fois intéressante et très pertinente. Le développement web est un domaine vaste et parfois déroutant de l'extérieur. Il évolue rapidement, avec de nouveaux outils, bibliothèques, frameworks et meilleures pratiques qui émergent constamment. Cela peut sembler intimidant, surtout dans le monde de ",[14,38,39],{},"JavaScript",", où la ",[14,42,43],{},"fatigue JS"," est un défi courant.",[46,47,48],"blockquote",{},[10,49,50,54],{},[51,52,53],"span",{},"!IMPORTANT","\nPeu importe votre expérience, ces conseils s'appliquent universellement. N'oubliez pas que cela repose sur mon expérience, ma vision et mes opinions, et non sur une vérité absolue.",[10,56,57],{},"Avant de donner des conseils, il est crucial de comprendre le contexte. La manière dont mon ami envisage d'utiliser le développement web influencera les recommandations. Je vois deux chemins principaux :",[59,60,61,68],"ol",{},[62,63,64,67],"li",{},[14,65,66],{},"Le développement web comme passe-temps"," : créer des projets personnels, apprendre et s'amuser.",[62,69,70,73],{},[14,71,72],{},"Le développement web comme carrière"," : travailler dans une entreprise pour créer des produits et collaborer avec une équipe.",[10,75,76],{},"L'approche varie également selon la localisation, car différents pays ont des marchés distincts et des outils privilégiés. Ici, nous nous concentrons sur la création de sites web ou d'applications web, et non sur le développement d'outils ou de bibliothèques.",[10,78,79],{},"Ces dernières années, j'ai expérimenté de nombreux outils, bibliothèques, frameworks et langages. Trouver la bonne pile technologique peut être difficile et prendre du temps. Avoir des conseils au début de votre parcours peut vous faire économiser beaucoup de temps et prévenir le risque de vous éparpiller trop face à l'afflux constant de nouveaux outils.",[10,81,82],{},"Commençons par les essentiels.",[84,85,87],"h2",{"id":86},"les-bases","Les Bases",[10,89,90,91,21,94,25,97,99],{},"Les fondements du développement web sont ",[14,92,93],{},"HTML",[14,95,96],{},"CSS",[14,98,39],{},". Voici quelques ressources pour les apprendre :",[101,102,103,113,120,127,135,142],"ul",{},[62,104,105,112],{},[106,107,111],"a",{"href":108,"rel":109},"https:\u002F\u002Fyoutu.be\u002FoEAuNzWXRjM?si=CtsGceAM_z3WNfGz",[110],"nofollow","Apprendre l'HTML"," avec Grafikart.",[62,114,115,112],{},[106,116,119],{"href":117,"rel":118},"https:\u002F\u002Fyoutube.com\u002Fplaylist?list=PLjwdMgw5TTLVjTZQocrMwKicV5wsZlRpj&si=J4vZKiGb3LBjiDks",[110],"Découverte du CSS",[62,121,122,112],{},[106,123,126],{"href":124,"rel":125},"https:\u002F\u002Fwww.youtube.com\u002Fplaylist?list=PLjwdMgw5TTLXgsTQE_1PpRkC_yX47ZcGV",[110],"Apprendre le JavaScript",[62,128,129,134],{},[106,130,133],{"href":131,"rel":132},"https:\u002F\u002Fyoutube.com\u002Fplaylist?list=PL4cUxeGkcC9ivBf_eKCPIAYXWzLlPAm6G&si=QTwFntwwlQ3pbkQ-",[110],"HTML & CSS Crash Course Tutorial"," avec le Net Ninja.",[62,136,137,134],{},[106,138,141],{"href":139,"rel":140},"https:\u002F\u002Fyoutube.com\u002Fplaylist?list=PL4cUxeGkcC9haFPT7J25Q9GRB_ZkFrQAc&si=RzCATnLejIdUzMgf",[110],"Modern JavaScript Tutorial",[62,143,144,134],{},[106,145,148],{"href":146,"rel":147},"https:\u002F\u002Fyoutube.com\u002Fplaylist?list=PL4cUxeGkcC9gfoKa5la9dsdCNpuey2s-V&si=kX5SKcV3x4Tc3BpD",[110],"JavaScript DOM Tutorial",[10,150,151,152,155],{},"Ces ressources fourniront une base solide. Ne passez pas un temps excessif sur elles : bien que les fondamentaux soient essentiels, ils ne sont que le point de départ. Gardez le ",[14,153,154],{},"Mozilla Developer Network (MDN)"," comme votre guide de référence.",[84,157,159],{"id":158},"backend-ou-frontend","Backend ou Frontend",[10,161,162,163,21,166,169,170,173,174,177,178,181],{},"De nombreux nouveaux venus préfèrent explorer les frameworks frontend comme ",[14,164,165],{},"React",[14,167,168],{},"Vue",", ou ",[14,171,172],{},"Angular",". D'autres peuvent opter pour un backend ",[14,175,176],{},"Node.js"," avec ",[14,179,180],{},"Express",", tirant parti de leur confort avec JavaScript.",[10,183,184,185,188,189,192],{},"Cependant, aucun de ces chemins n'est idéal au début. Utiliser un framework frontend trop tôt ou plonger dans l'écosystème Node.js peut être démoralisant. Je recommande de commencer avec ",[14,186,187],{},"PHP"," et ",[14,190,191],{},"Laravel",".",[46,194,195],{},[10,196,197,200],{},[51,198,199],{},"!NOTE","\nLaravel est un framework d'application web avec une syntaxe expressive et élégante, vous permettant de créer des applications sans effort.",[10,202,203],{},"Oubliez les idées préconçues selon lesquelles PHP serait obsolète ou encombrant. Le langage a évolué de manière significative, rendant le développement PHP confortable et efficace.",[10,205,206],{},"Voici pourquoi PHP et Laravel sont recommandés :",[101,208,209,222,229],{},[62,210,211,212,215,216,221],{},"La ",[14,213,214],{},"documentation de Laravel"," sur ",[106,217,220],{"href":218,"rel":219},"https:\u002F\u002Flaravel.com\u002F",[110],"laravel.com"," est l'une des plus complètes.",[62,223,224,225,228],{},"L'",[14,226,227],{},"écosystème de packages Laravel"," est vaste, bien entretenu et documenté, offrant des ressources même pour des besoins spécifiques.",[62,230,231,232,237],{},"La communauté Laravel est accueillante et riche en ressources, avec des plateformes comme ",[106,233,236],{"href":234,"rel":235},"https:\u002F\u002Flaracasts.com\u002F",[110],"Laracasts"," offrant de nombreux supports d'apprentissage sur divers sujets de développement web. Vous ne trouverez pas de meilleure ressource pour apprendre le développement web.",[239,240,244,248,257,281,285,288,298,314,317,321,324,335,348,352,361,370],"callout",{"icon":241,"text":242,"to":243},"i-ph-ticket-duotone","Abonnez-vous à Laracasts avec mon lien de parrainage","https:\u002F\u002Flaracasts.com\u002Freferral\u002FBarbapapazes",[84,245,247],{"id":246},"apprendre-php-et-laravel","Apprendre PHP et Laravel",[10,249,250,251,256],{},"Sur Laracasts, je recommande de suivre ",[106,252,255],{"href":253,"rel":254},"https:\u002F\u002Flaracasts.com\u002Fpath",[110],"le parcours",", qui vous guide des bases de PHP aux concepts avancés de Laravel. Voici quelques cours à considérer :",[101,258,259,266,273],{},[62,260,261,192],{},[106,262,265],{"href":263,"rel":264},"https:\u002F\u002Flaracasts.com\u002Fseries\u002Fphp-for-beginners-2023-edition",[110],"PHP pour les débutants",[62,267,268,192],{},[106,269,272],{"href":270,"rel":271},"https:\u002F\u002Flaracasts.com\u002Fseries\u002F30-days-to-learn-laravel-11",[110],"30 jours pour apprendre Laravel",[62,274,275,280],{},[106,276,279],{"href":277,"rel":278},"https:\u002F\u002Flaracasts.com\u002Fseries\u002Fbuild-a-forum-with-laravel",[110],"Créer un forum avec Laravel",". Ce cours est difficile, mais trouvez des cours associés pour clarifier les concepts si nécessaire.",[84,282,284],{"id":283},"les-choses-commencent-à-se-compliquer","Les choses commencent à se compliquer",[10,286,287],{},"Une fois que vous êtes à l'aise avec PHP et Laravel, commencez à construire avec Blade, CSS pur et JavaScript. Reconnaissez pourquoi des outils plus puissants sont nécessaires avant de les adopter.",[10,289,290,291,188,294,297],{},"Lorsque la gestion de CSS et JavaScript devient difficile, apprenez ",[14,292,293],{},"Tailwind CSS",[14,295,296],{},"Vue.js"," pour une meilleure maintenabilité et interactivité :",[101,299,300,307],{},[62,301,302,306],{},[106,303,293],{"href":304,"rel":305},"https:\u002F\u002Ftailwindcss.com\u002F",[110]," est un framework CSS utilitaire, ce qui vous rend plus productif en éliminant les modifications directes des fichiers CSS, les feuilles de style encombrantes et les classes répétitives.",[62,308,309,313],{},[106,310,296],{"href":311,"rel":312},"https:\u002F\u002Fvuejs.org\u002F",[110]," est un framework JavaScript progressif, facile pour les débutants, présentant des avantages techniques par rapport à React et Angular.",[10,315,316],{},"Explorez Laracasts pour des cours sur ces technologies et lisez attentivement leur documentation pour comprendre les capacités et les limitations avant utilisation.",[84,318,320],{"id":319},"devenir-développeur-full-stack","Devenir Développeur Full-Stack",[10,322,323],{},"Atteindre la maîtrise du développement full-stack est possible avec la bonne approche et les bons outils.",[10,325,326,327,330,331,334],{},"Évitez de créer une ",[14,328,329],{},"application à page unique (SPA)"," avec une ",[14,332,333],{},"API REST"," à moins que cela soit nécessaire. L'_over engineering complique la maintenance sans justification adéquate.",[10,336,337,338,341,342,347],{},"Une fois familiarisé avec Laravel et Vue.js, apprenez ",[14,339,340],{},"Inertia",", un protocole qui combine la simplicité dirigée par le serveur avec la puissance d'une SPA. ",[106,343,346],{"href":344,"rel":345},"https:\u002F\u002Flaracasts.com\u002Fseries\u002Fbuild-modern-laravel-apps-using-inertia-js",[110],"Laracasts propose une série à ce sujet",", vous aidant à devenir un développeur full-stack capable de bâtir diverses applications web.",[84,349,351],{"id":350},"quelques-outils-supplémentaires","Quelques Outils Supplémentaires",[10,353,354,355,360],{},"Pour éviter la fatigue liée à la gestion des packages JavaScript, utilisez ",[106,356,359],{"href":357,"rel":358},"https:\u002F\u002Fpnpm.io\u002F",[110],"pnpm",", un gestionnaire de paquets rapide et économe en espace, adapté à tous vos besoins, des mono-repos au patching des dépendances locales.",[10,362,363,364,369],{},"Pour les sites Web nécessitant de la documentation ou centré sur le contenu, utilisez ",[106,365,368],{"href":366,"rel":367},"https:\u002F\u002Fvitepress.dev\u002F",[110],"VitePress",", un générateur de site statique alimenté par Vue et Vite. La familiarité avec Vue.js facilite son adoption.",[371,372,374,383,386,389,407,411,423,426],"callout-read-more",{"id":373},"674a3932-aaba-445c-82bb-0896ce3a8e7e",[10,375,376,377,382],{},"Pour les applications nécessitant une intégration d'API, envisagez ",[106,378,381],{"href":379,"rel":380},"https:\u002F\u002Fnuxt.com",[110],"Nuxt",", un méta-framework Vue.js soutenant divers styles de construction, offrant une solution puissante et bien documentée.",[10,384,385],{},"Vous pourriez trouver d'autres outils intéressants, mais la cohérence mène à la maîtrise. Concentrez-vous sur ces outils recommandés et approfondissez votre connaissance.",[10,387,388],{},"En outre, gardez un œil sur :",[101,390,391,399],{},[62,392,393,398],{},[106,394,397],{"href":395,"rel":396},"https:\u002F\u002Funjs.io\u002F",[110],"UnJS",", un écosystème en plein essor de bibliothèques JavaScript bien conçues.",[62,400,401,406],{},[106,402,405],{"href":403,"rel":404},"https:\u002F\u002Fspatie.be\u002F",[110],"Spatie",", une agence de développement web offrant des paquets PHP et Laravel précieux.",[84,408,410],{"id":409},"pour-le-travail","Pour le Travail",[10,412,413,414,177,417,188,420,422],{},"Bien que ces recommandations conviennent aux amateurs et offrent une connaissance approfondie du développement web, adaptez-vous aux tendances du marché pour un travail professionnel. En France, par exemple, ",[14,415,416],{},"Java",[14,418,419],{},"Spring Boot",[14,421,172],{}," sont en demande. Concentrez-vous sur les concepts de base pour vous assurer une flexibilité dans les transitions d'outils ou d'entreprises.",[10,424,425],{},"Restez motivé au milieu de la courbe d'apprentissage. Le voyage est long mais gratifiant. Embrassez le processus d'apprentissage, connectez-vous avec vos pairs et appréciez le fait de créer. Le développement web est gratifiant et offre des possibilités infinies.",[10,427,428],{},"J'espère que ce post vous aidera à vous lancer dans votre parcours de développement web. N'hésitez pas à laisser des commentaires ou à partager vos expériences avec nous. 💜",{"title":430,"searchDepth":431,"depth":431,"links":432},"",2,[433,434,435,436,437,438],{"id":86,"depth":431,"text":87},{"id":158,"depth":431,"text":159},{"id":246,"depth":431,"text":247},{"id":283,"depth":431,"text":284},{"id":319,"depth":431,"text":320},{"id":350,"depth":431,"text":351},"ee9373dc-a101-44db-b3e3-a25b15c00e4e","2024-11-28","Conseils pour passer de l'infrastructure au développement web avec des étapes pratiques, des resources et des recommandations.","md",{},true,"\u002Ffr\u002Fposts\u002Ffor-a-friend-from-infrastructure-to-web-development-in-2025","---\ncontentId: ee9373dc-a101-44db-b3e3-a25b15c00e4e\ntitle: \"Passer de l'infrastructure au développement web en 2025\"\ndescription: \"Conseils pour passer de l'infrastructure au développement web avec des étapes pratiques, des resources et des recommandations.\"\ndate: 2024-11-28\n---\n\nAprès un meetup où j'ai donné une présentation sur l'**optimistic UI**, un ami s'est approché de moi avec une question intéressante. Il travaille principalement dans l'infrastructure, utilisant **Linux**, **Terraform**, et **Kubernetes**, et a fait un peu de **développement web** il y a des années. Il m'a demandé : \"J'aimerais revenir au développement web. Par où devrais-je commencer ?\"\n\nLa question m'a semblé à la fois intéressante et très pertinente. Le développement web est un domaine vaste et parfois déroutant de l'extérieur. Il évolue rapidement, avec de nouveaux outils, bibliothèques, frameworks et meilleures pratiques qui émergent constamment. Cela peut sembler intimidant, surtout dans le monde de **JavaScript**, où la **fatigue JS** est un défi courant.\n\n> [!IMPORTANT]\n> Peu importe votre expérience, ces conseils s'appliquent universellement. N'oubliez pas que cela repose sur mon expérience, ma vision et mes opinions, et non sur une vérité absolue.\n\nAvant de donner des conseils, il est crucial de comprendre le contexte. La manière dont mon ami envisage d'utiliser le développement web influencera les recommandations. Je vois deux chemins principaux :\n\n1. **Le développement web comme passe-temps** : créer des projets personnels, apprendre et s'amuser.\n2. **Le développement web comme carrière** : travailler dans une entreprise pour créer des produits et collaborer avec une équipe.\n\nL'approche varie également selon la localisation, car différents pays ont des marchés distincts et des outils privilégiés. Ici, nous nous concentrons sur la création de sites web ou d'applications web, et non sur le développement d'outils ou de bibliothèques.\n\nCes dernières années, j'ai expérimenté de nombreux outils, bibliothèques, frameworks et langages. Trouver la bonne pile technologique peut être difficile et prendre du temps. Avoir des conseils au début de votre parcours peut vous faire économiser beaucoup de temps et prévenir le risque de vous éparpiller trop face à l'afflux constant de nouveaux outils.\n\nCommençons par les essentiels.\n\n## Les Bases\n\nLes fondements du développement web sont **HTML**, **CSS**, et **JavaScript**. Voici quelques ressources pour les apprendre :\n\n- [Apprendre l'HTML](https:\u002F\u002Fyoutu.be\u002FoEAuNzWXRjM?si=CtsGceAM_z3WNfGz) avec Grafikart.\n- [Découverte du CSS](https:\u002F\u002Fyoutube.com\u002Fplaylist?list=PLjwdMgw5TTLVjTZQocrMwKicV5wsZlRpj&si=J4vZKiGb3LBjiDks) avec Grafikart.\n- [Apprendre le JavaScript](https:\u002F\u002Fwww.youtube.com\u002Fplaylist?list=PLjwdMgw5TTLXgsTQE_1PpRkC_yX47ZcGV) avec Grafikart.\n- [HTML & CSS Crash Course Tutorial](https:\u002F\u002Fyoutube.com\u002Fplaylist?list=PL4cUxeGkcC9ivBf_eKCPIAYXWzLlPAm6G&si=QTwFntwwlQ3pbkQ-) avec le Net Ninja.\n- [Modern JavaScript Tutorial](https:\u002F\u002Fyoutube.com\u002Fplaylist?list=PL4cUxeGkcC9haFPT7J25Q9GRB_ZkFrQAc&si=RzCATnLejIdUzMgf) avec le Net Ninja.\n- [JavaScript DOM Tutorial](https:\u002F\u002Fyoutube.com\u002Fplaylist?list=PL4cUxeGkcC9gfoKa5la9dsdCNpuey2s-V&si=kX5SKcV3x4Tc3BpD) avec le Net Ninja.\n\nCes ressources fourniront une base solide. Ne passez pas un temps excessif sur elles : bien que les fondamentaux soient essentiels, ils ne sont que le point de départ. Gardez le **Mozilla Developer Network (MDN)** comme votre guide de référence.\n\n## Backend ou Frontend\n\nDe nombreux nouveaux venus préfèrent explorer les frameworks frontend comme **React**, **Vue**, ou **Angular**. D'autres peuvent opter pour un backend **Node.js** avec **Express**, tirant parti de leur confort avec JavaScript.\n\nCependant, aucun de ces chemins n'est idéal au début. Utiliser un framework frontend trop tôt ou plonger dans l'écosystème Node.js peut être démoralisant. Je recommande de commencer avec **PHP** et **Laravel**.\n\n> [!NOTE]\n> Laravel est un framework d'application web avec une syntaxe expressive et élégante, vous permettant de créer des applications sans effort.\n\nOubliez les idées préconçues selon lesquelles PHP serait obsolète ou encombrant. Le langage a évolué de manière significative, rendant le développement PHP confortable et efficace.\n\nVoici pourquoi PHP et Laravel sont recommandés :\n\n- La **documentation de Laravel** sur [laravel.com](https:\u002F\u002Flaravel.com\u002F) est l'une des plus complètes.\n- L'**écosystème de packages Laravel** est vaste, bien entretenu et documenté, offrant des ressources même pour des besoins spécifiques.\n- La communauté Laravel est accueillante et riche en ressources, avec des plateformes comme [Laracasts](https:\u002F\u002Flaracasts.com\u002F) offrant de nombreux supports d'apprentissage sur divers sujets de développement web. Vous ne trouverez pas de meilleure ressource pour apprendre le développement web.\n\n\u003CCallout\n  icon=\"i-ph-ticket-duotone\"\n  text=\"Abonnez-vous à Laracasts avec mon lien de parrainage\"\n  to=\"https:\u002F\u002Flaracasts.com\u002Freferral\u002FBarbapapazes\"\n\u002F>\n\n## Apprendre PHP et Laravel\n\nSur Laracasts, je recommande de suivre [le parcours](https:\u002F\u002Flaracasts.com\u002Fpath), qui vous guide des bases de PHP aux concepts avancés de Laravel. Voici quelques cours à considérer :\n\n- [PHP pour les débutants](https:\u002F\u002Flaracasts.com\u002Fseries\u002Fphp-for-beginners-2023-edition).\n- [30 jours pour apprendre Laravel](https:\u002F\u002Flaracasts.com\u002Fseries\u002F30-days-to-learn-laravel-11).\n- [Créer un forum avec Laravel](https:\u002F\u002Flaracasts.com\u002Fseries\u002Fbuild-a-forum-with-laravel). Ce cours est difficile, mais trouvez des cours associés pour clarifier les concepts si nécessaire.\n\n## Les choses commencent à se compliquer\n\nUne fois que vous êtes à l'aise avec PHP et Laravel, commencez à construire avec Blade, CSS pur et JavaScript. Reconnaissez pourquoi des outils plus puissants sont nécessaires avant de les adopter.\n\nLorsque la gestion de CSS et JavaScript devient difficile, apprenez **Tailwind CSS** et **Vue.js** pour une meilleure maintenabilité et interactivité :\n\n- [Tailwind CSS](https:\u002F\u002Ftailwindcss.com\u002F) est un framework CSS utilitaire, ce qui vous rend plus productif en éliminant les modifications directes des fichiers CSS, les feuilles de style encombrantes et les classes répétitives.\n- [Vue.js](https:\u002F\u002Fvuejs.org\u002F) est un framework JavaScript progressif, facile pour les débutants, présentant des avantages techniques par rapport à React et Angular.\n\nExplorez Laracasts pour des cours sur ces technologies et lisez attentivement leur documentation pour comprendre les capacités et les limitations avant utilisation.\n\n## Devenir Développeur Full-Stack\n\nAtteindre la maîtrise du développement full-stack est possible avec la bonne approche et les bons outils.\n\nÉvitez de créer une **application à page unique (SPA)** avec une **API REST** à moins que cela soit nécessaire. L'_over engineering complique la maintenance sans justification adéquate.\n\nUne fois familiarisé avec Laravel et Vue.js, apprenez **Inertia**, un protocole qui combine la simplicité dirigée par le serveur avec la puissance d'une SPA. [Laracasts propose une série à ce sujet](https:\u002F\u002Flaracasts.com\u002Fseries\u002Fbuild-modern-laravel-apps-using-inertia-js), vous aidant à devenir un développeur full-stack capable de bâtir diverses applications web.\n\n## Quelques Outils Supplémentaires\n\nPour éviter la fatigue liée à la gestion des packages JavaScript, utilisez [pnpm](https:\u002F\u002Fpnpm.io\u002F), un gestionnaire de paquets rapide et économe en espace, adapté à tous vos besoins, des mono-repos au patching des dépendances locales.\n\nPour les sites Web nécessitant de la documentation ou centré sur le contenu, utilisez [VitePress](https:\u002F\u002Fvitepress.dev\u002F), un générateur de site statique alimenté par Vue et Vite. La familiarité avec Vue.js facilite son adoption.\n\n\u003CCalloutReadMore id=\"674a3932-aaba-445c-82bb-0896ce3a8e7e\" \u002F>\n\nPour les applications nécessitant une intégration d'API, envisagez [Nuxt](https:\u002F\u002Fnuxt.com), un méta-framework Vue.js soutenant divers styles de construction, offrant une solution puissante et bien documentée.\n\nVous pourriez trouver d'autres outils intéressants, mais la cohérence mène à la maîtrise. Concentrez-vous sur ces outils recommandés et approfondissez votre connaissance.\n\nEn outre, gardez un œil sur :\n\n- [UnJS](https:\u002F\u002Funjs.io\u002F), un écosystème en plein essor de bibliothèques JavaScript bien conçues.\n- [Spatie](https:\u002F\u002Fspatie.be\u002F), une agence de développement web offrant des paquets PHP et Laravel précieux.\n\n## Pour le Travail\n\nBien que ces recommandations conviennent aux amateurs et offrent une connaissance approfondie du développement web, adaptez-vous aux tendances du marché pour un travail professionnel. En France, par exemple, **Java** avec **Spring Boot** et **Angular** sont en demande. Concentrez-vous sur les concepts de base pour vous assurer une flexibilité dans les transitions d'outils ou d'entreprises.\n\nRestez motivé au milieu de la courbe d'apprentissage. Le voyage est long mais gratifiant. Embrassez le processus d'apprentissage, connectez-vous avec vos pairs et appréciez le fait de créer. Le développement web est gratifiant et offre des possibilités infinies.\n\nJ'espère que ce post vous aidera à vous lancer dans votre parcours de développement web. N'hésitez pas à laisser des commentaires ou à partager vos expériences avec nous. 💜\n",null,{"title":5,"description":441},{"loc":445},"fr\u002Fposts\u002Ffor-a-friend-from-infrastructure-to-web-development-in-2025","nJs9_P9jfzKrAzcld6X91lwe9_weyk3qMw0-jZqcdjY",{"id":453,"title":454,"body":455,"contentId":373,"date":673,"description":674,"extension":442,"meta":675,"navigation":444,"path":676,"rawbody":677,"robots":447,"schemaOrg":447,"seo":678,"sitemap":679,"stem":680,"__hash__":681},"posts\u002Fposts\u002Fvitepress-for-a-personal-website-is-that-possible.md","VitePress for a Personal Website, Is That Possible?",{"type":7,"value":456,"toc":665},[457,460,464,476,491,502,506,511,514,520,523,532,535,541,546,550,553,556,559,562,568,572,575,578,581,584,593,600,606,610,613,622,627,630,634,645,653,659,662],[10,458,459],{},"For many years, I've attempted to create a personal website that reflects my style. Until now, I haven't been successful. Perhaps this effort will also fail, but I have never felt more confident in my choice. Let me explain why!",[84,461,463],{"id":462},"the-personal-website","The personal website",[10,465,466,467],{},"At first glance, building a personal website seems straightforward. So simple that it was my first significant project 5 years ago, ",[468,469,471,472,192],"git-hub-link",{"repo":470},"barbapapazes\u002Festeban-s-website",", with Express.js while learning ",[106,473,176],{"href":474,"rel":475},"https:\u002F\u002Fnodejs.org",[110],[10,477,478,479],{},"Afterward, I experimented with Nuxt 2, ",[468,480,482,483],{"repo":481},"barbapapazes\u002Festeban-soubiran.site\u002Ftree\u002Fv2",", and then Nuxt 3, ",[468,484,486,487],{"repo":485},"barbapapazes\u002Festeban-soubiran.site",", but something always felt missing. I was never satisfied with the outcome, and using it was not enjoyable. ",[488,489,490],"em",{},"If there's no enjoyment, there's no drive to maintain it. So what's the point of having a personal website?",[10,492,493,494,497,498,501],{},"I want to ",[14,495,496],{},"take pride in my website"," and share it with everyone, but these attempts were clearly ",[14,499,500],{},"the opposite"," of what I envisioned.",[84,503,505],{"id":504},"history","History",[10,507,508],{},[488,509,510],{},"Crafting a personal website is trickier than I initially thought.",[10,512,513],{},"Throughout the process of learning and creating websites, I've experienced significant growth, both in my needs and skills and in my appreciation for different approaches.",[10,515,516,517],{},"Initially, I aimed to build a website with a database, a markdown editor, and authentication, as seen in tutorials and numerous sites. But why did I seek something so intricate? To learn and write articles. Ultimately, I gained a lot of knowledge but never published any articles, as deploying something of this complexity was daunting for a beginner. ",[488,518,519],{},"And I was a beginner.",[10,521,522],{},"For the next blog website, I questioned my intent in building a personal site. It's beneficial for the CV and serves as a platform to test new technologies. That's exactly what I did. I explored Nuxt 2 when I was learning about it. For this second attempt, I never considered writing articles.",[10,524,525,526,531],{},"Eventually, I intended to write a tutorial on Adonis 5 but had nowhere to share it. I ended up posting it on ",[106,527,530],{"href":528,"rel":529},"https:\u002F\u002Fdev.to\u002Fbarbapapazes\u002Fobjectifs-et-mise-en-route-creer-un-blog-avec-adonis-20lg",[110],"dev.to",". I wasn't satisfied. The experience was unsatisfactory, and I lacked a backup of my work.",[10,533,534],{},"Several months later, I decided to revamp my website from scratch using Nuxt 3. Including an article section was planned, but experimenting with new features remained the primary focus.",[10,536,537,538,192],{},"And today, I'm back at it, reconstructing my personal website once more. Time passes, but now, ",[14,539,540],{},"I know exactly what I want",[10,542,543],{},[488,544,545],{},"Even if this is the same project, the context and my needs have evolved so much that it feels like a new beginning.",[84,547,549],{"id":548},"needs","Needs",[10,551,552],{},"The foremost necessity is a blog. I want the capability to craft and publish content effortlessly. My preferred method is writing in markdown within my text editor. I cherish this experience due to plugins that enhance my writing skills.",[10,554,555],{},"This markdown must be customizable to incorporate unique components and extended syntax, similar to GitHub alerts.",[10,557,558],{},"I desire a blog that requires minimal maintenance. The less effort needed to publish an article, the better. I don't want to continuously update my website due to security vulnerabilities or package updates. Fewer dependencies grant me more time to focus on writing.",[10,560,561],{},"I want to generate an RSS feed and an Open Graph image for each article. I want this procedure to be simple and automatic upon publishing an article. The tool should be extensible for future enhancements.",[10,563,564,565,192],{},"The crucial takeaway is that ",[14,566,567],{},"I want to concentrate on content, not on coding",[84,569,571],{"id":570},"tools","Tools",[10,573,574],{},"I am familiar with creating websites using WordPress, Adonis, Astro, Nuxt, and Vite with Vue.",[10,576,577],{},"Considering my needs, WordPress and Adonis are not optimal choices. I do not wish to maintain a server and a database. Although Adonis offers a way to generate a static website, it's undocumented. I don't want to invest time in this.",[10,579,580],{},"Nuxt with the Content plugin is a viable option, but over the past year, I've developed many websites with that stack. The developer experience of the Content plugin is unsatisfactory. It significantly slows down the dev server (up to 30 seconds to start) and build time (up to 2 minutes), and requires too much maintenance. I no longer wish to use it for this type of project.",[10,582,583],{},"Astro is a suitable choice. It's quick and ready for use. The only concern is that it might offer too many features. I fear it's easy to lose track, and configuring the content module is something I prefer to avoid.",[10,585,586,587,592],{},"Creating a custom project with Vite and Vue is another solid option, allowing me to delve into Vite's plugins. This technology powers ",[106,588,591],{"href":589,"rel":590},"https:\u002F\u002Fantfu.me",[110],"Anthony Fu's website",", providing a reliable example to follow.",[10,594,595,596,599],{},"I've decided to construct my next website using ",[14,597,598],{},"a custom project with Vite and Vue",". This allows me to have the most control over the project, to keep it minimal, and to have the full Vue ecosystem at my disposal.",[10,601,602,603],{},"That's the plan. ",[488,604,605],{},"Or so I thought.",[84,607,609],{"id":608},"final-choice","Final choice",[10,611,612],{},"Three days after selecting and commencing the development of my website, I utilized VitePress at work to document a set of functions. It was a pleasure to use, but the default template is documentation-oriented. I didn't want my personal website to resemble a documentation site.",[10,614,615,616,621],{},"Two days later, ",[106,617,620],{"href":618,"rel":619},"https:\u002F\u002Fx.com\u002Fyouyuxi\u002Fstatus\u002F1770837536509661339",[110],"Evan You announced VitePress 1.0"," and stated:",[46,623,624],{},[10,625,626],{},"Discover why we consider it one of the best ways to build static sites (not just for documentation!)",[10,628,629],{},"This piqued my curiosity. I read the entire documentation, and realized that it perfectly aligns with my requirements.",[84,631,633],{"id":632},"the-reality-behind-vitepress","The reality behind VitePress",[10,635,636,637,640,641,644],{},"In essence, ",[14,638,639],{},"VitePress is a tool that processes Markdown files to create routes and render them as HTML."," Nothing more. The documentation aspect is merely a theme, a layer atop this powerful core with file-based routing, markdown parsing, hooks, build-time data loading, and SSG. ",[14,642,643],{},"You can easily create your own theme"," on top of this powerful and maintainable core.",[10,646,647,648,652],{},"In summary, I can leverage this robust core to build my personal website with a custom theme crafted in ",[106,649,296],{"href":650,"rel":651},"https:\u002F\u002Fvuejs.org",[110],". Perfect for extensibility and customization while the having a solid foundation around the content.",[10,654,655,656],{},"That's precisely what I plan to do. Essentially, this core is what I aimed to create with the Vite and Vue stack. With VitePress, it's a single dependency, ready to use, well-documented, maintained, and with a community, allowing me to focus on content from the outset. ",[488,657,658],{},"Crafting a theme is uncomplicated as it's purely aesthetic. The core functionality is already established. I can start writing now while taking the time to craft a theme and adding features as needed.",[10,660,661],{},"I intend to keep this blog as minimal as possible, and with VitePress, composing content and deploying is now streamlined.",[10,663,664],{},"I highly recommend giving VitePress a try, despite its marketing as a documentation builder. It's genuinely impressive and surpasses expectations. 📖",{"title":430,"searchDepth":431,"depth":431,"links":666},[667,668,669,670,671,672],{"id":462,"depth":431,"text":463},{"id":504,"depth":431,"text":505},{"id":548,"depth":431,"text":549},{"id":570,"depth":431,"text":571},{"id":608,"depth":431,"text":609},{"id":632,"depth":431,"text":633},"2024-03-22","I chose VitePress to build my personal website. You may know it as a documentation tool, but it's more than that.",{},"\u002Fposts\u002Fvitepress-for-a-personal-website-is-that-possible","---\ncontentId: 674a3932-aaba-445c-82bb-0896ce3a8e7e\ntitle: VitePress for a Personal Website, Is That Possible?\ndescription: I chose VitePress to build my personal website. You may know it as a documentation tool, but it's more than that.\ndate: 2024-03-22\n---\n\nFor many years, I've attempted to create a personal website that reflects my style. Until now, I haven't been successful. Perhaps this effort will also fail, but I have never felt more confident in my choice. Let me explain why!\n\n## The personal website\n\nAt first glance, building a personal website seems straightforward. So simple that it was my first significant project 5 years ago, \u003CGitHubLink repo=\"barbapapazes\u002Festeban-s-website\" \u002F>, with Express.js while learning [Node.js](https:\u002F\u002Fnodejs.org).\n\nAfterward, I experimented with Nuxt 2, \u003CGitHubLink repo=\"barbapapazes\u002Festeban-soubiran.site\u002Ftree\u002Fv2\" \u002F>, and then Nuxt 3, \u003CGitHubLink repo=\"barbapapazes\u002Festeban-soubiran.site\" \u002F>, but something always felt missing. I was never satisfied with the outcome, and using it was not enjoyable. _If there's no enjoyment, there's no drive to maintain it. So what's the point of having a personal website?_\n\nI want to **take pride in my website** and share it with everyone, but these attempts were clearly **the opposite** of what I envisioned.\n\n## History\n\n_Crafting a personal website is trickier than I initially thought._\n\nThroughout the process of learning and creating websites, I've experienced significant growth, both in my needs and skills and in my appreciation for different approaches.\n\nInitially, I aimed to build a website with a database, a markdown editor, and authentication, as seen in tutorials and numerous sites. But why did I seek something so intricate? To learn and write articles. Ultimately, I gained a lot of knowledge but never published any articles, as deploying something of this complexity was daunting for a beginner. _And I was a beginner._\n\nFor the next blog website, I questioned my intent in building a personal site. It's beneficial for the CV and serves as a platform to test new technologies. That's exactly what I did. I explored Nuxt 2 when I was learning about it. For this second attempt, I never considered writing articles.\n\nEventually, I intended to write a tutorial on Adonis 5 but had nowhere to share it. I ended up posting it on [dev.to](https:\u002F\u002Fdev.to\u002Fbarbapapazes\u002Fobjectifs-et-mise-en-route-creer-un-blog-avec-adonis-20lg). I wasn't satisfied. The experience was unsatisfactory, and I lacked a backup of my work.\n\nSeveral months later, I decided to revamp my website from scratch using Nuxt 3. Including an article section was planned, but experimenting with new features remained the primary focus.\n\nAnd today, I'm back at it, reconstructing my personal website once more. Time passes, but now, **I know exactly what I want**.\n\n_Even if this is the same project, the context and my needs have evolved so much that it feels like a new beginning._\n\n## Needs\n\nThe foremost necessity is a blog. I want the capability to craft and publish content effortlessly. My preferred method is writing in markdown within my text editor. I cherish this experience due to plugins that enhance my writing skills.\n\nThis markdown must be customizable to incorporate unique components and extended syntax, similar to GitHub alerts.\n\nI desire a blog that requires minimal maintenance. The less effort needed to publish an article, the better. I don't want to continuously update my website due to security vulnerabilities or package updates. Fewer dependencies grant me more time to focus on writing.\n\nI want to generate an RSS feed and an Open Graph image for each article. I want this procedure to be simple and automatic upon publishing an article. The tool should be extensible for future enhancements.\n\nThe crucial takeaway is that **I want to concentrate on content, not on coding**.\n\n## Tools\n\nI am familiar with creating websites using WordPress, Adonis, Astro, Nuxt, and Vite with Vue.\n\nConsidering my needs, WordPress and Adonis are not optimal choices. I do not wish to maintain a server and a database. Although Adonis offers a way to generate a static website, it's undocumented. I don't want to invest time in this.\n\nNuxt with the Content plugin is a viable option, but over the past year, I've developed many websites with that stack. The developer experience of the Content plugin is unsatisfactory. It significantly slows down the dev server (up to 30 seconds to start) and build time (up to 2 minutes), and requires too much maintenance. I no longer wish to use it for this type of project.\n\nAstro is a suitable choice. It's quick and ready for use. The only concern is that it might offer too many features. I fear it's easy to lose track, and configuring the content module is something I prefer to avoid.\n\nCreating a custom project with Vite and Vue is another solid option, allowing me to delve into Vite's plugins. This technology powers [Anthony Fu's website](https:\u002F\u002Fantfu.me), providing a reliable example to follow.\n\nI've decided to construct my next website using **a custom project with Vite and Vue**. This allows me to have the most control over the project, to keep it minimal, and to have the full Vue ecosystem at my disposal.\n\nThat's the plan. _Or so I thought._\n\n## Final choice\n\nThree days after selecting and commencing the development of my website, I utilized VitePress at work to document a set of functions. It was a pleasure to use, but the default template is documentation-oriented. I didn't want my personal website to resemble a documentation site.\n\nTwo days later, [Evan You announced VitePress 1.0](https:\u002F\u002Fx.com\u002Fyouyuxi\u002Fstatus\u002F1770837536509661339) and stated:\n\n> Discover why we consider it one of the best ways to build static sites (not just for documentation!)\n\nThis piqued my curiosity. I read the entire documentation, and realized that it perfectly aligns with my requirements.\n\n## The reality behind VitePress\n\nIn essence, **VitePress is a tool that processes Markdown files to create routes and render them as HTML.** Nothing more. The documentation aspect is merely a theme, a layer atop this powerful core with file-based routing, markdown parsing, hooks, build-time data loading, and SSG. **You can easily create your own theme** on top of this powerful and maintainable core.\n\nIn summary, I can leverage this robust core to build my personal website with a custom theme crafted in [Vue.js](https:\u002F\u002Fvuejs.org). Perfect for extensibility and customization while the having a solid foundation around the content.\n\nThat's precisely what I plan to do. Essentially, this core is what I aimed to create with the Vite and Vue stack. With VitePress, it's a single dependency, ready to use, well-documented, maintained, and with a community, allowing me to focus on content from the outset. _Crafting a theme is uncomplicated as it's purely aesthetic. The core functionality is already established. I can start writing now while taking the time to craft a theme and adding features as needed._\n\nI intend to keep this blog as minimal as possible, and with VitePress, composing content and deploying is now streamlined.\n\nI highly recommend giving VitePress a try, despite its marketing as a documentation builder. It's genuinely impressive and surpasses expectations. 📖\n",{"title":454,"description":674},{"loc":676},"posts\u002Fvitepress-for-a-personal-website-is-that-possible","mnNhesoP7NbBkcCtWxLKN2KqTyWlR3l5fKsybnVHKN4",1790086903945]