Créer un site statique

Depuis de nombreuses années, j’utilisais wordpress pour publier du contenu sur internet.
J’ai découvert il y a peu le JamStack et le principe de la création des sites statiques.
Ce mode de publication et d’hébergement était plus en accord avec mes besoins et j’ai décidé de passer tous mes sites wordpress en statique.
Je vous présente ici ma démarche, en espérant qu’elle vous servira.

1. Quel est le principe des sites statiques et du JamStack ?
2. Pourquoi créer un site statique ?
3. Comment créer un site statique ?
4. Mes choix pour la génération de sites statiques.

1. Quel est le principe des sites statiques et du JamStack ?

Un site statique est le site le plus simple que l’on puisse créer, mais aussi le plus rapide. Les pages sont toutes en HTML “basique”.
Lorsqu’un utilisateur fait une requête sur un site statique, le serveur lui retourne directement la page demandée en HTML sans avoir à construire quoi que ce soit.
Cette solution est séduisante, pour les sites n’ayant pas besoin de s’adapter à l’utilisateur.
En gros si vous fournissez un contenu informatif, le contenu sera le même pour tous les utilisateurs. Il n’est donc pas nécessaire de générer une page personnalisée à partir du PHP ou d’un autre langage, sur le serveur comme c’est le cas avec WordPress.
Le problème de cette stratégie statique apparaît lors de la création de nouveaux contenu. Il faut ajouter de nouvelle pages HTML, modifier les menus, etc. Au final, il faudrait changer tout le site “à la main” à chaque mise à jour.
C’est là que le JamStack entre en jeu.

Mais qu’est-ce que le JamStack ?

Commençons par le Stack :

Stack se rapporte à un ensemble d’outils de programmation et de langages cohérents pour la création, la publication et l’exploitation d’application web.
Trois Stack sont déjà popularisé:

• le full stack ou en gros vous vous “démerdez” seul pour le frontend et le backend. Il faut maîtriser tous les langages et les technologies des deux côtés de la rogrammation Web.
• le MEAN stack correspondant à l’emploie de MongoDB, Express.js, Angular et Node.js.
• le MERN stack correspondant à l’emploie de MongoDB, Express.js, React.js et Node.js.

Quand à Jam, c’est l’acronyme de :

• J pour Javascript, le langage de programmation utilisé côté client et serveur.
• A pour Api, l’interface de programmation côté client et serveur.
• M pour Makeup, la création de la vue en HTML.

Le JamStack est donc un système de développemement de pages HTML grâce au JavaScript et à une ou plusieurs API.

Concrètement comment tout cela va-t-il se mettre en place ?

• Tout d’abord les pages de contenus sont créées en local, sur l’ordinateur. En général, la mise en forme se fait en MarkDown.
• Un générateur de contenu statique va se charger de la génération du site statique et permet aussi de visualiser les “brouillons” sur un serveur local.
• Enfin, le site pourra être uploadé sur un serveur ou beaucoup mieux mis à jour grâce à Git, github et l’API d’un site d’hébergement spécialisé dans les sites statiques.

Nous verrons dans la partie 3 et 4, toutes les étapes de la création jusqu’à l’hébergement sur Netlify par exemple, pour que vous puissiez construire.

2. Pourquoi créer un site statique ?

Pourquoi passer un site en statique alors que mon blog WordPress me satisfaisait pleinement ?

Il y a quatre raisons qui m’ont motivé à passer mes blogs WordPress en sites statiques :

• La première raison et qui n’est pas la moindre, c’est le prix. Depuis quelques années le prix des hébergements avec base de données et PHP n’a cessé d’augmenter. C’était devenu un gouffre financier.
  Initialement j’étais sur 1and1 qui est devenu Ionos et là, les problèmes ont commencé. Les modalités du contrat étaient changées sans mon accord, des options inutiles m’étaient imposées, bref les méthodes de marketting d’Ionos ne me plaisaient pas du tout et cela commençait à me coûter très cher.
  Ce petit règlement de compte avec mon ancien usurier étant fait, voyons la raison suivante.
• La secondes raison, est la rapidité. Les sites statiques délivrant directement des pages HTML et on ne peut pas faire plus rapide en terme temps de chargement de page. Et la vitesse de chargement s’avère un point crucial du référencement et de l’UX , l’expérience utilisateur.
• La troisième raison de ce changement est la simplicité de mise en place, d’utilisation et de mise à jour. Le site est directement accessible sur l’ordinateur ou sur une clé USB. Il faut se faire à la syntaxe MarkDown, mais une fois ce petit cap franchi, la rédaction se trouve même simplifiée, notamment pour la coloration syntaxique des codes informatiques.
• La quatrième raison est la sécurité. Le site étant statique, il ne peut pas être corrompu par un utilisateur malveillant. Seule une attaque sur l’hébergeur, qui a priori est plus solide que vous, est possible. Si cela venait à se produire, vous aurez toujours un double dde votre site en local et la réinstallation est un jeu d’enfant.

Dans ce monde idyllique, il existe aussi des points négatifs. Comme le dirait Lapalisse, un site statique est statique et donc pas dynamique. Il n’est donc pas possible, a priori d’interagir avec les utilisateurs grâce aux commentaires ou de faire un site de e-commerce.
Cette vision est un peu réductrice, car on peut toujours déléguer certaines fonctionnalités dynamiques à des opérateurs extérieurs.
Par exemples :

