Le site

Oct 9, 2023 ·  4 min de lecture.

1 semaine Link to this heading

C’est le temps que passé pour pondre ce site Bien que ce soit prenant, je n’ai pas pu encore trouver de véritable méthode de travail et si je savais où trouver mes infos, j’ai découvert quelques tips pour travailler avec Hugo

Ce site est donc un site statique, je vous renvoie à cet article que j’ai écrit tah l’époque : https://site.lafun.fr/siteloweb/

Mais j’aimerais vous parler du point de vue d’un développeur comment ces projets sont un bonheur

Hugo

Le framework utilisé, Hugo, est un générateur de site a partir d’organisation de fichier et de code. En tant que dev on comprends donc très bien les mécaniques du framework pour pouvoir faire ce que l’on cherche, et le langage Go, s’il n’est pas très élégant dans la page, permet une verbosité correcte tout en reprennant des codes de la ligne de commande, on ne s’y perds donc pas

TinaCMS Link to this heading

J’ai passé près d’une semaine a trouver un CMS qui réponds aux besoins du site

Tina semble tout a fait adapté a son utilisation et a été aussi simple a mettre en place qu’un netlify ou forestry : Un fichier de config reprennant, en JSON, la structure de données du contenu et applique des propriétées sur les champs pour créer les formulaires. Vraiment du gâteau… mais ça a pris des jours pour configurer Tina dans le moule recherché.

Par exemple, sous Hugo, les fichiers sont rangés en dossiers et sous dossiers.
Une liste simple est une liste de fichier .md contenant les informations
Mais lorsque l’on veut également stocker des images ou autres contenus a chaque article créé il faut créer un dossier avec à l’intérieur un index.md. C’est nommé un branch bundle
Et pour créer un branch bundle avec Tina, il faut lui faire passer une fonction pour qu’il créer nos fichiers comme des index.md dans un dossier comprenant le titre de notre article :

typescript
 1{
 2  name: 'createurs',
 3    label: 'Createurs',
 4      path: 'content/createurs',
 5        ui: {
 6    filename: {
 7      // if disabled, the editor can not edit the filename
 8      readonly: true,
 9        // Example of using a custom slugify function
10        slugify: (values) => {
11          // Values is an object containing all the values of the form. In this case it is {title?: string, topic?: string}
12          return `${values?.title
13            ?.toLowerCase()
14            .replace(/ /g, '-') + '/index.md'}`
15        },
16          }
17  },



Déjà, cela correspondait a mon site et je pouvait éditer des articles en local, mais qu’en est-il de la version en ligne ?


Sans connaissance approfondie des modules de déploiement automatique, il a fallu écrire une Pipeline CI/CD qui correspond à l’intégration TinaCMS + Hugo

yaml
 1name: Firebase update
 2run-name: ${{ github.actor }} à lancé une update du site Meridian
 3on: 
 4  push:
 5    branches:
 6      - master
 7jobs:
 8  deploy:
 9    runs-on: ubuntu-22.04
10    concurrency:
11      group: ${{ github.workflow }}-${{ github.ref }}
12    steps:
13      - uses: actions/checkout@v3
14
15      - name: Copy images        
16        run: cp -r static/uploads/screenshots assets/images
17
18      - name: Setup Node
19        run: npm ci
20        
21      - name: Build TinaCMS
22        env:
23          TINA_PUBLIC_CLIENT_ID: ${{ secrets.TINA_PUBLIC_CLIENT_ID }}
24          TINA_TOKEN: ${{ secrets.TINA_TOKEN }}
25        run: npx tinacms build
26
27      - name: Hugo setup
28        uses: peaceiris/actions-hugo@v2
29        with:
30          hugo-version: '0.119.0'
31          extended: true
32
33      - name: Build
34        run: hugo --minify
35        
36      - uses: FirebaseExtended/action-hosting-deploy@v0
37        with:
38          repoToken: '${{ secrets.GITHUB_TOKEN }}'
39          firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_MERIDIAN_CORP }}'
40          projectId: meridian-corp
41          channelId: live

Il y a donc plusieurs choses :

  • actions/checkout@v3 permet de lire l’architecture de fichier sur github
  • copy image permet de transférer le dossier screenshots de static/uploads/screenshots vers assets/screenshots pour que Hugo puisse les récupérer en tant qu’image object, et les .resize par ex. (il ne peut pas avec le dossier static)
  • Setup Node sans quoi tina ne peut fonctionner
  • Build TinaCMS permet de créer l’administration. Il faut remplir les pré-requis donnés dans leur guide et installer node
  • Hugo Setup + Build permettent de créer le dossier
  • Firebase permet de déployer mon site automatiquement, gérer la mise production..

Domaine Link to this heading

Hébérgé chez Gandi, j’ai trouvé un site meridian-corp.org disponible

Cela sonne bien… .org comme une organisation coupé des membres politiques. Un endroit qui dépasse les pays.

Il a ensuite suffit de faire correspondre les clés DNS entre Gandi et Firebase pour que le déploiement s’effectue correctement !

Et voilà comment ce site est né.