[{"data":1,"prerenderedAt":682},["ShallowReactive",2],{"post-\u002Fposts\u002Ffor-a-friend-from-infrastructure-to-web-development-in-2025":3,"post-link-en-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\u002Fposts\u002Ffor-a-friend-from-infrastructure-to-web-development-in-2025.md","For a Friend: From Infrastructure to Web Development in 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,237],[10,11,12,13,17,18,21,22,25,26,29,30,33],"p",{},"After a meetup where I delivered a talk on ",[14,15,16],"strong",{},"optimistic UI",", a friend approached me with an interesting query. He primarily works in infrastructure, dealing with ",[14,19,20],{},"Linux",", ",[14,23,24],{},"Terraform",", and ",[14,27,28],{},"Kubernetes",", and dabbled in ",[14,31,32],{},"web development"," years ago. He asked, \"I'd like to get back into web development. Where should I start?\"",[10,35,36,37,40,41,44],{},"The question struck me as both interesting and highly relevant. Web development is a vast and sometimes perplexing field from the outside. It evolves rapidly, with new tools, libraries, frameworks, and best practices emerging constantly. It can seem daunting, especially the ",[14,38,39],{},"JavaScript"," world, where ",[14,42,43],{},"JS fatigue"," is a common challenge.",[46,47,48],"blockquote",{},[10,49,50,54],{},[51,52,53],"span",{},"!IMPORTANT","\nRegardless of your background, this advice applies universally. Remember, though, this is based on my experience, vision, and opinion, not an absolute truth.",[10,56,57],{},"Before I offer any advice, it's crucial to understand the context. How my friend intends to use web development will influence the recommendations. I see two main paths:",[59,60,61,68],"ol",{},[62,63,64,67],"li",{},[14,65,66],{},"Web development as a hobby",": Creating personal projects, learning, and having fun.",[62,69,70,73],{},[14,71,72],{},"Web development as a career",": Working in a company to build products and collaborate with a team.",[10,75,76],{},"The approach also varies by location, as different countries have distinct markets and favored tools. Here, we're focusing on creating websites or web applications, not developing tools or libraries.",[10,78,79],{},"In recent years, I've experimented with numerous tools, libraries, frameworks, and languages. Finding the right stack can be challenging and time-consuming. Guidance at the start of your journey can save significant time and prevent spreading yourself too thin amid the constant influx of new tools.",[10,81,82],{},"Let's start with the essentials.",[84,85,87],"h2",{"id":86},"the-basics","The basics",[10,89,90,91,21,94,25,97,99],{},"The foundations of web development are ",[14,92,93],{},"HTML",[14,95,96],{},"CSS",[14,98,39],{},". Here are some resources to learn them:",[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"," with 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"," with the 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],{},"These resources will provide a solid foundation. Don't spend excessive time on them, while fundamentals are essential, they are just the starting point. Keep the ",[14,153,154],{},"Mozilla Developer Network (MDN)"," as your go-to reference guide.",[84,157,159],{"id":158},"backend-or-frontend","Backend or frontend",[10,161,162,163,21,166,169,170,173,174,177,178,181],{},"Many newcomers prefer to explore frontend frameworks like ",[14,164,165],{},"React",[14,167,168],{},"Vue",", or ",[14,171,172],{},"Angular",". Others may opt for a ",[14,175,176],{},"Node.js"," backend with ",[14,179,180],{},"Express",", leveraging their comfort with JavaScript.",[10,183,184,185,188,189,192],{},"However, neither path is ideal at the start. Using a frontend framework too early or diving into the Node.js ecosystem can be overwhelming. My recommendation is to start with ",[14,186,187],{},"PHP"," and ",[14,190,191],{},"Laravel",".",[46,194,195],{},[10,196,197,200],{},[51,198,199],{},"!NOTE","\nLaravel is a web application framework with an expressive, elegant syntax, allowing you to create apps effortlessly.",[10,202,203],{},"Forget any preconceived notions about PHP being outdated or cumbersome. The language has evolved significantly, making PHP development comfortable and efficient.",[10,205,206],{},"Here's why PHP and Laravel are recommended:",[101,208,209,221,228],{},[62,210,211,214,215,220],{},[14,212,213],{},"Laravel's documentation"," at ",[106,216,219],{"href":217,"rel":218},"https:\u002F\u002Flaravel.com\u002F",[110],"laravel.com"," is one of the most comprehensive.",[62,222,223,224,227],{},"The ",[14,225,226],{},"Laravel package ecosystem"," is vast, well-maintained, and documented, providing resources even for niche needs.",[62,229,230,231,236],{},"Laravel's community is supportive and resource-rich, with platforms like ",[106,232,235],{"href":233,"rel":234},"https:\u002F\u002Flaracasts.com\u002F",[110],"Laracasts"," offering extensive learning materials across web development topics. You can't find a better resource for learning web development.",[238,239,243,247,256,280,284,287,297,313,316,320,323,334,347,351,360,369],"callout",{"icon":240,"text":241,"to":242},"i-ph-ticket-duotone","Subscribe to Laracasts with my referral link","https:\u002F\u002Flaracasts.com\u002Freferral\u002FBarbapapazes",[84,244,246],{"id":245},"learn-php-and-laravel","Learn PHP and Laravel",[10,248,249,250,255],{},"On Laracasts, I recommend following ",[106,251,254],{"href":252,"rel":253},"https:\u002F\u002Flaracasts.com\u002Fpath",[110],"the path",", which guides you from PHP basics to advanced Laravel concepts. Here are some courses to consider:",[101,257,258,265,272],{},[62,259,260,192],{},[106,261,264],{"href":262,"rel":263},"https:\u002F\u002Flaracasts.com\u002Fseries\u002Fphp-for-beginners-2023-edition",[110],"PHP for Beginners",[62,266,267,192],{},[106,268,271],{"href":269,"rel":270},"https:\u002F\u002Flaracasts.com\u002Fseries\u002F30-days-to-learn-laravel-11",[110],"30 Days to Learn Laravel",[62,273,274,279],{},[106,275,278],{"href":276,"rel":277},"https:\u002F\u002Flaracasts.com\u002Fseries\u002Fbuild-a-forum-with-laravel",[110],"Build a Forum With Laravel",". This course is challenging, but find related courses for concept clarifications when needed.",[84,281,283],{"id":282},"things-start-to-get-messy","Things start to get messy",[10,285,286],{},"Once comfortable with PHP and Laravel, begin building with Blade, pure CSS, and JavaScript. Recognize why more powerful tools are necessary before adopting them.",[10,288,289,290,188,293,296],{},"When CSS and JavaScript management become challenging, learn ",[14,291,292],{},"Tailwind CSS",[14,294,295],{},"Vue.js"," for enhanced maintainability and interactivity:",[101,298,299,306],{},[62,300,301,305],{},[106,302,292],{"href":303,"rel":304},"https:\u002F\u002Ftailwindcss.com\u002F",[110]," is a utility-first CSS framework, making you more productive by eliminating direct CSS file edits, bloated stylesheets, and repetitive classes.",[62,307,308,312],{},[106,309,295],{"href":310,"rel":311},"https:\u002F\u002Fvuejs.org\u002F",[110]," is a progressive JavaScript framework, easy for beginners, with technical advantages over React and Angular.",[10,314,315],{},"Explore Laracasts for courses on these technologies and thoroughly read their documentation to understand capabilities and limitations before usage.",[84,317,319],{"id":318},"become-a-full-stack-developer","Become a full-stack developer",[10,321,322],{},"Achieving full-stack development proficiency is possible with the right approach and tools.",[10,324,325,326,329,330,333],{},"Avoid building a ",[14,327,328],{},"Single Page Application (SPA)"," with a ",[14,331,332],{},"REST API"," unless necessary. Over-engineering complicates maintenance without proper justification.",[10,335,336,337,340,341,346],{},"Once familiar with Laravel and Vue.js, learn ",[14,338,339],{},"Inertia",", a protocol that combines server-driven simplicity with SPA power. ",[106,342,345],{"href":343,"rel":344},"https:\u002F\u002Flaracasts.com\u002Fseries\u002Fbuild-modern-laravel-apps-using-inertia-js",[110],"Laracasts offers a series on it",", helping you become a full-stack developer capable of building various web applications.",[84,348,350],{"id":349},"some-more-tools","Some more tools",[10,352,353,354,359],{},"To avoid JavaScript package management fatigue, use ",[106,355,358],{"href":356,"rel":357},"https:\u002F\u002Fpnpm.io\u002F",[110],"pnpm",", a fast, space-efficient package manager suited for all needs, from mono-repos to local dependency patching.",[10,361,362,363,368],{},"For documentation or content-centric websites, leverage ",[106,364,367],{"href":365,"rel":366},"https:\u002F\u002Fvitepress.dev\u002F",[110],"VitePress",", a static site generator powered by Vue and Vite. Familiarity with Vue.js makes it easy to adopt.",[370,371,373,382,385,388,406,410,423,426],"callout-read-more",{"id":372},"674a3932-aaba-445c-82bb-0896ce3a8e7e",[10,374,375,376,381],{},"For applications requiring API integration, consider ",[106,377,380],{"href":378,"rel":379},"https:\u002F\u002Fnuxt.com",[110],"Nuxt",", a Vue.js meta-framework supporting various build styles, offering a powerful and well-documented solution.",[10,383,384],{},"You might find other tools appealing, but consistency leads to mastery. Focus on these recommended tools and deepen your knowledge.",[10,386,387],{},"Additionally, keep an eye on:",[101,389,390,398],{},[62,391,392,397],{},[106,393,396],{"href":394,"rel":395},"https:\u002F\u002Funjs.io\u002F",[110],"UnJS",", a growing ecosystem of well-crafted JavaScript libraries.",[62,399,400,405],{},[106,401,404],{"href":402,"rel":403},"https:\u002F\u002Fspatie.be\u002F",[110],"Spatie",", a web development agency offering valuable PHP and Laravel packages.",[84,407,409],{"id":408},"for-the-work","For the work",[10,411,412,413,416,417,188,420,422],{},"While these recommendations suit hobbyists and provide in-depth web development knowledge, adapt to market trends for professional work. In France, for example, ",[14,414,415],{},"Java"," with ",[14,418,419],{},"Spring Boot",[14,421,172],{}," are in demand. Focus on core concepts for flexibility in tool or company transitions.",[10,424,425],{},"Stay motivated amidst the learning curve. The journey is long but rewarding. Embrace the learning process, connect with peers, and enjoy building creations. Web development is gratifying and offers boundless possibilities.",[10,427,428],{},"I hope this post assists you in embarking on your web development journey. Feel free to leave comments or share your experiences with us. 💜",{"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":245,"depth":431,"text":246},{"id":282,"depth":431,"text":283},{"id":318,"depth":431,"text":319},{"id":349,"depth":431,"text":350},"da0b1718-8c8c-4c99-bacc-72ec11d55317","2024-11-28","Guidance for transitioning from infrastructure to web development with practical steps and resources. Everything you need to know to start your journey.","md",{},true,"\u002Fposts\u002Ffor-a-friend-from-infrastructure-to-web-development-in-2025","---\ncontentId: da0b1718-8c8c-4c99-bacc-72ec11d55317\ntitle: \"For a Friend: From Infrastructure to Web Development in 2025\"\ndescription: \"Guidance for transitioning from infrastructure to web development with practical steps and resources. Everything you need to know to start your journey.\"\ndate: 2024-11-28\n---\n\nAfter a meetup where I delivered a talk on **optimistic UI**, a friend approached me with an interesting query. He primarily works in infrastructure, dealing with **Linux**, **Terraform**, and **Kubernetes**, and dabbled in **web development** years ago. He asked, \"I'd like to get back into web development. Where should I start?\"\n\nThe question struck me as both interesting and highly relevant. Web development is a vast and sometimes perplexing field from the outside. It evolves rapidly, with new tools, libraries, frameworks, and best practices emerging constantly. It can seem daunting, especially the **JavaScript** world, where **JS fatigue** is a common challenge.\n\n> [!IMPORTANT]\n> Regardless of your background, this advice applies universally. Remember, though, this is based on my experience, vision, and opinion, not an absolute truth.\n\nBefore I offer any advice, it's crucial to understand the context. How my friend intends to use web development will influence the recommendations. I see two main paths:\n\n1. **Web development as a hobby**: Creating personal projects, learning, and having fun.\n2. **Web development as a career**: Working in a company to build products and collaborate with a team.\n\nThe approach also varies by location, as different countries have distinct markets and favored tools. Here, we're focusing on creating websites or web applications, not developing tools or libraries.\n\nIn recent years, I've experimented with numerous tools, libraries, frameworks, and languages. Finding the right stack can be challenging and time-consuming. Guidance at the start of your journey can save significant time and prevent spreading yourself too thin amid the constant influx of new tools.\n\nLet's start with the essentials.\n\n## The basics\n\nThe foundations of web development are **HTML**, **CSS**, and **JavaScript**. Here are some resources to learn them:\n\n- [Apprendre l'HTML](https:\u002F\u002Fyoutu.be\u002FoEAuNzWXRjM?si=CtsGceAM_z3WNfGz) with Grafikart.\n- [Découverte du CSS](https:\u002F\u002Fyoutube.com\u002Fplaylist?list=PLjwdMgw5TTLVjTZQocrMwKicV5wsZlRpj&si=J4vZKiGb3LBjiDks) with Grafikart.\n- [Apprendre le JavaScript](https:\u002F\u002Fwww.youtube.com\u002Fplaylist?list=PLjwdMgw5TTLXgsTQE_1PpRkC_yX47ZcGV) with Grafikart.\n- [HTML & CSS Crash Course Tutorial](https:\u002F\u002Fyoutube.com\u002Fplaylist?list=PL4cUxeGkcC9ivBf_eKCPIAYXWzLlPAm6G&si=QTwFntwwlQ3pbkQ-) with the Net Ninja.\n- [Modern JavaScript Tutorial](https:\u002F\u002Fyoutube.com\u002Fplaylist?list=PL4cUxeGkcC9haFPT7J25Q9GRB_ZkFrQAc&si=RzCATnLejIdUzMgf) with the Net Ninja.\n- [JavaScript DOM Tutorial](https:\u002F\u002Fyoutube.com\u002Fplaylist?list=PL4cUxeGkcC9gfoKa5la9dsdCNpuey2s-V&si=kX5SKcV3x4Tc3BpD) with the Net Ninja.\n\nThese resources will provide a solid foundation. Don't spend excessive time on them, while fundamentals are essential, they are just the starting point. Keep the **Mozilla Developer Network (MDN)** as your go-to reference guide.\n\n## Backend or frontend\n\nMany newcomers prefer to explore frontend frameworks like **React**, **Vue**, or **Angular**. Others may opt for a **Node.js** backend with **Express**, leveraging their comfort with JavaScript.\n\nHowever, neither path is ideal at the start. Using a frontend framework too early or diving into the Node.js ecosystem can be overwhelming. My recommendation is to start with **PHP** and **Laravel**.\n\n> [!NOTE]\n> Laravel is a web application framework with an expressive, elegant syntax, allowing you to create apps effortlessly.\n\nForget any preconceived notions about PHP being outdated or cumbersome. The language has evolved significantly, making PHP development comfortable and efficient.\n\nHere's why PHP and Laravel are recommended:\n\n- **Laravel's documentation** at [laravel.com](https:\u002F\u002Flaravel.com\u002F) is one of the most comprehensive.\n- The **Laravel package ecosystem** is vast, well-maintained, and documented, providing resources even for niche needs.\n- Laravel's community is supportive and resource-rich, with platforms like [Laracasts](https:\u002F\u002Flaracasts.com\u002F) offering extensive learning materials across web development topics. You can't find a better resource for learning web development.\n\n\u003CCallout\n  icon=\"i-ph-ticket-duotone\"\n  text=\"Subscribe to Laracasts with my referral link\"\n  to=\"https:\u002F\u002Flaracasts.com\u002Freferral\u002FBarbapapazes\"\n\u002F>\n\n## Learn PHP and Laravel\n\nOn Laracasts, I recommend following [the path](https:\u002F\u002Flaracasts.com\u002Fpath), which guides you from PHP basics to advanced Laravel concepts. Here are some courses to consider:\n\n- [PHP for Beginners](https:\u002F\u002Flaracasts.com\u002Fseries\u002Fphp-for-beginners-2023-edition).\n- [30 Days to Learn Laravel](https:\u002F\u002Flaracasts.com\u002Fseries\u002F30-days-to-learn-laravel-11).\n- [Build a Forum With Laravel](https:\u002F\u002Flaracasts.com\u002Fseries\u002Fbuild-a-forum-with-laravel). This course is challenging, but find related courses for concept clarifications when needed.\n\n## Things start to get messy\n\nOnce comfortable with PHP and Laravel, begin building with Blade, pure CSS, and JavaScript. Recognize why more powerful tools are necessary before adopting them.\n\nWhen CSS and JavaScript management become challenging, learn **Tailwind CSS** and **Vue.js** for enhanced maintainability and interactivity:\n\n- [Tailwind CSS](https:\u002F\u002Ftailwindcss.com\u002F) is a utility-first CSS framework, making you more productive by eliminating direct CSS file edits, bloated stylesheets, and repetitive classes.\n- [Vue.js](https:\u002F\u002Fvuejs.org\u002F) is a progressive JavaScript framework, easy for beginners, with technical advantages over React and Angular.\n\nExplore Laracasts for courses on these technologies and thoroughly read their documentation to understand capabilities and limitations before usage.\n\n## Become a full-stack developer\n\nAchieving full-stack development proficiency is possible with the right approach and tools.\n\nAvoid building a **Single Page Application (SPA)** with a **REST API** unless necessary. Over-engineering complicates maintenance without proper justification.\n\nOnce familiar with Laravel and Vue.js, learn **Inertia**, a protocol that combines server-driven simplicity with SPA power. [Laracasts offers a series on it](https:\u002F\u002Flaracasts.com\u002Fseries\u002Fbuild-modern-laravel-apps-using-inertia-js), helping you become a full-stack developer capable of building various web applications.\n\n## Some more tools\n\nTo avoid JavaScript package management fatigue, use [pnpm](https:\u002F\u002Fpnpm.io\u002F), a fast, space-efficient package manager suited for all needs, from mono-repos to local dependency patching.\n\nFor documentation or content-centric websites, leverage [VitePress](https:\u002F\u002Fvitepress.dev\u002F), a static site generator powered by Vue and Vite. Familiarity with Vue.js makes it easy to adopt.\n\n\u003CCalloutReadMore id=\"674a3932-aaba-445c-82bb-0896ce3a8e7e\" \u002F>\n\nFor applications requiring API integration, consider [Nuxt](https:\u002F\u002Fnuxt.com), a Vue.js meta-framework supporting various build styles, offering a powerful and well-documented solution.\n\nYou might find other tools appealing, but consistency leads to mastery. Focus on these recommended tools and deepen your knowledge.\n\nAdditionally, keep an eye on:\n\n- [UnJS](https:\u002F\u002Funjs.io\u002F), a growing ecosystem of well-crafted JavaScript libraries.\n- [Spatie](https:\u002F\u002Fspatie.be\u002F), a web development agency offering valuable PHP and Laravel packages.\n\n## For the work\n\nWhile these recommendations suit hobbyists and provide in-depth web development knowledge, adapt to market trends for professional work. In France, for example, **Java** with **Spring Boot** and **Angular** are in demand. Focus on core concepts for flexibility in tool or company transitions.\n\nStay motivated amidst the learning curve. The journey is long but rewarding. Embrace the learning process, connect with peers, and enjoy building creations. Web development is gratifying and offers boundless possibilities.\n\nI hope this post assists you in embarking on your web development journey. Feel free to leave comments or share your experiences with us. 💜\n",null,{"title":5,"description":441},{"loc":445},"posts\u002Ffor-a-friend-from-infrastructure-to-web-development-in-2025","JhsfD21A0zMVe8ufFpgcaqKk_yf-3pUkw0GJvs6_Auw",{"id":453,"title":454,"body":455,"contentId":372,"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,295],{"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",1790086900953]