Générateurs de sites statiques

Les sites statiques ne contiennent pas de contenu dynamique et sont composés de fichiers statiques, tels que HTML, CSS et JavaScript, qui ne nécessitent pas de traitement côté serveur ni de base de données.

Comme les fichiers sont préconstruits, aucun traitement supplémentaire n’est nécessaire lorsqu’un utilisateur visite le site et moins de ressources sont nécessaires pour faire fonctionner le site. En l’absence de scripts ou de base de données à exploiter, la sécurité du site est également renforcée.

Avantages des générateurs de sites statiques

Si vous connaissez les langages HTML, CSS et JavaScript, vous pouvez créer un site statique à l’aide d’un éditeur de texte ou de code. Cependant, vous devez disposer des connaissances techniques nécessaires pour rédiger le contenu, ce qui peut s’avérer fastidieux et chronophage, et au fur et à mesure que votre site grandit, il peut devenir plus difficile à gérer et à entretenir.

Les générateurs de sites statiques (Static Site Generators ou SSG) offrent une option plus efficace pour construire votre site statique. Ils comprennent souvent divers outils qui facilitent la création, le style, la publication et la modification de votre contenu en fonction de vos besoins. Voici quelques-uns des principaux avantages de l’utilisation d’un générateur de site statique :

• Création de modèles : Un système de modélisation vous permet de définir la structure et la présentation de votre site web à l’aide de modèles et de composants réutilisables qui peuvent être utilisés sur plusieurs pages. Cela signifie que vous n’avez pas besoin de dupliquer ou de mettre à jour manuellement des éléments communs sur plusieurs pages. Cela permet également de séparer votre contenu de la couche de conception et de présentation, afin que vous puissiez vous concentrer sur la rédaction et la mise à jour du contenu.
• Automatisation : Si votre site comprend du contenu provenant de diverses sources, telles que des fichiers Markdown ou des fichiers de données, un générateur de site statique peut automatiser le processus de conversion de votre contenu en fichiers HTML. Des tâches telles que la minification, l’optimisation et le regroupement des ressources peuvent également être automatisées. Tout cela vous permet de gagner du temps et de réduire les risques d’erreurs, en vous permettant de créer et d’optimiser votre site sans avoir à effectuer manuellement chaque tâche.
• Contrôle des versions : Les générateurs de sites statiques s’intègrent à des systèmes de contrôle de version tels que Git, ce qui vous permet de suivre les modifications, de collaborer avec d’autres personnes et de revenir facilement à des versions antérieures si nécessaire.
• Constructions incrémentielles : Avec les constructions incrémentales, lorsque vous apportez des modifications et générez une nouvelle sortie, seuls les fichiers qui ont été modifiés depuis la dernière construction sont régénérés. De nombreux générateurs de sites statiques prennent en charge les constructions incrémentielles, ce qui permet de réduire le temps de construction des sites plus importants et des petites mises à jour.

Utilisation d’un générateur de site statique

Chaque générateur de site statique (SSG) possède ses propres fonctionnalités, configurations et systèmes de modèles, mais la configuration pour générer un site qui sera hébergé avec l’hébergement de sites statiques de Kinsta implique généralement ce qui suit :

