Les sites statiques sont de plus en plus à la mode (même si je suis un peu en retard je sais) et moi-même j’ai succombé et j’ai migré mon Wordpress vers du statique.

Dans cet article je vais expliquer comment initialiser un site simple sous Hugo et le déployer sur Netlify.

Netlify

Netlify est une plateforme qui permet de déployer des applications/sites “statiques” très simplement. Netlify propose pas mal d’options pour vos projets (fonctions Lambda, authentification, formulaires, …) afin que vous n’ayez à vous soucier que de vos développements.

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 blog sur lequel vous êtes actuellement.

Allez jeter un oeil à Netlify, ils proposent des formules gratuites pour les développeurs ou petites structures.

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:

krustyhack@Unknown:~/$ 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.

Initialisez Hugo:

krustyhack@Unknown:~/demo-nicolashug-dev$ 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.

krustyhack@Unknown:~/demo-nicolashug-dev$ 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 1168
Ré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 ocmpilation depuis Netlify (vu que Hugo a besoin d’un dossier content existant pour compiler) :

krustyhack@Unknown:~/demo-nicolashug-dev$ hugo new content/post/hello.md
/home/krustyhack/demo-nicolashug-dev/content/post/hello.md created

Puis on test :

krustyhack@Unknown:~/demo-nicolashug-dev$ hugo server

                   | EN
+------------------+----+
  Pages            |  7
  Paginator pages  |  0
  Non-page files   |  0
  Static files     | 16
  Processed images |  0
  Aliases          |  0
  Sitemaps         |  1
  Cleaned          |  0

Total in 40 ms
Watching for changes in /home/krustyhack/demo-nicolashug-dev/{content,data,layouts,static,themes}
Watching for config changes in /home/krustyhack/demo-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.