Vue normale

Il y a de nouveaux articles disponibles, cliquez pour rafraîchir la page.
À partir d’avant-hierFlux principal

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

Résumé des épisodes précédents

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

Dans les deux premiers billets de cette série, nous avons vu comment créer notre bucket de base, configurer notre nom de domaine, et manipuler rapidement Hugo.

Dans ce dernier billet de la série, nous allons donc passer à l'étape manquante : le déploiement.

Automatiser le déploiement sur Scaleway

Créer un utilisateur API

Nous allons commencer par créer un utilisateur API sur la console Scaleway.

Pour cela, rendez-vous sur le menu en haut à droite, puis "Identifiants"

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

Cliquez ensuite sur "Générer une nouvelle clé API", puis donnez-lui un nom.

Copiez de suite les identifiants, il ne sera pas possible de les récupérer ensuite!

Préparer la clé dans le repository

Dans votre repository Github, rendez-vous dans "Settings", puis "Secrets"

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

Nous allons créer deux secrets :

  • AWS_ACCESS_KEY_ID: qui porte la clé publique
  • AWS_SECRET_ACCESS_KEY : qui porte la clé privée

Ces secrets ne sont pas récupérables directement, à part par votre pipeline de déploiement.

Préparer la configuration S3 pour Scaleway

Scaleway exploitant le standard S3 d'AWS, nous allons utiliser la ligne de commande d'Amazon pour pousser sur S3.

Toutefois, nous aurons besoin de configurer le client pour qu'il pointe vers scaleway au lieu d'AWS.

La configuration nécessaire est décrite sur la documentation officielle de Scaleway :

Using Object Storage with the AWS-CLI
This page explains how to use Scaleway Object Storage with AWS-CLI.
Un blog Hugo sur Scaleway avec Github et Github actions - Partie 3/3Scaleway Documentation
Un blog Hugo sur Scaleway avec Github et Github actions - Partie 3/3

Pour ma part, j'ai donc créé un répertoire aws à la racine de mon repository, qui a simplement un fichier config avec le contenu suivant :

[plugins]
cli_legacy_plugin_path = /home/runner/.local/lib/python3.8/site-packages
endpoint = awscli_plugin_endpoint

[default]
region = fr-par
s3 =
  endpoint_url = https://s3.fr-par.scw.cloud
  signature_version = s3v4
  max_concurrent_requests = 3
  max_queue_size = 1000
  multipart_threshold = 5000MB
  multipart_chunksize = 1000MB
s3api =
  endpoint_url = https://s3.fr-par.scw.cloud
retries =
  max_attempts = 20

Préparer notre pipeline Github actions

Enfin, nous allons préparer un fichier de configuration pour notre pipeline, c'est ce dernier qui se chargera de livrer chaque modification sur notre bucket.

Pour ce faire, nous allons créer le fichier .github/workflows/deploy/yml, dans lequel nous allons mettre le contenu suivant :

name: CI
on:
  push:
    branches: [ main ]
  pull_request:
    branches: [ main ]

  workflow_dispatch:
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2

      - name: Install Hugo engine
        run: sudo apt update && sudo apt install -y hugo unzip python3-pip

      - name: Install Aws CLI v2
        run: |
          curl "https://awscli.amazonaws.com/awscli-exe-linux-x86_64.zip" -o "/tmp/awscliv2.zip"
          cd /tmp
          unzip awscliv2.zip
          sudo ./aws/install --update
          cd -

      - name: Install awscli_plugin_endpoint
        run: pip3 install awscli_plugin_endpoint && pip3 show awscli_plugin_endpoint

      - name: copy ScaleWay AWS CLI configuration
        run: |
          mkdir ~/.aws
          cp ./aws/config ~/.aws/config

      - name: Compile items
        run: hugo -D

      - name: Push to Scaleway storage
        env:
          AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
          AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
        run: /usr/local/bin/aws s3 sync --delete ./public/ s3://demo-hugo.tferdinand.net/

