Guide du débutant –

Supposons que votre prochain projet sera un simple site Web HTML pour un CV, la commercialisation d’un produit ou d’un service, la documentation de votre logiciel ou quelque chose du genre. Une excellente option pour vous consiste à créer votre site Web à l'aide de générateurs de sites statiques (SSG).

Il existe une multitude de générateurs de sites statiques dans une gamme de langages de programmation, tels que JavaScript, Ruby, Go – la liste s'allonge.

Dans cet article, je vais énumérer cinq générateurs de sites statiques populaires et leurs fonctionnalités principales, afin que vous puissiez vous faire une meilleure idée de celui qui, parmi eux, conviendrait le mieux à votre projet.

Je n’affirme pas que j’ai fourni la liste définitive des SSG ou que je suis personnellement en faveur d’un logiciel que j’inclus dans ma liste plutôt que de tout autre logiciel disponible. Cependant, tous les produits de la liste sont populaires, performants, bien documentés et bien pris en charge.

Que sont les générateurs de site statiques?

Un CMS (système de gestion de contenu) commun, tel que WordPress par exemple, construit la page Web de manière dynamique à la demande du client: il assemble toutes les données de la base de données et traite le contenu via un moteur de template.

D’un autre côté, un générateur de site statique:

adopte une approche différente et génère toutes les pages du site Web une fois lorsque le site a été modifié. Cela signifie qu’il n’ya aucune pièce mobile dans le site Web déployé. La mise en cache devient beaucoup plus facile, les performances augmentent et les sites statiques sont beaucoup plus sécurisés. – StaticGen .

Si vous êtes curieux et souhaitez en savoir plus, ce grand article de Brian Rinaldi examine de près le fonctionnement interne des générateurs de sites statiques.

Passons maintenant à quelques options.

1. Hugo

Hugo est un générateur de sites statiques très populaire avec plus de 32 000 étoiles actuellement sur GitHub. Il est écrit en Go et se présente comme le framework le plus rapide pour la construction de sites Web. En fait, Hugo est livré avec un processus de création rapide, ce qui facilite grandement la création de sites Web statiques et convient parfaitement aux blogs contenant de nombreux articles.

La documentation est excellente et le site Web de Hugo propose un fantastique guide de démarrage rapide . le logiciel est opérationnel en un rien de temps.

Voici certaines des meilleures fonctionnalités de Hugo :

• Conçu et optimisé pour la vitesse: en règle générale, chaque élément de contenu rend dans environ 1 milliseconde
• Inutile d'installer des plug-ins supplémentaires pour des tâches telles que la pagination, la redirection, plusieurs types de contenu, etc.
• Système de thèmes riches
• Des codes courts sont disponibles au lieu d'utiliser Markdown
• depuis juillet 2018, Hugo propose un puissant portefeuille d’actifs, Hugo Pipes .

2. Next.js

Next est un cadre polyvalent pour la création d'applications JavaScript rendues par le serveur ou exportées de manière statique. Il est construit sur React et est créé par Zeit .

Pour installer Next, exécutez la commande suivante dans votre terminal:

     npm install --save next react react-dom

Ajoutez ensuite ce script à votre fichier package.json :

     {
      "scripts": {
       "dev": "next",
       "build": "next build",
       "start": "next start"
      }
    }

Avec cela en place, chaque fichier .js devient un itinéraire qui est traité et rendu automatiquement.

Next.js propose d'excellents documents permettant d'en savoir plus sur la création et la personnalisation de vos applications Next.

Voici quelques éléments que Next est très doué pour:

• Next s'affiche sur le serveur par défaut, ce qui est excellent pour les performances. Pour une discussion sur les avantages et les inconvénients du rendu côté serveur, consultez cet article de Alex Grigoryan sur Medium
• . Aucune installation requise: découpage automatique du code, routage et rechargement à chaud [5]. 19659017] Extensibilité: n'hésitez pas à personnaliser votre configuration en prenant le contrôle de Webpack et Babel, du routage et des plugins
• Des grands docs pour démarrer et fonctionner en toute simplicité du débutant à l'utilisateur avancé
• Plug-ins officiel et communautaire disponibles
• Des tonnes de exemples d'applications pour vous aider à démarrer.