• Pour les commentaires, on peut par exemple déléguer cette tâches à “Disqus”, un site permettant d’intégrer des commentaires sur n’importe quel site. Disqus propose une offre de démarrage gratuite.
• Pour le e-commerce, il existe de nombreux sytstèmes comme “click-Funnel”. Ce site est déjà très utilisés par les Webmarketteurs qui pourtant sont sur Worpress. Tant qu’à payer des outils externes, autant ne pas payer les options inutiles de l’hébergement.

Je sens que je vous ai convaincu, si bien sûr vous avez eu le courage de me lire jusqu’ici.
Mais alors comment passer mes sites en statiques ?

3. Comment créer un site statique ?

Pour créer un site statique, il existe plusieurs solutions de générateurs dépendanr du langage utilisés.
Le premier générateur de site statique était écrit en Ruby (une communauté toujours très innovante). C’est donc le plus populaire mais depuis d’autres solutions peut-être plus performantes ou plus accessibles sont apparues écrites dans divers langages Golang, React.js, Vue.js, python, etc…

Ce choix est important si vous souhaitez modifier un thème prédéfini ou créer le votre. Selon vos connaissances du langage ou de l’environnement, les modifications seront plus ou moins simple à réaliser. Il faut savoir aussi que certains générateurs proposent de très nombreux thèmes qu’il suffit de configurer d’autres en proposent peu ou pas et c’est à vous de mettre les mains dans le cambouis.

Voici une liste non exaustives de quelques générateurs :

• Jekyll : écrit en ruby avec de nombreux thèmes tous près. Assez rapide lors de la génération. Très populaire.
• Hugo : écrit en Golang, le langage de google. De nombreux thèmes. Le plus rapide des générateurs. Devenu très populaire.
• Eleventy : nouveau venu qui monte, écrit en JavaScript et node. Il faut se l’approprier.
• Gridsome : un générateur écrit en Vue.js.
• Hexo : écrit en Javascript. Rapide. De nombreux thèmes simples d’emploi.
• Gatsby : un générateur en réact.js. Le générateur est maintenant intégré à un système d’hébergement.
• Next.js : un framework de ReactJs qui permet de faire de la génération de pages statiques. Très intéressant pour le référencement des applications Web écrites en RéactJs. Ce framework est conçu pour un hébergement sur Vercel
• Pelican : Un générateur pour les utilsateurs de python. Il y a peu de thèmes, mais les possibilités sont nombreuses.

La mise en place se fait de la manière suivante :

• Après avoir fait votre choix, il faut installer le générateur de site (souvent avec npm ou yarn) et créer un site.
• Ensuite on choisit un thème, on l’installe et on e configure. Vous pouvez bien sûr créer le thème vous même, mais ceal prendra plus de temps et demandera des compétences en la matière.
• Il faut ensuite générer votre contenu. Certains modules permettent de tranfsformer la base de données d’un site Wordpress directement en fichier statiques utilisables par votre générateur de site. Cette méthode de conversion marche pas mal, mais il faudra néanmoins retoucher tous les liens des images pour qu’ils soient valides. Il est aussi possible de se servir de wordpress comme site headless, la vue étant générée séparément.
• Le site peut ensuite être générer directement sur votre ordinateur puis chargé sur le serveur, mais ce n’est peut-être pas la meilleur manière de procéder. Il est préférable d’utiliser l’API d’un site dédié à l’hébergement de sites statiques comme Netlify. Le principe est de créer un repository sur github et de lier son compte à github au site d’hébergement. Grâce à git on crée un “commit” puis on “push” sur le répository de github et le site se met automatiquement à jour, grâce à l’API entre github et le site d’hébergement.

Si ce que je vous raconte ne vous parle pas, sachez que ce n’est pas compliqué du tout. Je ferai un tutoriel sur ce sujet dans un prochain article. Pour les utilisateurs de git, ça doit leur parler.

Voici une série d’hébergeurs de sites spécialisés dans l’hébergement statique :

• Netlify : le pionnier et le plus populaire. Vraiment top.
• cloudflare : un nouveau venu dans le domaine qui promet beaucoup.
• Vercel : créé à la base pour NextJs, mais peut servir à d’autres hébergements
• Firebase : même si ce n’est pas sa fonction première, Firebase permet l’hébergement statique avec une API ad hoc.

4. Mes choix pour la génération de sites statiques.

Lorsque j’ai décidé de passer en statique, je voulais aller pour passer de wordpress au statique. J’ai donc fait de nombreux tests et essais.
Dans un premier temps, j’avais opté pour Hugo, rapide avec de nombreux thèmes, mais les modifications sur les thèmes étaient trop obscurs pour moi.
J’ai finalement choisi Hexo. Ce générateur fonctionne bien, est simple et rapide, et propose de nombreux thèmes, qui grâce aux informations du webdesigner son facile à configurer.
Voilà déjà de nombreux mois que je l’utilise et j’en suis très content.
Pour l’hébergement, je suis sur Netlify. Très simple d’utilisation. Avevec la mise à jour via git et github, c’est le top.
Je vous partagerai mon expérience dans d’autres articles à venir, dans lesquels je rentrerai davantage dans la pratique, mais l’article est déjà assez long comme cela.

A bientôt.