Ce fichier indique plusieurs informations :

  • Nous ne voulons lancer le pipeline que lors d'un commit sur master, ou le merge d'une branche sur le master
  • Nous allons utiliser une image docker Ubuntu pour effectuer le déploiement
  • Nous avons un déploiement en plusieurs étapes

Concernant ces étapes nous avons donc :

  • Le checkout du code : nous indiquons que nous voulons que le code de notre repository soit rapatrié (c'est mieux pour l'utiliser)
  • Ensuite, nous installons via apt : Hugo, unzip, et pip. Ces derniers sont peut être déjà présents, mais ça ne coûte rien de s'en assurer
  • Après, nous déployons le client AWS V2, comme le point précédent, il est peut être déjà là, mais ça ne coûte rien.
  • Nous installons ensuite le plug-in nécessaire pour surcharger le endpoint S3 vers Scaleway
  • Nous déployons notre configuration AWS
  • Nous lançons la compilation du site avec Hugo, il nous générera les fichiers HTML statiques dans le répertoire "public"
  • Enfin, nous poussons le site sur S3, l'option --delete permettant de supprimer les fichiers qui ne sont éventuellement plus présents

Let's rock!

Maintenant que tout est prêt, il est temps de faire un gros push vers Github.

Si vous allez sur l'interface, dans l'onglet "actions" vous devriez voir votre pipeline tourner.

En quelques minutes, il devrait avoir fini :

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

Et si vous allez sur votre bucket sur Scaleway, vos objets sont bien présents :

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

Enfin, si nous retournons sur notre record DNS que nous avions créé plus tôt, nous avons bien notre site qui s'affiche :

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

En conclusion

Hugo est un outil puissant

Dans ce billet, je n'ai fait que survoler Hugo. Si vous voulez en savoir plus, je vous encourage vivement à visiter la documentation du projet, qui a le mérite d'être très accessible.

Hugo Documentation
Hugo is the world’s fastest static website engine. It’s written in Go (aka Golang) and developed by bep, spf13 and friends.
Un blog Hugo sur Scaleway avec Github et Github actions - Partie 3/3News
Un blog Hugo sur Scaleway avec Github et Github actions - Partie 3/3

Scaleway vous permet de commencer un blog sans prendre de risque

Le stockage objet de scaleway est adapté si vous voulez commencer un blog sans prendre de risque.

En effet, il ne coûte rien, et vous permet d'avoir un service de qualité sans avoir besoin de passer du temps à le maintenir en fonctionnement.

De plus, cela vous permet d'héberger vos données en France, par un acteur français!

Github simplifie les choses

J'ai fait le choix de Github pour ce billet, mais j'aurais pu aller jusqu'au Github pages, qui permettent aussi d'héberger du contenu statique. J'ai choisi de mettre Scaleway comme point final, car je voulais montrer qu'on pouvait aussi héberger en France sans avoir plus de difficultés.

Ces billets sont une base

Comme je l'ai dit plusieurs fois, ces billets sont une simple base, beaucoup de choses sont améliorables, et beaucoup de chemins alternatifs sont possibles.

Le but est simplement de montrer une solution, fonctionnelle de bout en bout.

N'hésitez pas à réagir dans les commentaires si vous voyez des points à améliorer!

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

Résumé de l'épisode précédent

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

Dans mon billet précédent, nous avons créer le socle nécessaire pour recevoir notre code et notre site terminé.

Si vous ne l'avez pas lu, vous pouvez le retrouver ici:

Un blog Hugo sur Scaleway avec Github et Github actions - Partie 1/3
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 retro…
Un blog Hugo sur Scaleway avec Github et Github actions - Partie 2/3TFerdinand.netTeddy FERDINAND
Un blog Hugo sur Scaleway avec Github et Github actions - Partie 2/3

