Les sites Web statiques sont géniaux ! Mais qu’est-ce qu’un site Web statique ? C’est simple : c’est un site Web construit uniquement avec HTML, CSS et JS sans aucun serveur derrière (mais capable de communiquer avec une API via des requêtes Ajax). Cependant, il est inutile de perdre du temps à expliquer ce qu’est un site Web statique et pourquoi c’est important, il existe suffisamment d’infos à ce sujet sur le web.

Prérequis

  • Connaissance de base de ES6
  • Connaissance de base deVueJS (nous recommandons auxdébutants et même aux plusexpérimentés d’acquérir ces bases)
  • Connaissance de base deGraphQL (Consultezce site pour ceux qui ne sont pas familiers avec GraphQL)

VueJS est surdimensionné pour les sites statiques

Oui, c’est vrai, vous pouvez démarrer un site web statique sans aucun outil, il suffit de télécharger un fichier html sur votre serveur et le tour est joué. Mais il y aura des problèmes auxquels vous serez confrontés tôt ou tard :

  • Nouvelle utilisation ou réutilisation
  • Structure
  • Maintenance

Avec VueJS, il est très facile de se connecter avec les API, de gérer les états, les animations et bien d’autres choses encore.

Le SEO (Référencement naturel) et la performance

Si vous êtes nouveau dans le monde de VueJS et des sites Web statiques, nous supposons que c’est la première question que vous allez vous poser : effectivement il peut y avoir des problèmes de SEO en utilisant uniquement VueJS du côté client. Pour résoudre ces problèmes, le site web sera généré en amont avecNuxtJS et ensuite téléchargé sur notre serveur. Cela signifie que nous aurons des fichiers HTML simples sur le serveur. Et nous affirmons qu’il n’y aura pas de problème de performance si vous le faites correctement. L’utilisateur verra d’abord les fichiers HTML pré-générés et tous les fichiers JS, y compris VueJS et quelques autres qui seront chargés ensuite.

Mise en place de votre projet

Pour démarrer votre projet, nous utiliserons simplement le modèle de démarrage de NuxtJS. Vous trouverez des précisions utiles sur la mise en place de ce modèle dans ladocumentation de NuxtJS, mais nous allons les évoquer rapidement.

Vous devrez d’abord installervue-cli si ce n’est pas déjà fait. Ensuite, nous allons initier votre projet en utilisant le modèle de démarrage et le vue-cli avec  $ vue init nuxt-community/starter-template <project-name>

Exemple de projet configuré avec NuxtJS

Ensuite vous devrez vous connecter à votre projet et exécuter npm install . En utilisant npm run dev  vous pourrez déjà démarrer un serveur de développement et ouvrir votre projet dans le navigateur.

Super ! C’est la première partie. Avec npm run generate  vous pouvez maintenant créer un site statique fait avec VueJS ! C’est très facile.

Gérer le contenu

Maintenant la question est : « Comment puis-je gérer le contenu ? » ou même « Comment mes clients pourront-ils gérer le contenu ? »  Jusqu’à aujourd’hui, la plupart des créateurs de sites statiques vous obligent à modifier votre contenu sur la base de fichiers plats. Cela signifie que vous avez un répertoire de contenu à l’intérieur de votre projet source dans lequel se trouve des fichiers, comme des fichiers markdown ou autres. Nous ne sommes pas vraiment fans de ça. Effectivement c’est utile pour vous en tant que développeur mais vous ne pouvez pas donner ça à un client. En effet le format Markdown n’est pas très facile à utiliser pour les personnes qui ne sont pas des techniciens et il n’y a pas de validation du contenu ou d’équivalent. La solution est un CMS headless.


Un CMS headless, c’est quoi ?

Un CMS headless est simplement un système découplé. Cela signifie que vous pouvez interroger le contenu via une API comme REST ou GraphQL. Et cela signifie aussi que vous pouvez utiliser presque n’importe quel framework front-end et même diffuser tout votre front-end via un CDN en ayant toujours accès au même contenu. Vous pouvez également interroger les mêmes données à partir d’un site web et d’une application pour smartphone en même temps. Faites des recherches et vous verrez que le marché des CMS headless est en plein essor, ce n’est pas pour rien.

Nous vous présentons doncDatoCMS ! Un CMS qui nous a vraiment plu car il fournit uneGraphQL API très simple à utiliser.

Préparez vos contenus sur DatoCMS

Il ne s’agit pas ici d’un tutoriel détaillé sur l’utilisation de DatoCMS, car le site dispose d’une excellente documentation à ce sujet, mais nous allons le parcourir rapidement. Si vous vous connectez à votre dashboard, vous verrez que la barre d’état en haut est divisée en « Content, Médias et Settings ». Allez dans « Settings > Models, create a new model » puis « Post ».

Ensuite, vous avez besoin de champs pour gérer votre contenu. Ajoutons-les.

Pour cet exemple, nous allons ajouter un titre (single line string), un texte (multi line string) et un « slug » (single line string)

Ensuite, rendez vous dansAPI explorer of DatoCMS  qui utilise GraphiQL. Collez votre clé API en lecture seule et voilà. Si vous ne connaissez pas GraphQL, vous pouvez taper des accolades et cliquer sur  CTRL+Space  pour obtenir des suggestions automatiques des champs que vous pouvez interroger à partir de la base de données.