1. Choisissez votre SSG : il existe de nombreux SSG disponibles. La première étape consiste à sélectionner celui qui répond le mieux à vos besoins. Pour construire et héberger le site avec l’hébergement de sites statiques de Kinsta, choisissez un SSG qui utilise Node.js pour le processus de construction. Vous trouverez ci-dessous une liste de SSG prêts à l’emploi chez Kinsta.
2. Mettez en place un environnement de développement local : Installez les dépendances nécessaires, y compris le SSG lui-même, les langages de programmation nécessaires et un éditeur de code.
3. Créez votre nouveau site : Dans votre SSG, créez le nouveau site. Cela génère la structure de répertoire de base et les fichiers de configuration nécessaires au projet.
4. Configuration : Définissez la configuration de votre site pour personnaliser la structure du site et la manière dont le générateur traite vos fichiers source. Ce fichier peut contenir des paramètres tels que les répertoires d’entrée et de sortie, les chemins d’accès aux modèles, les métadonnées, les configurations des extensions, etc.
5. Modélisation : Créez des modèles et des mises en page qui définissent les éléments communs et la structure de vos pages, tels que les en-têtes, les pieds de page, les menus de navigation, etc.
6. Ajouter du contenu et des ressources : Créez ou rassemblez du contenu existant à l’aide de Markdown ou d’autres formats pris en charge. Chaque page correspond généralement à un fichier dans le répertoire de contenu. Les ressources seront probablement stockées dans un répertoire distinct des fichiers de contenu.
7. Style : Modifiez le CSS ou les fichiers de pré-processeur (par exemple SASS ou LESS) pour appliquer des styles personnalisés à votre site. Certains SSG proposent également des thèmes qui peuvent être installés et personnalisés pour le style.
8. Construisez et prévisualisez localement : Exécutez la commande de compilation fournie par le SSG pour compiler votre site web. Le SSG traite vos modèles, convertit vos fichiers de contenu en HTML et génère les fichiers statiques (HTML, CSS et JavaScript). Le cas échéant, il effectuera également des tâches telles que la minification, l’optimisation et le regroupement des ressources. Utilisez ceci pour vous assurer que tout se présente et fonctionne comme prévu.
9. Créez votre dépôt Git : Utilisez Git pour créer votre dépôt, puis engagez et poussez votre nouveau site dans votre nouveau dépôt Git.
   1. Si vous allez déployer le site sur Kinsta sans exécuter la construction chez Kinsta, les fichiers que vous livrez à votre dépôt doivent être la sortie de la construction (les fichiers HTML, CSS et JavaScript).
   2. Si le site doit être construit chez Kinsta, les fichiers que vous livrez à votre dépôt doivent être le contenu, les actifs comme les images ou autres médias, et les fichiers SSG (ou les fichiers de configuration qui vont intégrer les dépendances pour la construction).

10. Déployez votre nouveau site statique : Dans MyKinsta, ajoutez un nouveau site statique et connectez-le à votre dépôt Git pour déployer votre site sur les emplacements CDN de Kinsta 260+.
11. Maintenir et mettre à jour : Au fur et à mesure que vous travaillez sur votre site, assurez-vous de suivre les meilleures pratiques de contrôle de version, de valider régulièrement les changements et de rester à jour avec les dernières versions du SSG et de ses dépendances. Cela garantit un processus de développement harmonieux et vous permet de profiter des nouvelles fonctionnalités et des corrections de bogues.

Compatibilité du générateur de site statique

L’hébergement de sites statiques de Kinsta est destiné aux sites statiques pré-construits ou aux sites construits avec des frameworks JavaScript modernes qui utilisent Node.js pour construire le site chez Kinsta. Les pages d’atterrissage, les sites de brochures et même certains petits blogs qui ne sont pas mis à jour trop souvent et qui ne nécessitent pas de contenu dynamique (comme des commentaires) conviennent généralement bien.

Si votre site répond à l’une des conditions suivantes, il sera mieux adapté à notre hébergement d’applications:

• Il utilise un langage autre que Node.js pour construire le site (par exemple, PHP).
• Il nécessite un rendu de serveur pour servir une partie ou la totalité du site.
• Il nécessite une connexion à une base de données.
• Il propose un contenu dynamique.
• Il nécessite des sessions ou une authentification gérée côté serveur.

Si vous n’êtes pas tout à fait sûr de l’hébergement qui conviendrait le mieux à votre site, nous vous recommandons de déployer votre site sur les deux types d’hébergement afin d’essayer chaque option et de déterminer celle qui répond le mieux à vos besoins.

Il existe de nombreux générateurs de sites statiques et la commande de construction et le répertoire de publication peuvent varier d’un site à l’autre. Kinsta détecte automatiquement plusieurs frameworks et remplit les champs Commande de construction et Répertoire de publication quand vous ajoutez votre site statique.

Le tableau ci-dessous indique la commande de construction et le répertoire de publication à utiliser pour certains générateurs de sites statiques populaires compatibles avec l’hébergement de sites statiques.

* Gridsome ou VuePress 1.x

Cela nécessite Node 16, ou vous pouvez ajouter ce qui suit dans le package.json pour la commande de construction :

SET NODE_ OPTIONS =--openssl- legacy -provider && vuepress build src

** Hugo

Ajoutez ce qui suit à votre projet :

npm install hugo-bin serve --save-dev

Ajoutez ou remplacez ce qui suit, en fonction de votre projet :

{
  " scripts ": {
    "build": "hugo"
  }
}

Il est courant que les thèmes Hugo recommandent une installation via un sous-module Git. Actuellement, les sous-modules ne sont pas compatibles avec l’hébergement statique ou l’hébergement d’application, de sorte que les fichiers du thème doivent être disponibles dans le dépot du site.