Déployer un portfolio avec simplicité avec Nuxt, NuxtContent et GitLab Pages

Salut,

Je m'appelle Vincent PECQUERIE, je suis un vrai passionné de technologie. Au fil de ces années, j'ai eu le privilège de travailler sur des projets diversifiés, affinant ainsi mes compétences et développant une certaine expertise dans le domaine du développement logiciel.

Ma passion pour la tech ne se limite pas simplement à la rédaction de lignes de code; je suis un éternel curieux à la découverte de nouvelles technologies, à l'affût d'optimisation techniques, d'outils ou de méthodologies me permettant de produire des applications et des systèmes fiables, performants et sécurisés. En complément, en tant que Lead Développeur, j'ai également pour mission d'accompagner mes équipes à développer une approche collaborative, innovante et à se surpasser.

Dans cet article, je souhaite partager avec vous les coulisses de la construction de la dernière version de ce site web. En utilisant des technologies telles que Nuxt et NuxtContent, j'ai conçu une plateforme qui offre une expérience de développement fluide tout en simplifiant considérablement le processus de mise à jour du contenu.

L'ensemble du projet a été hébergé de manière transparente grâce à GitLab Pages, pour un hébergement à faible coût et en toute simplicité.

Technologies utilisés

Avant de commencer, l'idée de ce projet est de créer une Single Page Application avec des technologies que je n'ai pas l'habitude d'utiliser. Au cours de ma carrière, j'ai principalement utilisé Angular, c'est pourquoi, je souhaitais partir sur un autre framework front pour découvrir de nouvelles technologies.

Après une analyse des principaux framework javascript modernes, j'ai décidé de tester Vue.js, et j'ai rapidement trouvé le framework Nuxt qui complète Vue.js.

Nuxt

Qu'est-ce que Nuxt.js ?

Nuxt.js est un framework web basé sur Vue.js, conçu pour simplifier le développement d'applications web modernes. En tirant parti de l'architecture Vue.js, Nuxt offre des fonctionnalités avancées (SSR, SSG, Routage, ...) tout en facilitant le processus de création d'applications robustes et performantes.

Quels Avantages pour mon Projet ?

• Routage Automatique : Nuxt simplifie le routage en analysant automatiquement la structure des dossiers, éliminant ainsi la nécessité d'une configuration manuelle.
• Rendu Côté Serveur (SSR) : Avec le rendu côté serveur, mon site pourrait bénéficié d'une performance accrue, d'une meilleure indexation par les moteurs de recherche et d'une expérience utilisateur plus rapide.
• Pré-rendu Statique : Toutefois, Nuxt propose également la génération de site statique, offrant une flexibilité totale pour les sites avec un contenu moins fréquemment mis à jour et me permet de déployer celui-ci sur un hébergement de contenu static comme Gitlab Pages par exemple.

Un Exemple Concret ?

Imaginons que je souhaite créer une nouvelle section sur mon site, mettant en avant des projets open source. Avec Nuxt, je crée simplement un nouveau fichier Vue.js dans mon dossier pages et c'est prêt. Une "page" nuxt n'étant qu'un simple composant Vue.js avec quelques propriétés pour le SEO.

La création d'un projet est très simple en une ligne de commande on y arrive (sous réserve d'avoir Node.js d'installé):

npx nuxi@latest init <project-name>

NuxtContent

Une fois mon site en place avec Nuxt, j'ai cherché une structure me permettant de rédiger simplement du contenu. C'est tout naturellement que je suis tombé sur le projet NuxtContent.

Qu'est-ce que NuxtContent ?

NuxtContent est une extension puissante de Nuxt.js, spécialement conçue pour faciliter la gestion du contenu dans les applications web.

L'Objectif dans mon Projet : Simplicité et Flexibilité

Mon objectif principal avec l'utilisation de NuxtContent était de rendre la création, la modification et la publication de contenu aussi simples que possible. Pour y parvenir, NuxtContent propose une approche basée sur des fichiers Markdown, ce qui signifie que chaque page ou article devient une entité autonome, facile à comprendre et à gérer.

Quels Avantages pour mon Projet ?

• Facilité de Rédaction: Grâce à la syntaxe Markdown, je peux rédiger des contenus rapides sans me soucier de la structure HTML. Une structure plus proche de l'homme pour un résultat plus rapide.
• Structuration Intuitive: La structure des fichiers et dossiers me permet intuitivement de retrouver les éléments que je souhaite travailler.
• Gestion Dynamique: NuxtContent permet une gestion dynamique des pages, ce qui signifie que l'ajout d'un nouvel article se fait aussi simplement que la création d'un nouveau fichier Markdown.
• Pas de BDD/API: NuxtContent se repose sur des fichiers Markdown, je n'ai donc pas besoin de mettre en place une infrastructure comprenant une base de données et tous les coûts que cela peut représenter (humains et matériels).

