I choose VitePress for my personal website

Since years, I'm trying to build a personal website that fits me. Until now, I never succeeded. And maybe, this attempt will also fail but I have never been so confident in my choice. Let me explain why!

The Personal Website ​

In appearance, I have to admit that building a personal website seems easy. So easy that this is the first real project I did 5 years ago, esteban-s-website, with Express.js when I was learning Node.js.

After that, I tried using Nuxt 2, esteban-soubiran.site/tree/v2, then Nuxt 3, esteban-soubiran.site, but at the end, something was always missing. I was never satisfied with the result and using it was not a pleasure. If there is no pleasure, there is no motivation to maintain it. So what's the goal of having a personal website?

I want to be proud of my website to show it to everyone but these attempts were clearly the opposite of what I wanted.

History ​

Building a personal website is way trickier than I was thinking.

During the journey of learning and building websites, I evolved a lot, from my needs to my skills and things I appreciate.

At the beginning, I wanted to make a website with a database, a markdown editor, and authentication like I see in tutorials and many websites. But why did I want something so complex? To learn and to write articles. And in the end, I learned a lot but I never wrote any articles because deploying a thing like this, for a beginner, is a nightmare. And I was a beginner.

For the next blog website, I asked myself the reason to build this personal website. It's good for the CV and it's a way to try new stuff. That's exactly what I did. I was learning Nuxt 2 so I used it. For this second try, I never imagined writing articles.

One day, I was thinking to publish an article, a tutorial to learn Adonis 5 but I had nowhere to publish it. I ended up publishing it on dev.to. I was not satisfied. The experience was not good and I have no backup of my article.

Some months later, I decided to rewrite my website from scratch using Nuxt 3. Having an article section was on the roadmap but trying new stuff was the main goal, again.

And today, I'm here, rebuilding my personal website again. Time flies but now, I exactly know what I want.

Needs ​

The first thing I want is a blog. I want to be able to create and publish content easily. My preferred way to write is using markdown in my text editor. I love this experience thanks to plugins that helps me to write better.

This markdown must be personalized to have custom components and extended syntax like GitHub alerts.

I want a zero maintenance blog. The less I have to do to publish an article, the better it is. I don't want to update my website every day because of security issues or because of a new version of a package. The less I have dependencies, the more I have time to write.

I want to be able to create a RSS feed and an Open Graph image for each article. I want this process to be easy and automatic when I publish an article.

The thing to remember is that I want to be focus on content, not on the code.

Tools ​

I know how to build a website using WordPress, Adonis, Astro, Nuxt, and Vite with Vue.

Given my needs, WordPress and Adonis are not the best choices. I do not want to maintain a server and a database. For Adonis, there is a way to generate a static website but it's not documented. I don't want to spend time on this.

Nuxt with the Content plugin is a good choice, but in the past year, I made many websites with that stack. The developer experience of the Content plugin is terrible. It makes the dev server (up to 30 seconds to start) and build slow (up to 2 minutes), and it's too maintenance-heavy. I don't want to use it anymore for this kind of project.

Astro is a good choice. It's fast and ready to use. The only downside I see is that it could have too many features. I feel that it's too easy to make a mess, and configuring the content module is not something I want to do.

Creating a custom project using Vite and Vue is also a good choice to deep dive into Vite's plugins. This technology powers Anthony Fu's website, so I have a good example to follow.

I will build my next website using a custom project with Vite and Vue. That's decided (that's what I was thinking).

Final Choice ​

3 days after choosing and starting building my website, I used VitePress at work to document a set of functions. It was a pleasure to use, but the template is oriented for documentation. I do not want a personal website that looks like a documentation website.

2 days later, Evan You announced VitePress 1.0 and said:

Read more to learn why we believe it's one of the best ways to build static sites (not just docs!)

Mmmh, this attises my curiosity. So I read every page of the documentation, and I was like, "this is what I want." It perfectly fits my needs.

The Reality Behind VitePress ​

In reality, VitePress is a tool that parses Markdown files to create routes and display them as HTML. The documentation part is just a theme, a layer above this powerful core with file-based routing, markdown parsing, hooks, build time data loading, and SSG.

This means that we can use this powerful core to build our personal website with our theme. And that's what I will do. Finally, this core is what I was trying to build with the Vite and Vue stack. With VitePress, it's one dependency, and I can focus on the content from day one. Writing a theme is very easy because it's only aesthetic. The core is already there.

I will keep this blog as minimal as possible, and thanks to VitePress, writing content and deployment is now a breeze.

You really should give a try to VitePress, despite the marketing oriented to a documentation builder. It really worth it, and it's way better than you think. 📖