Jusqu’alors, nous avons :

Maintenant nous allons voir comment déployer ces fichiers HTML sur un nom de domaine via les CDN de Netlify

Netlify, kézaco ?

Netlify est un service de déploiement et d’hébergement pour les sites web et applications web modernes. Il offre une plateforme permettant d’intégrer et d’automatiser les processus de développement web, particulièrement adaptée aux architectures Jamstack (JavaScript, API, et Markup). Voici quelques points clés pour comprendre ce qu’est Netlify et ce qu’il offre :

Principes de Base

  • Déploiement Automatisé : Netlify simplifie le processus de publication d’un site web. Il suffit de pousser votre code dans un dépôt Git (GitHub, GitLab, Bitbucket), et Netlify se charge automatiquement du déploiement et de la mise en ligne.
  • Serveurs sans Backend : Conçu principalement pour les sites statiques, Netlify sert des fichiers statiques sans nécessiter de serveur backend traditionnel.

Fonctionnalités

  • Intégration Continue (CI/CD) : Netlify intègre des outils d’intégration continue, permettant à chaque modification de code de déclencher automatiquement un nouveau déploiement.
  • Optimisation des Performances : Les sites déployés sur Netlify sont distribués sur un réseau de distribution de contenu (CDN), ce qui accélère le chargement des pages.
  • Fonctions sans Serveur (Serverless Functions) : Netlify permet d’ajouter des fonctions sans serveur, facilitant la création d’applications dynamiques sans la complexité d’une infrastructure serveur.
  • Prévisualisation des Branches : Netlify fournit des liens de prévisualisation pour chaque pull request ou branche, ce qui est idéal pour les revues de code et les tests avant la mise en production.
  • Sécurité : HTTPS est activé par défaut sur tous les sites Netlify, renforçant la sécurité des sites web.

Cas d’Usage

  • Sites Web Statiques et Jamstack : Idéal pour déployer des sites statiques, des blogs, des portfolios, et des applications web construites avec des frameworks modernes comme React, Vue, Angular, etc.
  • Développement Agile : La CI/CD intégrée et les aperçus de branches facilitent les workflows de développement agile.
  • Projets Personnels et Professionnels : Netlify est utilisé aussi bien pour des petits projets personnels que pour des sites d’entreprise à grande échelle.

Modèle Économique

  • Plans Gratuits et Payants : Netlify propose un plan gratuit avec des fonctionnalités de base, ainsi que des plans payants offrant plus de capacités, de support, et de fonctionnalités pour les entreprises.

Netlify est une plateforme puissante et flexible pour le déploiement rapide et efficace de sites web, offrant une grande variété d’outils et de fonctionnalités pour moderniser et optimiser le développement web.

Application à notre projet : déploiement des fichiers statiques du dépôt Github

1. Connexion à Netlify

  • Accéder à Netlify : Rendez-vous sur Netlify et connectez-vous. Si vous n’avez pas de compte, vous pouvez en créer un gratuitement.

2. Nouveau Site à Partir de Git

  • Créer un Nouveau Site : Sur votre tableau de bord Netlify, cliquez sur le bouton « Add new site – Import an existing project ».

3. Choix du Fournisseur de Service Git

  • Sélectionner GitHub : ensuite, choisissez votre source de dépôt (le service que vous utilisez pour héberger vos fichiers)

Puis choisissez le projet qui contient les fichiers du site dans la liste qui apparaît.

4. Configuration du Build

Choisissez la branche à déployer :

Comme il ne s’agit que de fichiers HTML, vous n’avez pas de réglages particuliers supplémentaires.

5. Déploiement du Site

Enfin cliquez sur le bouton « deploy » et attendez que le site soit déployé :

6. Site en Ligne

  • Accès au Site : Une fois le build terminé, votre site sera en ligne et accessible via une URL Netlify générée automatiquement.
  • Personnalisation de l’URL : Vous pouvez personnaliser cette URL ou configurer votre propre nom de domaine dans les paramètres du site (il suffit de suivre la documentation officielle pour cela)

7. Mises à Jour Automatiques

Mises à Jour Continues : Après le premier déploiement, chaque push sur la branche sélectionnée dans votre dépôt GitHub déclenchera automatiquement un nouveau déploiement sur Netlify.

Voir le site d’exemple réalisé pour ce projet

Conclusion

Comme nous avons fait en sorte, côté serveur, de faire un push automatique dès lors que les fichiers statiques sont générés dans le dossier synchronisé avec Github, il suffit simplement pour le ou les éditeurs du site de cliquer sur « Generate static files » une fois les mises à jour effectuées sur le site pour que tout soit poussé automatiquement sur la version publique.

Le cas des formulaires

Pour faire en sorte que les formulaires de contact fonctionnent, la solution de simplicité serait d’utiliser des API tierces comme Formspree ou FormSubmit et de configurer les formulaires créés sur le site avec les attributs imposés par ces services pour pouvoir recevoir des messages depuis le site. La solution plus complexe mais plus maitrisée consisterait à développer son propre service d’envoi de messages via JS.

Vous voulez déployer cette infra chez vous ? Demandez moi !

Je serai ravi de vous aider à développer cette infra pour vos projets, si vous désirez me contacter, envoyez moi un message ici -> alexandre(at)dkts.fr !