VitePress for a Personal Website, Is That Possible?

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!

The Personal Website ​

At first glance, building a personal website seems straightforward. So simple that it was my first significant project 5 years ago, esteban-s-website, with Express.js while learning Node.js.

Afterward, I experimented with Nuxt 2, esteban-soubiran.site/tree/v2, and then Nuxt 3, esteban-soubiran.site, 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?

I want to take pride in my website and share it with everyone, but these attempts were clearly the opposite of what I envisioned.

History ​

Crafting a personal website is trickier than I initially thought.

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.

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. And I was a beginner.

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.

Eventually, I intended to write a tutorial on Adonis 5 but had nowhere to share it. I ended up posting it on dev.to. I wasn't satisfied. The experience was unsatisfactory, and I lacked a backup of my work.

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.

And today, I'm back at it, reconstructing my personal website once more. Time passes, but now, I know exactly what I want.

Even if this is the same project, the context and my needs have evolved so much that it feels like a new beginning.

Needs ​

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.

This markdown must be customizable to incorporate unique components and extended syntax, similar to GitHub alerts.

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.

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.

The crucial takeaway is that I want to concentrate on content, not on coding.

Tools ​

I am familiar with creating websites using WordPress, Adonis, Astro, Nuxt, and Vite with Vue.

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.

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.

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.

Creating 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, providing a reliable example to follow.

I'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.

That's the plan. Or so I thought.

Final Choice ​

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.

Two days later, Evan You announced VitePress 1.0 and stated:

Discover why we consider it one of the best ways to build static sites (not just for documentation!)

This piqued my curiosity. I read the entire documentation, and realized that it perfectly aligns with my requirements.

The Reality Behind VitePress ​

In 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.

In summary, I can leverage this robust core to build my personal website with a custom theme crafted in Vue.js. Perfect for extensibility and customization while the having a solid foundation around the content.

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. 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.

I intend to keep this blog as minimal as possible, and with VitePress, composing content and deploying is now streamlined.

I highly recommend giving VitePress a try, despite its marketing as a documentation builder. It's genuinely impressive and surpasses expectations. 📖