3. Gatsby

Gatsby fonctionne très bien pour la documentation et les blogs, il est construit en réaction et tire profit de de GraphQL pour manipuler des données. Si vous êtes curieux et que vous voulez aller plus loin, consultez Comment construire votre site statique avec Gatsby et les docs sur le site Web de Gatsby.

Voici quelques-uns des points forts de Gatsby. points:

• Gatsby vous permet de travailler avec les dernières technologies Web. React, Webpack, JS moderne, CSS, etc. prêts à coder votre site
• Le riche écosystème de plug-ins de Gatsby vous permet d'utiliser n'importe quel type de données de votre choix parmi une ou plusieurs sources
• Déploiement et évolutivité faciles , ce qui est principalement dû au fait que Gatsby construit des pages statiques, qui ne nécessitent pas de configuration compliquée
• Gatsby est un générateur de Progressive Web Apps (PWA). «Vous obtenez du code et des données fractionnées prêtes à l'emploi. Gatsby ne charge que le code HTML, CSS, les données et JavaScript critiques afin que votre site se charge le plus rapidement possible. Une fois chargé, Gatsby préfète les ressources pour les autres pages. Un clic sur le site est donc incroyablement rapide. ”( Site Web de Gatsby )
• De nombreux sites de démarrage sont à votre disposition pour que vous puissiez les saisir librement et les personnaliser.

notre tutoriel qui vous montre comment construire votre premier site statique avec Gatsby .

4. Nuxt.js

Nuxt.js est un framework de niveau supérieur construit avec Vue.js qui vous permet de construire la production- applications web prêtes. Avec Nuxt, vous pouvez choisir entre:

• Le rendu côté serveur de votre site Web, également appelé mode universel ou isomorphe . Nuxt utilise un serveur de nœud pour fournir du code HTML basé sur les composants Vue
• Génération de site statique. Avec Nuxt, vous pouvez créer des sites Web statiques à partir de votre application Vue
• Applications de page unique (SPA). Nuxt vous donne la configuration et le cadre pour construire votre SPA basé sur Vue.

La création de sites Web basée sur Nuxt peut être réalisée très rapidement. Voici l'exemple Hello World sur le site Web de Nuxt. Vous pouvez le télécharger sur votre ordinateur ou le jouer sur Codesandbox pour commencer.

Voici quelques fonctionnalités de Nuxt.js:

• Des performances exceptionnelles: les applications basées sur Nuxt sont optimisées prêtes à l'emploi
• Modular: Nuxt est construit en utilisant une structure modulaire puissante. Vous pouvez choisir parmi plus de 50 modules pour accélérer votre expérience de développement
• Courbe d'apprentissage relativement facile. Nuxt est basé sur Vue, un framework qui facilite et accélère le démarrage
• Gestion intégrée de l'état avec Vuex
• Fractionnement automatique du code
• ES6 / ES7 Transpilation
• Regroupement et minification de JS & CSS
• Gestion de l'élément (etc.)
• Pré-processeur: Sass, Less, Stylus, etc.

5. VuePress

VuePress est un générateur de site statique alimenté par Vue. Son thème par défaut est optimisé pour la rédaction de documents techniques. Il fonctionne donc parfaitement pour ce type de site, dès la sortie de la boîte.

Un site VuePress fonctionne comme une application à page unique (SPA) qui exploite la puissance de Vue, Vue Router et Webpack.

Pour installer VuePress globalement, exécutez cette commande dans votre terminal:

     npm install -g vuepress

Ensuite, pour créer un fichier de démarques, exécutez:

     echo '# Hello VuePress'> README.md

Pour commencer à écrire, lancez:

     vuepress dev

Pour créer votre site, exécutez:

     vuepress build