Un Exemple Concret ?

Imaginons que je veuille ajouter un nouvel article à propos d'une technologie émergente. Grâce à NuxtContent, je crée simplement un nouveau fichier Markdown avec le contenu de l'article et au prochain déploiement, le site est mis à jour automatiquement. Pas besoin de manipulations complexes ni de processus laborieux. En intégrant NuxtContent dans mon projet, j'ai véritablement constaté une simplification notable de la gestion du contenu, me permettant de me concentrer davantage sur la création de contenus pertinents et de qualité.

Pour l'installer, c'est très simple, une dépendance à ajouter:

npm install @nuxt/content --save

Puis, il suffit de créer nos fichier Markdown dans un dossier /content.

---
title: Mon article
---
Bienvenue sur cet article!

Ensuite, il suffit sur notre composant Vue.js de faire une requête avec NuxtContent pour obtenir l'article que l'on souhaite:

<template>
  <ContentRenderer :value="article" />
</template>

<script lang="ts" setup>
    const { locale, t } = useI18n({
        useScope: 'local'
    })

    const route = useRoute()
    const result = await useAsyncData('article', () =>
        queryContent(`/${locale.value}/articles`)
            .sort({date: -1})
            .where({
                slug: route.params.slug
            })
            .findOne()
    );
    const article = result.data;
</script>

Déploiement

L'autre facette de ce projet, c'est la simplicité de mise à jour. Il était important de ne pas passer un temps fou à déployer un nouvel article, de ne pas devoir développer pendant des jours pour avoir un back office complet, ...

GitLab Pages

GitLab Pages est la solution d'hébergement de GitLab qui permet de publier rapidement et facilement des sites web statiques directement depuis les dépôts Git. Il offre une intégration étroite avec les pipelines CI/CD de GitLab, ce qui simplifie le processus de déploiement.

Quels Avantages pour mon Projet ?

• Déploiement Automatisé : Grâce aux pipelines CI/CD de GitLab, chaque modification du code déclenche automatiquement le processus de déploiement, garantissant des mises à jour rapides et cohérentes.
• Hébergement Intégré : L'intégration transparente entre GitLab et GitLab Pages simplifie la configuration de l'hébergement et la gestion des versions de mon site web.
• Contrôle de Version Intégré : GitLab offre un contrôle de version complet, me permettant de suivre les changements, de revenir à des versions antérieures si nécessaire, et de collaborer efficacement avec d'autres développeurs.

Un Exemple Concret ?

Lorsque je pousse une modification sur la branche principale de mon dépôt GitLab, le pipeline CI/CD est déclenché automatiquement. Grâce à GitLab Pages, la nouvelle version de mon site est déployée de manière transparente, garantissant que les utilisateurs voient toujours la version la plus récente. En intégrant GitLab et GitLab Pages dans mon projet, j'ai pu automatiser le processus de déploiement, assurant ainsi une gestion efficace des versions et un hébergement fiable. Cela m'a permis de me concentrer davantage sur le développement de fonctionnalités plutôt que sur des tâches opérationnelles fastidieuses.

image: node:lts
before_script:
  - npm ci
pages:
  script:
    - npm run generate
    # Petite astuce : Gitlab Pages se base sur un dossier `public` 
    # Il faut donc le suppriemr et déplacer le build dans la CI/CD. 
    - rm -rf public
    - mv .output/public public
  artifacts:
    paths:
      - public
  rules:
    - if: $CI_COMMIT_REF_NAME == $CI_DEFAULT_BRANCH

Après cette modification, dès que vous pousserez des éléments sur votre dépôt GIT, une nouvelle version sera déployé sur Gitlab Pages au travers de Gitlab CI/CD. Gain de temps assuré !

Conclusion

En résumé, l'utilisation de Nuxt, NuxtContent et GitLab Pages a transformé la création et la maintenance de mon site web. La simplicité de NuxtContent et la puissance de GitLab ont créé une synergie qui facilite le développement, le déploiement et la gestion du contenu tout en réduisant mes coûts d'hébergement et de maintenance un combo gagnant sur tous les plans !

Cette aventure de développement n'est qu'un exemple de la manière dont des outils bien choisis peuvent rendre le processus plus fluide et agréable. J'espère que ces insights vous inspireront à explorer ces technologies dans vos propres projets et à continuer à construire des expériences en ligne exceptionnelles.

Liens Utiles:

• Code source de mon site sur Gitlab
• Débuter avec Nuxt
• Débuter avec NuxtContent
• Documentation officielle Gitlab CI/CD

Merci de m'avoir suivi dans cette exploration. À bientôt pour de nouvelles découvertes et développements !