Blog Nuxt.js

Créer un blog statique avec Nuxt.js et des fichiers Markdown

J’ai décidé de créer un blog technique entièrement statique, sans base de données, en utilisant Nuxt.js avec des fichiers Markdown comme source de contenu. L’objectif : une solution légère, rapide, facile à maintenir et déployable sur n’importe quel hébergeur.

Pourquoi ce choix ?

• Je voulais une solution simple, sans CMS ni backend
• Je voulais écrire mes articles en Markdown pour plus de contrôle
• Nuxt 3 offre un excellent support pour le rendu statique et l’intégration Markdown via @nuxt/content

Technologies utilisées

• Nuxt.js 3 (framework Vue moderne)
• @nuxt/content pour lire les fichiers .md
• Tailwind CSS pour le style

Structure du projet

Voici une vue simplifiée de l’arborescence :

/blog
├── content/
│   ├── index.md
│   ├── articles/
│   │   ├── projet-serveur.md
│   │   ├── virtualisation-proxmox.md
├── pages/
│   └── index.vue
├── nuxt.config.ts
└── components/
    └── ArticleCard.vue

Écriture d’un article

Chaque article est un simple fichier Markdown avec un en-tête YAML pour les métadonnées :

---
title: "Mon serveur personnel avec Plex et OwnCloud"
description: "Un retour d’expérience sur l’auto-hébergement"
date: 2024-10-15
---

Contenu de l’article ici...

Rendu automatique

Grâce à @nuxt/content, les pages sont générées dynamiquement. Exemple de composant pour afficher une liste d’articles :

Déploiement

Pour publier le site :

• Génération des pages avec nuxi generate
• Upload des fichiers sur un hébergement statique (FTP ou GitLab Pages)
• Intégration continue possible avec GitHub Actions

Ce projet m’a permis d’allier la puissance de Vue avec la simplicité des fichiers Markdown, tout en gardant un contrôle total sur la structure du site et son design. C’est une excellente solution pour tous ceux qui veulent un blog rapide, moderne et maintenable.