Voici quelques fonctionnalités intéressantes offertes par VuePress:

• La configuration de votre site basé sur VuePress est rapide et vous pouvez rédiger votre contenu à l'aide de Markdown
• VuePress est construit sur Vue, ce qui vous permet de expérience Web de Vue, Webpack, possibilité d'utiliser des composants Vue dans des fichiers Markdown et de développer des thèmes personnalisés avec Vue
• Expérience de chargement rapide: les sites statiques VuePress sont constitués de HTML pré-rendu et sont ensuite exécutés en tant que SPA. chargé dans le navigateur
• Prise en charge multilingue par défaut avec i18n. L'installation d'autres langues est également assez simple en ajoutant un objet local au fichier themeConfig dans le projet config.js de votre projet VuePress.

Nuxt .js ou VuePress?

Nuxt.js et VuePress sont construits au-dessus de Vue.js et vous permettent de créer des sites Web statiques. Alors, lequel est-ce qui doit être préféré à l’autre?

Disons que Nuxt.js peut faire tout ce que VuePress fait. Cependant, Nuxt est essentiellement adapté aux applications de construction. En revanche, VuePress est idéal pour créer des sites Web de documentation statique qui affichent du contenu écrit dans Markdown. Une discussion sur le dépôt GitHub du projet est en cours en vue de rendre VuePress également adapté aux sites de blogs riches en fonctionnalités . Pour en savoir plus sur la configuration d'un blog simple avec VuePress, reportez-vous à la section Création d'un blog avec VuePress de Adam Collier.

En résumé, si tout ce dont vous avez besoin est un site de documentation ou un blog très simple dans Vue.js, envisagez de demander l’affichage de VuePress – Nuxt serait excessif.

Comment choisir un générateur de site statique

Avec les options disponibles, il est facile de se sentir paralysé quand il s’agit de choisir un générateur de site statique qui convient à la situation. Certaines considérations pourraient vous aider à mieux comprendre ce qui vous est proposé.

Les exigences de votre projet devraient mettre en lumière les caractéristiques que vous devriez rechercher dans votre SSG.

Si votre projet a besoin de nombreuses fonctionnalités dynamiques prêtes à l'emploi, Hugo et Gatsby pourraient constituer un bon choix. En ce qui concerne le temps de construction et de déploiement, tous les SSG répertoriés ci-dessus fonctionnent très bien, bien que Hugo semble être le favori, surtout si votre site Web contient beaucoup de contenu.

Votre projet est-il un blog ou un site web personnel? Dans ce cas, Hugo et Gatsby pourraient constituer un excellent choix, tandis que pour un simple site de documentation, VuePress conviendrait parfaitement. Si vous planifiez un site Web de commerce électronique, vous voudrez peut-être déterminer quel type de groupe de sécurité est compatible avec un système de gestion de contenu sans tête pour la gestion des magasins. Dans ce cas, Gatsby et Nuxt pourraient très bien fonctionner.

Une autre chose à considérer est votre connaissance de chacun des langages SSG. Si vous programmez en Go, Hugo est probablement votre choix préféré. Quant aux options restantes, elles sont construites sur React (Next et Gatsby) ou sur Vue (Nuxt et VuePress).

En ce qui concerne des éléments tels qu'une excellente documentation, une communauté forte et un soutien, tous les générateurs de sites statiques que j'ai énumérés figurent parmi les plus populaires, ou gagnent rapidement en popularité, comme VuePress.

Avez-vous utilisé des générateurs de sites statiques pour un projet? Laquelle? Comment avez-vous aimé l'expérience?

Maria Antonietta Perna est co-éditeur du canal HTML / CSS de SitePoint et développeur web front-end. Elle aime bricoler avec les normes CSS rigoureuses et est curieuse d’apprendre des approches pédagogiques du code frontal. Lorsqu'elle ne code pas pour le Web ou n'écrit pas pour le Web, elle aime les livres de philosophie, les longues promenades et la bonne nourriture.