Aller au contenu

La création de mon site web

J’ai créé un site web statique avec HUGO, déployé automatiquement sur Cloudflare Pages, en utilisant mon propre domaine. Ce choix m’a permis de découvrir le SSG HUGO, ainsi que des fonctionnalités de Cloudflare pour l’hébergement, la gestion des déploiements et la sécurisation des accès.

Hugo Cloudflare Github CI/CD

Dans cette curiosité qui me caractérise, j’ai voulu :

  1. Créer un site web rapidement avec l’aide d’un SSG (HUGO)
  2. L’héberger sur un CDN (Cloudflare Pages)
  3. Le déployer automatiquement à chaque nouveau changement (Cloudflare Workers)
  4. L’exposer sur mon domaine (Cloudflare domains)

Créer un site web rapidement avec l’aide d’un SSG (HUGO) #

HUGO est un générateur de sites statiques (SSG) rapide et flexible, conçu pour créer des sites web ultra-rapides en utilisant des fichiers Markdown et des modèles simples.
Il existe plusieurs SSG sur le marché mais HUGO à la particularité d’utiliser le GO pour compiler le site web.
J’ai choisi d’utiliser le thème Congo de JPanther. Au-dela de son aspect esthetique, il est responsive, s’appuie sur Tailwind et offre quelques shortcodes bien utile.

Responsive web & mobile

Aucune best practice non de markdown reperé par l’addon Markdownlint disponible pour VisualStudio

L’héberger sur un CDN (Cloudflare Pages) #

Pour mon site, j’ai fait le choix d’héberger mon code sur Github et donc j’aurais pu faire le choix d’utiliser leur solution Github Pages qui propose notamment d’utiliser Jekyll à la place d’Hugo.

Mais j’ai choisi d’utiliser Cloudflare (j’en parle notament dans l’article #réseau) avec leur solution Cloudflare Pages qui permet de build et de déployer des sites à partir d’un repository. On y trouve quelques fonctionnalités sympathiques :

  • Gestion des environnements automatique à partir des branches
  • Web analytique sur les visiteurs
  • Sécurisation des accès à travers Cloudflare

Le déployer automatiquement à chaque nouveau changement (Cloudflare Workers) #

Cloudflare Pages propose une fonctionnalité de déploiement continue. Cela signifie qu’il va surveiller votre repository et qu’à chaque nouveau changement sur une branche spécifique, il va déployer la nouvelle version associée. Si le déploiement échoue, l’ancienne version restera en ligne (pratique pour la gestion d’erreur).

Il est possible de passer des variables d’environnement si on souhaite protéger les tokens ou les identifiants lors du déploiement.

L’exposer sur mon domaine (Cloudflare domains) #

Cloudflare fourni une adresse pour chaque déploiement réussi en .pages.dev (pas très pratique…). J’ai donc mis une redirection en place en modifiant l’enregistrement DNS (CNAME) pour faire pointer mon nom de domaine vers l’adresse fournie par Cloudflare.