Cette semaine, nous allons passer à Hugo. Nous allons voir comment l'utiliser de manière très basique pour créer notre blog, et nous créerons le repository Github qui hébergera le code de notre blog.

Passons à Hugo

Créer un repository Github

Pour ce billet, j'ai choisi d'héberger le contenu sur Github, rien n'empêche de l'héberger ailleurs.

L'intérêt de Github est multiple :

  • Hugo repose sur des fichiers "descriptifs" très légers
  • Github permet d'historiser
  • Github permet de sauvegarder
  • C'est simple de gérer les accès pour gérer un blog à plusieurs par exemple
  • Il est possible d'avoir un process de revue (automatisé ou non) avant la publication

Donc, nous allons donc créer un repository Github, que vous pouvez mettre en public ou privé selon ce que vous préférez.

Ce repository portera donc notre "code Hugo" ainsi que le pipeline de déploiement, puisque comme je l'ai dit plus haut, j'utiliserai Github actions pour le déploiement et les mises à jour de mon blog.

Initialiser mon blog

Sur mon ordinateur, je vais donc cloner mon repository tout beau tout neuf, puis je vais installer Hugo.

Pour cela, je vous invite à consulter la documentation officielle à ce propos, qui vous permettra de choisir la solution la plus adaptée à votre besoin.

Install Hugo
Install Hugo on macOS, Windows, Linux, OpenBSD, FreeBSD, and on any machine where the Go compiler tool chain can run.
Un blog Hugo sur Scaleway avec Github et Github actions - Partie 2/3News
Un blog Hugo sur Scaleway avec Github et Github actions - Partie 2/3

Une fois le blog installé, je vais donc initialiser mon blog, depuis mon répertoire Github, je vais donc lancer :

hugo new site --force .

Le --force est nécessaire, car nous ne sommes pas forcément dans un répertoire vide (si vous avez choisi de mettre un readme par exemple).

À ce point, vous avez normalement un certain nombre de fichiers qui se sont créés dans votre répertoire.

ted@kali:/home/ted/dev/hugo-demo# ls -l
total 0
drwxrwxrwx 1 ted ted 512 Dec 22 17:17 archetypes
drwxrwxrwx 1 ted ted 512 Dec 22 19:23 aws
-rwxrwxrwx 1 ted ted 123 Dec 22 17:34 config.toml
drwxrwxrwx 1 ted ted 512 Dec 22 17:18 content
drwxrwxrwx 1 ted ted 512 Dec 22 17:17 data
drwxrwxrwx 1 ted ted 512 Dec 22 17:17 layouts
drwxrwxrwx 1 ted ted 512 Dec 22 17:17 public
-rwxrwxrwx 1 ted ted  11 Dec 22 19:11 README.md
drwxrwxrwx 1 ted ted 512 Dec 22 17:17 resources
drwxrwxrwx 1 ted ted 512 Dec 22 17:17 static
drwxrwxrwx 1 ted ted 512 Dec 22 19:47 themes

À noter qu'Hugo est un moteur, il vient nativement sans aucun theming.

Nous allons donc en ajouter un. Pour cette démo, j'ai choisi un thème très basique, listed, disponible sur Github.

De nombreux autres thèmes sont disponibles via des sites tiers comme Jamstack par exemple :

Hugo Themes
Browse Hugo themes, starters and templates.
Un blog Hugo sur Scaleway avec Github et Github actions - Partie 2/3Jamstack Themes
Un blog Hugo sur Scaleway avec Github et Github actions - Partie 2/3

Donc, nous allons cloner notre thème, puis l'activer :

git submodule add https://github.com/ronv/listed.git themes/listed
echo theme = \"listed\" >> config.toml

