Faire un Blog en 2020

Bonne résolution pour démarrer 2020, j'avais décidé de refaire mon blog.

Et pour ne pas relancer un site vide, j'ai remis plusieurs articles que j'ai écrit par le passé et pour la plupart publié dans la presse dans le magazine Programmez.

J'avais déja un blog dans le "cloud" pourtant depuis plus de 10 ans. J'avais lancé mon premier blog à la lointaine époque où Azure s'appelait encore "Red Dog". Mais "Everything Fails" même si il était hébergé sur des services PAAS managé les premiers d'Azure les "Cloud Service" un jour il a disparu. Même si j'avais toujours un oeil sur l'hébergement, un jour je n'ai pas renouvelé un nom de domaine lié à un projet de startup qui s'était arreté mais malheureusement l'adresse email qui recevait les emails de la souscription Azure sur lequel était hébergé mon ancien blog, était sur ce domaine. Résultat je n'ai pas reçu les emails d'alerte. Plutôt que de restaurer une sauvegarde de vieux articles dépassés j'ai choisi d'en faire un nouveau au top de la technologie actuelle.

Objectif un site résilient bénéficiant des derniéres technologies "cloud" et à la pointe du web. Même si je doute que me réflexions nuageuses attirent autant que les aventures de la famille Kardashian, je veux également qu'il puisse répondre à un fort trafic qu'il soit le plus rapide possible et tout ça sans qu'il me coûte trop cher.

En réalité faire un site statique serait l'idéal, mais je n'ai pas des heures à passer pour faire du HTML et du css. Et j'aimerais aussi avoir une plateforme pour écrire mes articles. Je veux une vrai séparation Back et Front et  avoir ça dans un monde de microservices dans l'idéal Serverless

Coté back un Headless CMS

La derniére tendance dans le monde impitoyable des CMS ce sont les Headless CMS. Un Headless CMS va vous apporter une plateforme pour écrire sereinement vos articles et exposer votre contenu sous forme d'API. Voila donc un premier choix de technologie pour le back. Reste à en trouver un idéalement Open Source avec une communauté active.

Aprés quelques recherches j'en ai sélectionné deux :

• Squidex  : open source en dotnetcore stocke les données dans une base mongodb
• Ghost : open source en node.js stocke les données dans une base mysql

Coté Front une PWA

mon choix s'est porté sur Gatsby.Js c'est un générateur de PWA (Progressive Web Apps) Statique fait en React. Idéal pour ce que je veux un site statique sur les derniéres technologies web avec des microservices pour le reste, et React est le seul framework Front que je connais un peu.

Squidex est trés prometteur est basé sur des technologies que j'apprécie particuliérement fait en Asp.net Core et avec une base nosql, mais à l'heure actuelle il a une trop petite communauté même si il est assez active.

Ghost lui béneficie d'une forte communauté et a une trés bonne intégration avec Gatsby et il y a même un starter kit Gatsby / Ghost .

Installons ça

Premier point installer mon instance de Ghost dans un environnement le plus managé possible utilisant le plus de services PAAS. Il existe une image Docker de Ghost. Et sur Github on trouve plusieurs versions de template ARM pour le déployer dans Azure App Service Windows ou Linux . J'ai utilisé ce projet la qui permet d'utiliser Azure App Service Linux et une Azure Database Mysql (PAAS Mysql) et j'ai légérement modifié l'image Docker pour avoir l'option de pouvoir stocker les images indépendamment dans un Azure Blob Storage séparé mais que je n'ai pas activé.

Voila une fois mon instance de Ghost installé et configuré dans Azure je fais mes premiers essais pour générer une PWA statique pour mon contenu. C'est assez simple avec le starter kit Gatsby. Il faut créer une intégration dans l'instance de Ghost pour avoir une clé d'API et ensuite modifier le fichier de config .ghost.json pour indiquer ou se trouve mon Ghost et la clé pour s'y connecter. Gatsby dispose d'un CLI la commande npx gatsby develop vous démarre un serveur web pour développer et voir le résultat en live, et npx gatsby build vous lance le build pour avoir la PWA statique résultante.

Automatisons le process

Pratique pour développer et tester, mais je n'ai pas l'intention de manuellement relancer un build à chaque fois que j'écris un nouvel article. Un peu d'automatisation pour ça avec des outils DevOps pour les dévs. Voila l'occasion idéale pour jouer avec Github Actions. Github Actions facilite l'automatisation de workflow CI/CD dans un esprit serverless. J'avais écrit un article sur le lancement de la beta de Github Actions pour en savoir plus.

Voila comment se passe le workflow, Ghost peut déclencher des webhook lors d'évenements survenant dans Ghost comme lors de l'écriture d'un nouvel article.
Ce Webhook va déclencher une Azure Function qui va à son tour déclencher un évenement qui va démarrer un Workflow Github Actions, grace à l'évenement repository dispatch qui permet de déclencher un workflow Github actions via un évenement externe. Et ce workflow va faire un build de gatsby et le push sur un repo github pour rendre le site disponible sur Github Pages.

Voila le yaml :

name: CI

on: [push, repository_dispatch]

jobs:
build:

runs-on: ubuntu-latest

steps:
- uses: actions/checkout@v1
- name: Run a one-line script
  run: echo Hello, world!
- name: Setup Node.js for use with actions
  uses: actions/setup-node@v1.1.0
- name: Install dependencies
  run: yarn install --prod --pure-lockfile
- name: Build Gatsby Site
  uses: jzweifel/gatsby-cli-github-action@master
  env:
      GHOST_API_URL: "https://ghostzecloud.azurewebsites.net"
      GHOST_CONTENT_API_KEY: ${{ secrets.GHOST_CONTENT_API_KEY }}
  with:
    gatsby-arg: build
- name: Deploy
  uses: s0/git-publish-subdir-action@master
  env:
    REPO: git@github.com:zecloud/zecloud.github.io.git
    BRANCH: master
    FOLDER: public
    SSH_PRIVATE_KEY: ${{ secrets.DEPLOY_PRIVATE_KEY}

Mon "ghost" étant du coup totalement indépendant de mon "gatsby", je peux même si je veux stopper mon instance quand je ne m'en sers pas, mais dans un premier temps je la protége par mot de passe, pas la peine que mes posts soient référencé en double par les moteurs de recherche/

En conclusion

Voila comment faire un site moderne résilient avec les derniéres technologies cloud, Container, PAAS et front (PWA) et avec l'hébergement sur Github Pages en Open Source je suis sûr qu'il restera toujours en ligne. Tout ça pour mon modeste Blog en espérant ne pas être trop nébuleux, à bientôt dans les nuages.