Ce dont nous avons besoin ici est « allPosts » et « post ». Nous vous montrerons les requêtes exactes plus tard. Pour le moment vous choisissez  allPosts  et si vous saisissez vos champs, vous verrez un écran semblable à celui-ci.

allPosts  affiche un tableau vide. Pourquoi ? Tout simplement parce que nous n’avons pas créé de texte ! Pour corriger cela, allez dans l’onglet « Content » de votre barre d’état et créez un nouveau texte (Add Post).

N’oubliez pas d’enregistrer votre texte ! Retournez ensuite dans l’explorateur d’API et appuyez sur  CTRL+Enter  pour rafraîchir votre requête. Vous verrez alors votre premier texte !

Transférer le contenu dans vos fichiers statiques

Question suivante : Comment recevoir le contenu de DatoCMS et l’utiliser dans notre application NuxtJS ? Nous avons besoin deApollo pour requêter une API GraphQL ! Heureusement, il existe aussi uneNuxtJS plugin pour Apollo. Pour installer ce module, vous devez d’abord l’ajouter à votre projet avec  npm install –save @nuxtjs/apollo. Ensuite vous devez enregistrer le plugin dans  nuxt.config.js.

modules: [

@nuxtjs/apollo‘,

],

et ensuite le configurer (dans le même fichier) :

apollo: {

clientConfigs: {

default: {

httpEndpoint: ’https://graphql.datocms.com’,

getAuth: () => ‘Bearer XXXXXXXXXXXXXXXX’

},

}

},

Important: vous devez remplacer XXXXXXXXXXXXXXXX  par la clé API de DatoCMS. Vous pouvez l’obtenir sous « Settings > Site Settings > API Tokens ».

Exécution de requêtes sur une page

OK ! Tout est installé mais nous n’avons toujours pas de contenu dans notre page. Créons deux fichiers dans notre répertoire  pages/blog. Le premier sera  index.vue  qui listera tous les textes de blog que nous avons créés et le second sera appelé  _slug.vue  qui comprendra une seule page du détail des textes du blog.  L’ index.vue ressemblera grosso modo à ceci :

Voyons rapidement de quoi il s’agit : apollo  sera configuré comme notre propriété dans  VueComponent. Nous récupérons tous les messages avec la syntaxe de requête  graphql-tag et pour chaque texte, nous interrogeons les champs  title , text  et  slug. Nous aurons besoin du « slug » pour naviguer vers un seul texte de blog.

Voyons maintenant la page détaillée d’un texte de blog qui est un peu plus complexe, car nous devons trouver le bon texte dans notre base de données.

Est-ce que vous voyez la différence ? Notre propriété Apollo est maintenant divisée en une requête, un  query , un  prefetch  et une propriété  variables . Dans la  query  nous définissons le  $slug  comme une variable à passer dans le paramètre de  filter . Ce  $slug  provient des  variables  (côté client) et de  prefetch  (côté serveur lors de la génération des fichiers). Ces méthodes récupèrent le slug  à partir des paramètres de notre routeur. Si c’est du chinois pour vous,  vous pouvez jetez un oeil à larouter documentation of NuxtJS

Déploiement automatique de notre nouveau contenu

Maintenant vous allez peut-être vous demander : « je dois lancer  nuxt generate à chaque fois que je mets à jour du contenu, et télécharger sans arrêt les fichiers sur mon serveur ? ». Bien sûr, vous pouvez le faire, mais nous recommandons plutôt de mettre en place un Continuous Deployment Pipeline (pipeline de déploiement continu) pour le faire automatiquement. Ce n’est pas évident à faire, mais avec DatoCMS vous avez une intégration  Netlify incluse.

Vous voyez le petit bouton « build site » (construire le site) en haut à droite ? Cliquez sur ce bouton lorsque vous avez fini de modifier votre contenu, et votre site web sera automatiquement reconstruit sur Netlify. De plus, votre site sera généré à nouveau à chaque fois que vous le demanderez !

Le mot de la fin

Si vous possédez des connaissances en ES6, VueJS et GraphQL, vous pouvez alors développer votre propre site web statique sans trop de difficulté. Le fonctionnement demeure relativement simple puisqu’il est basé principalement sur du HTML, CSS et JS, ce qui est à la portée de tout développeur web de nos jours. Ainsi, il s’agit d’une excellente solution pour toute personne ou entreprise ayant un besoin de création de site internet !

Agily vous accompagne dans le développement de votre site web en vous faisant bénéficier de son expérience avec VueJS, un CMS headless et GraphQL. Vous avez une question? Un projet ? Contactez-nous dès maintenant !

Tous
Business
Jamstack
NodeJS
React Native
Développement Web & Mobile
Flutter
Mobile
Python
Strapi
Wordpress
UX/UI Design
Headless
Process business
Outils

Articles de la même catégorie

Refonte de site internet : améliorer son tunnel de conversion

5 conseils pour augmenter son taux de conversion lors de la refonte de votre site internet

Découvrez nos 5 conseils pratiques à appliquer lors de la refonte de votre site web pour augmenter votre taux de conversion !...
Express JS

Express JS : tout ce que vous devez savoir

Découvrez Express JS, le framework basé sur Node.js pour construire des backend puissants....
Angular vs React : que choisir ?

Angular vs React : que choisir pour votre entreprise ?

Vous hésitez entre Angular vs React pour développer votre site web d'entreprise ? Découvrez notre comparatif !...