Ensuite, je vous invite à modifier le fichier config.toml à la racine pour renseigner les informations qui vous correspondent (notamment l'URL racine du site).

À titre d'exemple voici le mien :

baseURL = "https://demo-hugo.tferdinand.net/"
languageCode = "fr-FR"
title = "Hugo Demo - TFerdinand.net"
theme = "listed"

Créer notre premier billet

Si l'on fait un blog, c'est pour avoir du contenu. Nous allons donc de suite créer un premier billet avec une simple commande :

 hugo new posts/my-first-post.md

Avec cette commande, nous indiquons que nous allons créer un post qui s'appellera "my-first-post".

Vous noterez l'extension : Hugo fonctionne avec des posts écrits en markdown. Si vous n'êtes pas à l'aise avec ce templating, il existe de nombreuse "cheat sheet" pour vous aider, comme :

Markdown Cheat Sheet | Markdown Guide
A quick reference to the Markdown syntax.
Un blog Hugo sur Scaleway avec Github et Github actions - Partie 2/3Markdown Guide
Un blog Hugo sur Scaleway avec Github et Github actions - Partie 2/3

Ensuite, vous pouvez éditer votre post, qui se trouvera dans ./content/posts/my-first-post.md

Voici par exemple les informations que j'y ai mises.

À noter que le premier bloc entre les tirets en haut correspond aux métadatas de votre billet.

Avant de fermer votre éditeur, n'oublier pas de changer la variable draft de true à false, sans quoi votre billet ne sera pas publié.

---
title: "My First Post"
date: 2021-12-22T17:23:34+01:00
draft: false
toc: false
images:
tags:
  - untagged
---

Hello friend!

As you can see, we use **markdown** to create a simple blog

```python
#!/usr/bin/env python3
# We can use every markdown blocks

works = True
if works:
        print "You're the best!"
```

Vous pouvez tester le rendu en lançant la commande suivante :

hugo server -D

qui devrait vous donner le résultat suivant :

ted@kali:/home/ted/dev/hugo-demo# hugo server -D

                   | EN
+------------------+----+
  Pages            | 12
  Paginator pages  |  0
  Non-page files   |  0
  Static files     |  3
  Processed images |  0
  Aliases          |  4
  Sitemaps         |  1
  Cleaned          |  0

Total in 75 ms
Watching for changes in /mnt/d/dev/hugo-demo/{content,data,layouts,static,themes}
Watching for config changes in /mnt/d/dev/hugo-demo/config.toml, /mnt/d/dev/hugo-demo/themes/listed/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

À partir de là, vous pouvez vous rendre sur http://127.0.0.1:1313 pour voir votre blog tourner.

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

Maintenant, c'est bien joli, mais vous n'allez pas faire se connecter les utilisateurs sur votre PC!

A suivre au prochain épisode

Dans les deux premiers billets, nous avons vu comment créer notre bucket qui servira notre site, ainsi que le domaine associé, puis nous avons commencé à manipuler Hugo.

Dans le billet final, nous mettrons en place le nécessaire pour automatiser le déploiement et avoir un blog en haute disponibilité, automatisé, sauvegardé à moindre coût.

Rendez-vous pour le grand final!

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

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”
Un blog Hugo sur Scaleway avec Github et Github actions - Partie 1/3TFerdinand.netTeddy FERDINAND
Un blog Hugo sur Scaleway avec Github et Github actions - Partie 1/3

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.

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

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!

Un blog Hugo sur Scaleway avec Github et Github actions - Partie 1/3
⚠️
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!
Un blog Hugo sur Scaleway avec Github et Github actions - Partie 1/3

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
Un blog Hugo sur Scaleway avec Github et Github actions - Partie 1/3News
Un blog Hugo sur Scaleway avec Github et Github actions - Partie 1/3

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 :

Un blog Hugo sur Scaleway avec Github et Github actions - Partie 1/3
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
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

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

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

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

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 :

Un blog Hugo sur Scaleway avec Github et Github actions - Partie 1/3
⚠️
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
Un blog Hugo sur Scaleway avec Github et Github actions - Partie 1/3

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.

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

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

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

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.

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

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.

❌
❌