[{"data":1,"prerenderedAt":501},["ShallowReactive",2],{"post-\u002Fposts\u002Fenhancing-engagement-adding-reactions-to-my-articles":3,"post-link-en-674a3932-aaba-445c-82bb-0896ce3a8e7e":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\u002Fposts\u002Fenhancing-engagement-adding-reactions-to-my-articles.md","Enhancing Engagement: Adding Reactions to My Articles",{"type":7,"value":8,"toc":250},"minimark",[9,13,18,33],[10,11,12],"p",{},"Hey there! I hope you're doing well. I'm excited to share with you the beginning of a significant project that will accompany me over the coming months.",[14,15,17],"h2",{"id":16},"introduction","Introduction",[10,19,20,21,28,29],{},"In March 2024, I announced the overhaul of my personal website for the fourth time, this time using ",[22,23,27],"a",{"href":24,"rel":25},"https:\u002F\u002Fvitepress.dev\u002F",[26],"nofollow","VitePress",". This decision was guided by the desire for a streamlined yet robust tool that allows me to write easily and rapidly while maintaining control over both design and functionality. ",[30,31,32],"em",{},"VitePress is truly exceptional in this regard.",[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},"674a3932-aaba-445c-82bb-0896ce3a8e7e",[14,38,40],{"id":39},"exploring-new-horizons","Exploring new horizons",[10,42,43,44,49],{},"In June 2024, I embarked on learning ",[22,45,48],{"href":46,"rel":47},"https:\u002F\u002Flaravel.com",[26],"Laravel"," for two primary reasons.",[10,51,52,53],{},"Firstly, I aimed to broaden my expertise and skills in web development. I want to create applications from the ground up, turning ideas into reality without heavily relying on external services. ",[30,54,55],{},"And I'm already working on my first SaaS 🤫.",[10,57,58,59,64],{},"Secondly, I sought more flexibility in my career options. Since the outset of my professional journey, I have predominantly used ",[22,60,63],{"href":61,"rel":62},"https:\u002F\u002Fangular.dev\u002F",[26],"Angular"," as my main tool. I am eager to explore new avenues as Angular no longer resonates with me.",[10,66,67],{},[30,68,69,70,75,76,81],{},"I considered ",[22,71,74],{"href":72,"rel":73},"https:\u002F\u002Frubyonrails.org\u002F",[26],"Rails",", but once you've experienced the Laravel Documentation and ",[22,77,80],{"href":78,"rel":79},"https:\u002F\u002Flaracasts.com\u002Freferral\u002FBarbapapazes",[26],"Laracasts",", the choice becomes apparent.",[14,83,85],{"id":84},"progressing-incrementally","Progressing incrementally",[10,87,88,89],{},"Addressing the first reason demands substantial time and effort. It is a long-term initiative that I perceive as a significant challenge. Although I may not precisely know where to begin or how the journey will unfold, I am clear about my ultimate goal. Like all challenges, the best approach is to break them into smaller, manageable tasks, solve them individually, and then integrate the solutions. ",[30,90,91,92,97],{},"This is the essence of ",[22,93,96],{"href":94,"rel":95},"https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FDivide-and-conquer_algorithm",[26],"divide and conquer",".",[10,99,100],{},"I firmly believe that the most effective way to learn is through practical projects. Not just a simple to-do list but something functional with a real purpose.",[10,102,103,104],{},"Meanwhile, I aim to enhance engagement with others. It's much more enjoyable to share and converse, to have interactions. For months, I've been contemplating additions to my personal website but struggled to find a practical, engaging, and useful idea. ",[30,105,106],{},"Until now.",[14,108,110],{"id":109},"taking-the-first-step","Taking the first step",[10,112,113,114,118,119,122,123],{},"Here we are. I decided to implement the feature to ",[115,116,117],"strong",{},"react to my articles using predefined emojis",", supported by an API developed with ",[22,120,48],{"href":46,"rel":121},[26],". ",[30,124,125,126,97],{},"And the front-end continues to be powered by ",[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],{},"Initially, it might appear as a minor feature, and that's true; it isn't vast, yet for a first step, it suffices. In this process, I engaged with numerous different concepts:",[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"," for GitHub authentication.",[147,156,157,162],{},[22,158,161],{"href":159,"rel":160},"https:\u002F\u002Flaravel.com\u002Fdocs\u002Fsanctum",[26],"Laravel Sanctum"," for API authentication.",[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"," for code quality assurance.",[147,183,184,189],{},[22,185,188],{"href":186,"rel":187},"https:\u002F\u002Fforge.laravel.com\u002F",[26],"Laravel Forge"," for deployment.",[147,191,192,197],{},[22,193,196],{"href":194,"rel":195},"https:\u002F\u002Fwww.hetzner.com\u002F",[26],"Hetzner"," for the server infrastructure.",[147,199,200,201,206],{},"Custom Command for database backups and ",[22,202,205],{"href":203,"rel":204},"https:\u002F\u002Fwww.cloudflare.com\u002Fdeveloper-platform\u002Fr2\u002F",[26],"R2"," for their storage.",[147,208,209,214],{},[22,210,213],{"href":211,"rel":212},"https:\u002F\u002Ffilamentphp.com\u002F",[26],"Filament"," for the dashboard management.",[147,216,217,218],{},"100% test coverage. ",[30,219,220,221,226],{},"Achievable with ease using Laravel and ",[22,222,225],{"href":223,"rel":224},"https:\u002F\u002Fpestphp.com\u002F",[26],"Pest",". 💫",[10,228,229,230],{},"And that's about it. ",[30,231,232],{},"Not too shabby for five days of work!",[10,234,235,236],{},"Reviewing all the source code of ",[237,238,241],"git-hub-link",{"repo":239,"name":240},"pinkary-project\u002Fpinkary.com","Pinkary Project"," greatly enhanced my understanding of these tools and the process of building a Laravel application.",[10,243,244],{},[30,245,246],{},"One of the significant aspects of this step is laying the groundwork for more features on my website and numerous articles to share what I've learned.",[10,248,249],{},"So, what are your thoughts? ⬇️",{"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},"0d4cb8be-230e-444e-9419-fce9adf0ef6b","2024-10-01","The initial yet crucial phase of a significant project that will accompany me in the upcoming months. Let's start small by adding reactions to my articles.","md",{},"\u002Fposts\u002Fenhancing-engagement-adding-reactions-to-my-articles","---\ncontentId: 0d4cb8be-230e-444e-9419-fce9adf0ef6b\ntitle: \"Enhancing Engagement: Adding Reactions to My Articles\"\ndescription: The initial yet crucial phase of a significant project that will accompany me in the upcoming months. Let's start small by adding reactions to my articles.\ndate: 2024-10-01\n---\n\nHey there! I hope you're doing well. I'm excited to share with you the beginning of a significant project that will accompany me over the coming months.\n\n## Introduction\n\nIn March 2024, I announced the overhaul of my personal website for the fourth time, this time using [VitePress](https:\u002F\u002Fvitepress.dev\u002F). This decision was guided by the desire for a streamlined yet robust tool that allows me to write easily and rapidly while maintaining control over both design and functionality. _VitePress is truly exceptional in this regard._\n\n\u003CCalloutReadMore id=\"674a3932-aaba-445c-82bb-0896ce3a8e7e\"\u002F>\n\n## Exploring new horizons\n\nIn June 2024, I embarked on learning [Laravel](https:\u002F\u002Flaravel.com) for two primary reasons.\n\nFirstly, I aimed to broaden my expertise and skills in web development. I want to create applications from the ground up, turning ideas into reality without heavily relying on external services. _And I'm already working on my first SaaS 🤫._\n\nSecondly, I sought more flexibility in my career options. Since the outset of my professional journey, I have predominantly used [Angular](https:\u002F\u002Fangular.dev\u002F) as my main tool. I am eager to explore new avenues as Angular no longer resonates with me.\n\n_I considered [Rails](https:\u002F\u002Frubyonrails.org\u002F), but once you've experienced the Laravel Documentation and [Laracasts](https:\u002F\u002Flaracasts.com\u002Freferral\u002FBarbapapazes), the choice becomes apparent._\n\n## Progressing incrementally\n\nAddressing the first reason demands substantial time and effort. It is a long-term initiative that I perceive as a significant challenge. Although I may not precisely know where to begin or how the journey will unfold, I am clear about my ultimate goal. Like all challenges, the best approach is to break them into smaller, manageable tasks, solve them individually, and then integrate the solutions. _This is the essence of [divide and conquer](https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FDivide-and-conquer_algorithm)._\n\nI firmly believe that the most effective way to learn is through practical projects. Not just a simple to-do list but something functional with a real purpose.\n\nMeanwhile, I aim to enhance engagement with others. It's much more enjoyable to share and converse, to have interactions. For months, I've been contemplating additions to my personal website but struggled to find a practical, engaging, and useful idea. _Until now._\n\n## Taking the first step\n\nHere we are. I decided to implement the feature to **react to my articles using predefined emojis**, supported by an API developed with [Laravel](https:\u002F\u002Flaravel.com). _And the front-end continues to be powered by [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\nInitially, it might appear as a minor feature, and that's true; it isn't vast, yet for a first step, it suffices. In this process, I engaged with numerous different concepts:\n\n- [Laravel Socialite](https:\u002F\u002Flaravel.com\u002Fdocs\u002Fsocialite) for GitHub authentication.\n- [Laravel Sanctum](https:\u002F\u002Flaravel.com\u002Fdocs\u002Fsanctum) for API authentication.\n- [Laravel Pint](https:\u002F\u002Flaravel.com\u002Fdocs\u002Fpint), [PHPStan](https:\u002F\u002Fphpstan.org\u002F), [Rector](https:\u002F\u002Fgetrector.org\u002F) for code quality assurance.\n- [Laravel Forge](https:\u002F\u002Fforge.laravel.com\u002F) for deployment.\n- [Hetzner](https:\u002F\u002Fwww.hetzner.com\u002F) for the server infrastructure.\n- Custom Command for database backups and [R2](https:\u002F\u002Fwww.cloudflare.com\u002Fdeveloper-platform\u002Fr2\u002F) for their storage.\n- [Filament](https:\u002F\u002Ffilamentphp.com\u002F) for the dashboard management.\n- 100% test coverage. _Achievable with ease using Laravel and [Pest](https:\u002F\u002Fpestphp.com\u002F). 💫_\n\nAnd that's about it. _Not too shabby for five days of work!_\n\nReviewing all the source code of \u003CGitHubLink repo=\"pinkary-project\u002Fpinkary.com\" name=\"Pinkary Project\" \u002F> greatly enhanced my understanding of these tools and the process of building a Laravel application.\n\n_One of the significant aspects of this step is laying the groundwork for more features on my website and numerous articles to share what I've learned._\n\nSo, what are your thoughts? ⬇️\n",null,{"title":5,"description":260},{"loc":263},"posts\u002Fenhancing-engagement-adding-reactions-to-my-articles","LD0HcKhXb60MUxL3IW43GYJzYnvIjjtinUYforzYsiA",{"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\u002Fposts\u002Fvitepress-for-a-personal-website-is-that-possible.md","VitePress for a Personal Website, Is That 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],{},"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!",[14,279,281],{"id":280},"the-personal-website","The personal website",[10,283,284,285],{},"At first glance, building a personal website seems straightforward. So simple that it was my first significant project 5 years ago, ",[237,286,288,289,97],{"repo":287},"barbapapazes\u002Festeban-s-website",", with Express.js while learning ",[22,290,293],{"href":291,"rel":292},"https:\u002F\u002Fnodejs.org",[26],"Node.js",[10,295,296,297],{},"Afterward, I experimented with Nuxt 2, ",[237,298,300,301],{"repo":299},"barbapapazes\u002Festeban-soubiran.site\u002Ftree\u002Fv2",", and then Nuxt 3, ",[237,302,304,305],{"repo":303},"barbapapazes\u002Festeban-soubiran.site",", but something always felt missing. I was never satisfied with the outcome, and using it was not enjoyable. ",[30,306,307],{},"If there's no enjoyment, there's no drive to maintain it. So what's the point of having a personal website?",[10,309,310,311,314,315,318],{},"I want to ",[115,312,313],{},"take pride in my website"," and share it with everyone, but these attempts were clearly ",[115,316,317],{},"the opposite"," of what I envisioned.",[14,320,322],{"id":321},"history","History",[10,324,325],{},[30,326,327],{},"Crafting a personal website is trickier than I initially thought.",[10,329,330],{},"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,332,333,334],{},"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. ",[30,335,336],{},"And I was a beginner.",[10,338,339],{},"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,341,342,343,348],{},"Eventually, I intended to write a tutorial on Adonis 5 but had nowhere to share it. I ended up posting it on ",[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",". I wasn't satisfied. The experience was unsatisfactory, and I lacked a backup of my work.",[10,350,351],{},"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,353,354,355,97],{},"And today, I'm back at it, reconstructing my personal website once more. Time passes, but now, ",[115,356,357],{},"I know exactly what I want",[10,359,360],{},[30,361,362],{},"Even if this is the same project, the context and my needs have evolved so much that it feels like a new beginning.",[14,364,366],{"id":365},"needs","Needs",[10,368,369],{},"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,371,372],{},"This markdown must be customizable to incorporate unique components and extended syntax, similar to GitHub alerts.",[10,374,375],{},"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,377,378],{},"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,380,381,382,97],{},"The crucial takeaway is that ",[115,383,384],{},"I want to concentrate on content, not on coding",[14,386,388],{"id":387},"tools","Tools",[10,390,391],{},"I am familiar with creating websites using WordPress, Adonis, Astro, Nuxt, and Vite with Vue.",[10,393,394],{},"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,396,397],{},"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,399,400],{},"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,402,403,404,409],{},"Creating a custom project with Vite and Vue is another solid option, allowing me to delve into Vite's plugins. This technology powers ",[22,405,408],{"href":406,"rel":407},"https:\u002F\u002Fantfu.me",[26],"Anthony Fu's website",", providing a reliable example to follow.",[10,411,412,413,416],{},"I've decided to construct my next website using ",[115,414,415],{},"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,418,419,420],{},"That's the plan. ",[30,421,422],{},"Or so I thought.",[14,424,426],{"id":425},"final-choice","Final choice",[10,428,429],{},"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,431,432,433,438],{},"Two days later, ",[22,434,437],{"href":435,"rel":436},"https:\u002F\u002Fx.com\u002Fyouyuxi\u002Fstatus\u002F1770837536509661339",[26],"Evan You announced VitePress 1.0"," and stated:",[440,441,442],"blockquote",{},[10,443,444],{},"Discover why we consider it one of the best ways to build static sites (not just for documentation!)",[10,446,447],{},"This piqued my curiosity. I read the entire documentation, and realized that it perfectly aligns with my requirements.",[14,449,451],{"id":450},"the-reality-behind-vitepress","The reality behind VitePress",[10,453,454,455,458,459,462],{},"In essence, ",[115,456,457],{},"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. ",[115,460,461],{},"You can easily create your own theme"," on top of this powerful and maintainable core.",[10,464,465,466,471],{},"In summary, I can leverage this robust core to build my personal website with a custom theme crafted in ",[22,467,470],{"href":468,"rel":469},"https:\u002F\u002Fvuejs.org",[26],"Vue.js",". Perfect for extensibility and customization while the having a solid foundation around the content.",[10,473,474,475],{},"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. ",[30,476,477],{},"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,479,480],{},"I intend to keep this blog as minimal as possible, and with VitePress, composing content and deploying is now streamlined.",[10,482,483],{},"I highly recommend giving VitePress a try, despite its marketing as a documentation builder. It's genuinely impressive and surpasses expectations. 📖",{"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","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":272,"description":493},{"loc":495},"posts\u002Fvitepress-for-a-personal-website-is-that-possible","mnNhesoP7NbBkcCtWxLKN2KqTyWlR3l5fKsybnVHKN4",1790086901503]