VitePress pour un Site Personnel, est-ce Possible ?

Depuis de nombreuses années, j’essaie de créer un site personnel qui reflète mon style. Jusqu'à présent, je n'ai pas réussi. Peut-être que cet effort échouera également, mais je n'ai jamais été aussi sûr de mon choix. Laissez-moi vous expliquer pourquoi !

Le site personnel ​

À première vue, la création d'un site personnel semble simple. Si simple que c'était mon premier projet significatif il y a 5 ans, esteban-s-website, avec Express.js tout en apprenant Node.js.

Par la suite, j'ai expérimenté avec Nuxt 2, esteban-soubiran.site/tree/v2, puis Nuxt 3, esteban-soubiran.site, mais il me manquait toujours quelque chose. Je n'étais jamais satisfait du résultat, et l'utiliser n'était pas agréable. S'il n'y a pas de plaisir, il n'y a pas d'élan pour le maintenir. Alors, quel est l'intérêt d'avoir un site personnel ?

Je veux être fier de mon site et le partager avec tout le monde, mais ces tentatives étaient clairement l'opposé de ce que j'avais envisionné.

Histoire ​

Créer un site personnel est plus compliqué que je ne le pensais initialement.

Tout au long du processus d'apprentissage et de création de sites Web, j'ai connu une croissance significative, tant dans mes besoins et mes compétences que dans mon appréciation pour différentes approches.

Au départ, je visais à construire un site avec une base de données, un éditeur de markdown et une authentification, comme on le voit dans les tutoriels et de nombreux sites. Mais pourquoi cherchais-je quelque chose d'aussi complexe ? Pour apprendre et écrire des articles. Finalement, j'ai acquis beaucoup de connaissances mais je n'ai jamais publié d'articles, car déployer quelque chose de cette complexité était intimidant pour un débutant. Et j'étais un débutant.

Pour le prochain site de blog, je me suis interrogé sur mon intention de créer un site personnel. C'est bénéfique pour le CV et cela sert de plateforme pour tester de nouvelles technologies. C'est exactement ce que j'ai fait. J'ai exploré Nuxt 2 quand j'apprenais à son sujet. Pour cette deuxième tentative, je n'avais jamais envisagé d'écrire des articles.

Finalement, je comptais écrire un tutoriel sur Adonis 5 mais je n'avais nulle part où le partager. J'ai fini par le publier sur dev.to. Je n'étais pas satisfait. L'expérience était insatisfaisante, et je manquais d'une sauvegarde de mon travail.

Plusieurs mois plus tard, j'ai décidé de rénover mon site Web depuis zéro en utilisant Nuxt 3. Inclure une section d'articles était prévu, mais expérimenter de nouvelles fonctionnalités est resté l'objectif principal.

Et aujourd'hui, je suis de retour, reconstruisant une fois de plus mon site personnel. Le temps passe, mais maintenant, je sais exactement ce que je veux.

Même si c'est le même projet, le contexte et mes besoins ont évolué au point que cela ressemble à un nouveau départ.

Besoins ​

La première nécessité est un blog. Je veux la capacité de créer et de publier du contenu sans effort. Ma méthode préférée est d'écrire en markdown dans mon éditeur de texte. J'apprécie cette expérience grâce à des plugins qui améliorent mes compétences en écriture.

Ce markdown doit être personnalisable pour incorporer des composants uniques et une syntaxe étendue, similaire aux alertes GitHub.

Je désire un blog qui nécessite peu de maintenance. Moins il faut d'efforts pour publier un article, mieux c'est. Je ne veux pas mettre à jour continuellement mon site à cause de vulnérabilités de sécurité ou de mises à jour de packages. Moins de dépendances me laisse plus de temps pour me concentrer sur l'écriture.

Je veux générer un flux RSS et une image Open Graph pour chaque article. Je veux que cette procédure soit simple et automatique lors de la publication d'un article. L'outil doit être extensible pour les améliorations futures.

