Créer, héberger et maintenir un site statique gratuitement

Photo of author
par KrustyHack
publié le
mis à jour le

Qu’est-ce que Netlify ?

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 [email protected].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.

Initialisez Hugo:

➜ hugo new site . --force

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 <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.

➜ git submodule add https://github.com/marcanuy/simpleit-hugo-theme.git themes/simpleit-hugo-theme
Clonage dans '/home/krustyhack/demo-nicolashug-dev/themes/simpleit-hugo-theme'...

remote: Enumerating objects: 524, done.remote: Counting objects: 100% (524/524), done.remote: Compressing objects: 100% (295/295), done.

remote: Total 1692 (delta 219), reused 378 (delta 161), pack-reused 1168Réception d'objets: 100% (1692/1692), 5.62 MiB | 2.91 MiB/s, fait.

Résolution des deltas: 100% (808/808), fait.

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 new content/post/hello.md
/home/krustyhack/demo-nicolashug-dev/content/post/hello.md created

Puis on test :

➜  hugo serve

Start building sites …
hugo v0.109.0+extended linux/amd64 BuildDate=unknown
WARN 2023/01/19 20: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/19 20: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/19 20: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   |  0
  Static files     |  1
  Processed images |  0
  Aliases          |  0
  Sitemaps         |  1
  Cleaned          |  0

Built in 1 ms
Watching for changes in /tmp/www.nicolashug.dev/{archetypes,assets,content,data,layouts,static}
Watching for config changes in /tmp/www.nicolashug.dev/config.toml
Environment: "development"
Serving pages from memory
Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
Press Ctrl+C to stop

Allez voir http://localhost:1313/, votre site généré devrait apparaître.

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.

Laisser un commentaire