Nous contacter

  1. Accueil
  2. Blog
  3. Développement
  4. VuePress un générateur de site statique avec Vue

VuePress un générateur de site statique avec Vue

Le 17/04/2018

Dans Développement

Aujourd'hui le blog du web design vous propose de découvrir VuePress, un générateur de site statique reposant sur le framework VueJS.

 

Générateur de site statique

Parce qu'une petite piqûre de rappel ne fais pas de mal, un générateur de sites statiques est un outil qui vous permet de générer des pages web sans traitement côté serveur mise à part celui de servir la page. Donc contrairement à un CMS ici on n'a pas de base de donnée. Il éxiste tout un tas de générateur de sites statiques comme Jekyll, Hexo, Hugo … Mais aujourd'hui c'est bien VuePress qui nous intéresse.

Introduction à VuePress

Première étape :

 

La première étape avec VuePress c'est de l'installer (si si je vous assure ..) Pour ça rien de compliqué :

$ npm install -g vuepress

 

Deuxième étape :

 

Dans un dossier vous allez pouvoir créer un README.md :

Readme

Vous pouvez ensuite lancer vupress dev dans ce dossier, vous pouvez ensuite aller visiter l'url rendu.

Conversation

D'accord c'est bien on à une petite page, c'est bien mais si on en veut d'autres ?

Eh bien là aussi c'est tout aussi simple, il vous suffit de créer autant de fichier markdown que de page souhaité, pour ma part j'ai ajouté Page-1.md et Page-2.md qui ont le même contenu:

Page1

On obtient donc une petite pagination en bas de la page pour passer d'une page à l'autre, certes assez peu pratique pour la navigation mais c'est là !

Nav

Bon, je vous vois insatisfait de ce système de navigation .. Heureusement je peux vous proposer de rajouter une sidebar de navigation, génial non ?

Pour ce faire, à la racine de votre projet vous dans un dossier .vuepress vous allez ajouter config.js, ce dernier vas contenir :

 

Sidebar

Et le résultat est assez agréable :

Sidebarfront

Ensuite pour finir et pour ce qui donne de l'intéret à ce générateur, c'est le fait de pouvoir utiliser des composant Vue dans nos pages. Vous devez créer vos composants dans .vuepress/components

Je vais donc créer un petit compteur et l'ajouter dans ma Page: 

Compteur

Ensuite dans ma page :

Compteurinvue

Ce qui nous donne un super composant dans notre page !

Compteurimplement

Troisième étape :

 

Quand vous êtes prêt a publier votre site vous pouvez lancer, vuepress build. Le résultat va vous générer un dossier .vupress/dist minifié et builder avec Webpack !

Conclusion

Cette article ne reste qu'une petite introduction à cet outil, il reste pas mal de choses que je n'ai pas abordé. Mais il est possible de faire bien des choses avec VuePress, vous pouvez par exemple créer votre propre thème.. J'ai apprécier cet outil car je l'ai trouver extrêmement simple à prendre en main ! Une fois de plus la documentation et le github restent disponible afin de voir toutes les posssibilités qui s'offrent à vous !