Aller au contenu
  1. Notes/

Héberger Hugo avec Cloudflare Pages plutôt qu'AWS CloudFront

·3 mins
Ixonae
Auteur
Ixonae

Avertissement : Cet article a été traduit de l’anglais par un LLM. La précision n’est pas garantie. Vous pouvez lire l’article original en anglais.

Dans l’article que j’avais écrit il y a quelque temps sur le passage à Hugo pour mon blog (Goodbye Ghost, Hello Hugo), je mentionnais comment j’utilisais AWS CloudFront pour l’hébergement.

AWS avait l’avantage de fonctionner directement avec Hugo (c’est-à-dire qu’on pouvait utiliser la commande hugo deploy sans aucune autre dépendance), mais cela nécessitait de mettre en place un peu d’infrastructure.

J’avais aussi fini par le placer derrière Cloudflare pour éviter la faillite dans le cas improbable où le site recevrait beaucoup de requêtes (c’était très bon marché sinon ; quelques centimes par mois.)

Récemment, je voulais simplifier mon infrastructure et je suis tombé sur Cloudflare Pages. J’ai décidé de l’essayer. Le processus s’est avéré étonnamment simple. En gros, il suffit de :

  1. Créer une clé API avec les permissions d’écriture sur Account / Cloudflare Pages
  2. Installer wrangler et créer le projet avec npx wrangler pages project create my-project (pour une raison quelconque, cela ne peut pas se faire via l’interface web)
  3. Lier votre domaine dans Custom Domains dans le Page Project

Note : la clé API ne peut pas être limitée à un projet Pages spécifique, seulement au compte entier. Si cela vous préoccupe, envisagez d’utiliser un compte Cloudflare dédié.

Si votre dépôt est sur GitHub, vous pouvez éviter le CI/CD entièrement en liant le dépôt directement dans le tableau de bord Cloudflare. J’utilise un dépôt git auto-hébergé, mais j’ai simplement eu à ajouter deux étapes à ma configuration CI/CD :

- name: Build Hugo
  run: hugo
- name: Deploy to Cloudflare Pages
  env:
    CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}
    CLOUDFLARE_ACCOUNT_ID: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
  run: npx wrangler pages deploy public --project-name=my-project

À noter que public dans la commande de déploiement fait référence au répertoire de sortie par défaut de Hugo contenant votre site web.

Si vous ne connaissez pas votre CLOUDFLARE_ACCOUNT_ID, accédez simplement à https://dash.cloudflare.com/ et vous serez redirigé vers https://dash.cloudflare.com/{votre account ID}/home/overview.

Les performances sont également bonnes (du moins selon PageSpeed Insights), et je n’ai constaté aucune régression par rapport à CloudFront.

New Blog Pagespeed
Résultats PageSpeed Insights après la migration vers Cloudflare Pages

Dans l’ensemble, je suis plutôt satisfait de cette configuration. J’ai une facture AWS en moins (Pages est gratuit) et une pièce d’infrastructure en moins à gérer, et mon blog reste facile à déployer et rapide. Le seul inconvénient que j’ai trouvé jusqu’à présent est que les analytics de Cloudflare Pages sont légèrement moins détaillées que celles de CloudFront, mais ce n’est pas rédhibitoire.