Netlify est une plateforme qui permet de déployer des sites statiques très simplement. Netlify propose pas mal d’options pour vos projets (fonctions serverless, authentification, formulaires, …) afin de vous simplifier la vie.
La plateforme peut-être utilisée pour de multiples types de projets (applications Angular, sites statiques, …) mais dans cet article je ferais la démonstration du déploiement de mon ancien blog.
Allez jeter un oeil à Netlify, ils proposent des formules gratuites pour les développeurs ou petites structures.
Warning
Ce contenu date un peu, il est possible que les éléments présentés aient changés depuis.
Préparations générales
Pour ce projet il nous faut :
un hébergement pour nos fichiers générés
un repository genre Gitlab, GitHub ou BitBucket
un générateur de sites statiques
Pour l’hébergement j’ai pris la formule gratuite de Netlify, pour le repo j’ai opté pour Gitlab en gratuit également et pour le générateur j’utilise Hugo qui je trouve fait très bien son job. Je vous invite à checker le site officiel pour plus d’infos.
Création du site sous Hugo
Créez un repo sur Gitlab. Ici je vais utiliser https://gitlab.com/KrustyHack/demo-nicolashug-dev. Désactivez l’Auto Devops qui ne nous servira à rien. Mettez votre repo en privé si vous le voulez. Clonez-le en local:
➜ git clone git@gitlab.com:KrustyHack/demo-nicolashug-dev.git && cd demo-nicolashug-dev/Clonage dans 'demo-nicolashug-dev'...warning: Vous semblez avoir cloné un dépôt vide.
Congratulations! Your new Hugo site is created in /home/krustyhack/demo-nicolashug-dev.
Just a few more steps and you're ready to go:
1. Download a theme into the same-named folder. Choose a theme from https://themes.gohugo.io/, or create your own with the "hugo new theme
➜ hugo newsite.--forceCongratulations! Your newHugo site iscreated in /home/krustyhack/demo-nicolashug-dev.Just a few more steps and you're ready to go:1. Download a theme into the same-named folder. Choose a theme from https://themes.gohugo.io/, or create your own with the "hugo new theme <THEMENAME>" command.2. Perhaps you want to add some content. You can add single files with "hugo new <SECTIONNAME>/<FILENAME>.<FORMAT>".3. Start the built-in live server via "hugo server".Visit https://gohugo.io/ for quickstart guide and full documentation.
Super, on a donc un skeleton Hugo. On va lui ajouter un thème et un peu de contenu, histoire qu’on ai quelque chose à voir une fois publié sur Netlify.
Modifiez le config.toml à la racine du projet pour activer le thème :
baseURL ="http://example.org/"languageCode ="en-us"title ="My New Hugo Site"theme ="simpleit-hugo-theme"
On ajoute un contenu dummy pour plus tard, sinon Hugo va claquer une erreur lors de la compilation depuis Netlify (vu que Hugo a besoin d’un dossier content existant pour compiler) :
➜ hugo newcontent/post/hello.md/home/krustyhack/demo-nicolashug-dev/content/post/hello.md created
Puis on test :
➜ hugo serveStart building sites …hugo v0.109.0+extended linux/amd64 BuildDate=unknownWARN 2023/01/1920:46:23 found no layout file for"HTML"for kind "home": You should create a template file which matches Hugo Layouts Lookup Rules for this combination.WARN 2023/01/1920:46:23 found no layout file for"HTML"for kind "taxonomy": You should create a template file which matches Hugo Layouts Lookup Rules for this combination.WARN 2023/01/1920:46:23 found no layout file for"HTML"for kind "taxonomy": You should create a template file which matches Hugo Layouts Lookup Rules for this combination.| EN-------------------+----- Pages |3 Paginator pages |0 Non-page files |0Static files |1 Processed images |0 Aliases |0 Sitemaps |1 Cleaned |0Built in 1 msWatching for changes in /tmp/www.nicolashug.dev/{archetypes,assets,content,data,layouts,static}Watching for config changes in /tmp/www.nicolashug.dev/config.tomlEnvironment: "development"Serving pages from memoryRunning in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRenderWeb Server isavailable at http://localhost:1313/ (bind address 127.0.0.1)Press Ctrl+C to stop
On a donc maintenant une base “saine” à déployer. On commit le tout et on push sur Gitlab pour sauvegarder notre travail, avant de passer à la suite.
Déployer sur Netlify
On va créer un nouveau site sur Netlify : https://app.netlify.com/start. Choisissez Gitlab, GitHub ou BitBucket selon où est votre repo.
Sélectionnez le repo de votre projet, chez moi ce sera KrustyHack/demo-nicolashug-dev et paramétrez Netlify comme ci-dessous :
On clique sur Deploy site et on attend. A la fin on devrait avoir une url disponible en haut de la page du projet (https://flamboyant-clarke-4a77b3.netlify.com/ par exemple). Cliquez dessus et… magie ! Votre site est déployé !
Mettre à jour
Pour ça rien de plus simple, faites vos modifications sur votre repo, pushez et Netlify va automatiquement pull les modifications et rebuild votre projet. Vous pouvez également paramétrer des règles selon les branches, les environnements, … Pour ça, je vous laisse voir la documentation Netlify.
Ce tutorial se voulait très simpliste pour vous montrer la base des possibilité qu’offre ce genre de système. Pour ma part, même si je suis sysadmin, je me dégage au maximum de tout ce qui me rattache à de la maintenance serveur ou autre. J’utilise de plus en plus le Serverless, les Cloud Functions, Angular, Firebase, Netlify, … pour me focaliser sur ce que je produis et non comment je le produis.