Le point crucial est que je veux me concentrer sur le contenu, pas sur le code.

Outils ​

Je suis familier avec la création de sites Web en utilisant WordPress, Adonis, Astro, Nuxt et Vite avec Vue.

Compte tenu de mes besoins, WordPress et Adonis ne sont pas des choix optimaux. Je ne souhaite pas maintenir un serveur et une base de données. Bien qu'Adonis offre une méthode pour générer un site statique, il n'est pas documenté. Je ne veux pas consacrer de temps à cela.

Nuxt avec le plugin Content est une option viable, mais au cours de l'année passée, j'ai développé de nombreux sites avec cette pile. L'expérience développeur du plugin Content est insatisfaisante. Elle ralentit considérablement le serveur de développement (jusqu'à 30 secondes pour démarrer) et le temps de construction (jusqu'à 2 minutes), et nécessite trop de maintenance. Je ne souhaite plus l'utiliser pour ce type de projet.

Astro est un choix adapté. C'est rapide et prêt à l'emploi. La seule préoccupation est qu'il pourrait offrir trop de fonctionnalités. J'ai peur de perdre le fil, et configurer le module de contenu est quelque chose que je préfère éviter.

Créer un projet personnalisé avec Vite et Vue est une autre option solide, me permettant d'explorer les plugins de Vite. Cette technologie alimente le site d'Anthony Fu, fournissant un exemple fiable à suivre.

J'ai décidé de construire mon prochain site en utilisant un projet personnalisé avec Vite et Vue. Cela me permet d'avoir le plus de contrôle possible sur le projet, de le garder minimal et d'avoir tout l'écosystème Vue à ma disposition.

C'est le plan. Ou du moins, je le pensais.

Choix final ​

Trois jours après avoir choisi et commencé le développement de mon site, j'ai utilisé VitePress au travail pour documenter un ensemble de fonctions. C'était un plaisir à utiliser, mais le modèle par défaut est orienté documentation. Je ne voulais pas que mon site personnel ressemble à un site de documentation.

Deux jours plus tard, Evan You a annoncé VitePress 1.0 et a déclaré :

Découvrez pourquoi nous le considérons comme l'une des meilleures façons de construire des sites statiques (pas seulement pour la documentation !)

Cela a piqué ma curiosité. J'ai lu l'intégralité de la documentation et j'ai réalisé qu'elle correspond parfaitement à mes besoins.

La réalité derrière VitePress ​

En essence, VitePress est un outil qui traite des fichiers Markdown pour créer des routes et les rendre en HTML. Rien de plus. L'aspect documentation n'est qu'un thème, une couche sur ce noyau puissant avec un routage basé sur des fichiers, un parsing markdown, des hooks, un chargement de données au moment de la construction et SSG. Vous pouvez facilement créer votre propre thème sur ce noyau puissant et maintenable.

En résumé, je peux tirer parti de ce noyau robuste pour construire mon site personnel avec un thème personnalisé créé en Vue.js. Idéal pour l'extensibilité et la personnalisation tout en ayant une base solide autour du contenu.

C'est précisément ce que je prévois de faire. Essentiellement, ce noyau est ce que j'avais l'intention de créer avec la pile Vite et Vue. Avec VitePress, c'est une seule dépendance, prête à l'emploi, bien documentée, maintenue, et avec une communauté, me permettant de me concentrer sur le contenu dès le départ. Créer un thème est simple car c'est purement esthétique. La fonctionnalité de base est déjà établie. Je peux commencer à écrire maintenant tout en prenant le temps de créer un thème et d'ajouter des fonctionnalités au besoin.

Je compte garder ce blog aussi minimal que possible, et avec VitePress, composer du contenu et déployer est maintenant facilité.

Je recommande vivement d'essayer VitePress, malgré son image de constructeur de documentation. C'est vraiment impressionnant et dépasse les attentes. 📖