Un blog Hugo sur Scaleway avec Github et Github actions - Partie 1/3

Un blog Hugo sur Scaleway avec Github et Github actions - Partie 1/3
Photo by Anete Lūsiņa / Unsplash

Héberger un blog ne demande pas forcément une énorme infrastructure et beaucoup de moyens. Il est possible de créer un blog simplement pour quelques euros par an (et encore).

Il y a quelques mois, j'avais écrit un billet indiquant l'importance de publier son contenu "chez soi", que vous pouvez retrouver ci-dessous.

Pourquoi c’est important de publier chez soi
Je vois nombre de personnes que je suis publier des contenus sur les espaces prévus sur les réseaux sociaux, ou sur des plateformes comme YouTube, TikTok, etc. Je ne pense pas que ce soit forcément une bonne idée : plutôt que de mettre en avant votre contenu à coup de “like”

Suite à ce dernier, beaucoup m'ont contacté pour me demander des exemples concrets de ce que j'entendais par là.

Aujourd'hui, je vais donc vous présenter un modèle, que vous pouvez facilement modifier ou faire évoluer pour héberger votre contenu à moindre coût. Tout en prenant en compte la haute disponibilité, les sauvegardes et le déploiement.

⚠️
Le sujet couvrant l'intégralité du déploiement, et étant de fait très long, sera découpé sur 3 billets successifs.
Dans ce premier billet, nous allons créer la base nécessaire pour héberger notre blog.

La cible

Je vais partir sur une cible assez simple.

Je veux pouvoir éditer mon blog depuis mon PC, pousser le code sur Github, et qu'il soit publier en quelques minutes.

De manière très synthétique, voici la cible.

Le seul prérequis est d'avoir un nom de domaine (et on peut s'en passer si on le souhaite).

Certains domaines ne coûtent presque rien, par exemple le ".ovh" ne coute que 3€ HT par an!

⚠️
Attention en achetant un domaine : certains revendeurs pratiquent des prix d'appels très agressifs la première année.
Par exemple, toujours chez OVH, le ".blog" est à 5,49€ la première année, mais 25,99€ les suivantes!

Hugo, c'est quoi ?

Hugo est un moteur de création de sites, open source, générant des fichiers statiques. L'intérêt premier est de ne pas nécessiter de compilation à la volée comme avec des langages interprétés (Php, Node, Python, etc.), et il n'a donc pas besoin de base de données.

Dans le cas d'un blog, c'est un modèle adapté, car nous avons du contenu qui n'a pas besoin de bouger énormément au jour le jour.

Pour plus d'information, je vous invite à vous rendre sur le site du projet !

The world’s fastest framework for building websites
The world’s fastest framework for building websites

Let's go

Maintenant que vous avez notre nom de domaine, on va commencer à préparer le socle qui va recevoir notre site.

Pour ce billet, j'ai fait le choix de le faire manuellement, mais libre à vous de l'automatiser si vous le souhaitez!

À noter que le mode d'hébergement que nous allons utiliser ne sait pas gérer le chiffrement TLS avec votre nom de domaine.

Pour cela il faut soit :

  • Que vous mettiez un reverse proxy devant
  • Que vous passiez par des solutions qui vont faire du proxy, comme Cloudflare (que j'utiliserais dans ce billet)

Première étape : Créer un compte sur Scaleway

Pour cela, il vous faut ouvrir un compte sur Scaleway. Ce compte est gratuit. Scaleway est un cloud provider d'Illiad. Pas d'inquiétude, une carte bleue vous sera demandée, mais vous n'aurez aucune facture, je peux vous l'attester :

Ma facture mensuelle, alors que Scaleway stocke tous mes backups de ce serveur (environ 40Go de données)
Scaleway Elements Console
Begin your Journey in the Public Cloud and start scaling with us

Seconde étape : Créer un bucket de stockage sur Scaleway

Ensuite, nous allons utiliser la solution de stockage d'objet de Scaleway.

Pourquoi cette solution?

  • 75Go de stockage et transfert offert tous les mois, sans limites de durée
  • Compatible S3 (nous en aurons besoin ensuite)
  • Taux de disponibilité à 99.99% (ce qui correspond à une indisponibilité maximale de 5 min par mois)
  • Possibilité d'héberger votre contenu en France
  • Cloud souverain

À noter qu'un stockage d'objet est prévu pour stocker des fichiers statiques, qui peuvent être téléchargés directement. Nous ne pouvons pas manipuler les fichiers en direct comme sur un disque dur.

Nous allons donc cliquer sur "Object storage" dans le menu "Stockage" du menu latéral gauche. Ensuite, nous allons cliquer sur le "+" en haut à droite pour créer un nouveau bucket.

Vous devriez arriver sur un masque similaire à celui-ci :

⚠️
Le nom du bucket est important, il doit porter le nom de domaine que vous souhaitez utiliser pour votre blog, sans quoi nous ne pourrons pas faire de redirection.

Dans mon cas, vous pouvez voir qu'il s'agit de "demo-hugo.tferdinand.net" que j'ai créé pour l'occasion. Vous pouvez choisir la région que vous souhaitez, pour ma part, j'ai pris la France. Pour la visibilité du bucket, vous pouvez laisser en privé, nous reviendrons indirectement dessus par la suite.

Une fois le bucket créé, cliquez sur son nom, puis allez dans l'onglet "Réglages du bucket".

La partie qui nous intéresse ici est le "bucket website". Cette fonctionnalité va nous permettre de créer un serveur web distribuant des fichiers statiques.

Nous allons donc activer la fonctionnalité, et indiquer les paramètres suivants :

  • Nom du fichier d'index : index.html
  • Nom du fichier d'erreur : 404.hmtl

Vous pouvez ensuite cliquer sur "enregistrer la configuration"

Troisième étape : configurer Cloudflare

Cloudflare est aussi un service gratuit pour une utilisation non commerciale, car nous n'avons pas forcément besoin de ses fonctionnalités avancées.

Cloudflare est d'ailleurs devant mon serveur, et vous l'utilisez actuellement!

Nous allons donc récupérer le nom de domaine de notre bucket, dont nous aurons besoin.

Ensuite, depuis l'interface de Cloudflare, nous allons créer un record DNS CNAME qui pointera vers ce bucket.

Attention, si on veut avoir du TLS, il faut bien choisir l'option "Proxied" sur Cloudflare, qui permet de surcroit d'exploiter le cache de ce CDN.

Arriver à cette étape, vous pouvez vous rendre sur votre record DNS, et si tout va bien, vous obtiendrez une jolie erreur 404.

Pas d'inquiétude, c'est normal. Actuellement, nous avons un hébergement, mais aucune donnée dessus!

To be continued

Comme je vous l'ai indiqué en préambule, ce billet est le premier d'une série de trois.

Rendez-vous au prochain billet pour dans lequel nous commencerons à manipuler légèrement Hugo et nous créerons le repository Github qui hébergera notre solution.