Comment démarrer un blog sans les conneries WordPress (Gratuit, 7 fois plus rapide)

Chaque tutoriel « comment démarrer un blog » recommande WordPress hébergé sur Bluehost/SiteGround/WP Engine. Voici pourquoi : Bluehost paie ~100 $ par vente. SiteGround paie 50-120 $. WP Engine paie 200 $ +. Les résultats de recherche ne sont pas optimisés pour t’aider, ils sont optimisés pour que les affiliés gagnent 100 $ de commissions.

Je vais te montrer comment construire un blog de développeur avec Astro et Cloudflare Pages. Cela coûte 0 $/mois, charge 7 fois plus vite que WordPress et ne nécessite aucune maintenance. Je gagne exactement 0 $ en recommandant cette pile car Cloudflare n’a pas de programme d’affiliation et Astro est open source.

C’est pourquoi ce guide n’existe nulle part ailleurs.

Temps à terminer : 30-45 minutes de zéro au déploiement.

L’arnaque des commissions que personne ne mentionne

Les programmes d’affiliation d’hébergement WordPress sont le secret sale derrière chaque article « comment démarrer un blog WordPress ». Voici le flux monétaire :

Bluehost : ~100 $/vente
SiteGround : 50-120 $/vente
WP Engine : 200 $ +/vente
GoDaddy : 75-100 $/vente

Cherche « comment démarrer un blog » sur Google et compte combien de résultats promeuvent WordPress + hébergement à haute commission. Chacun. Un seul. Car c’est là que l’argent est. Je devrais le savoir, je l’ai aussi fait.

Ma transparence : Je pourrais faire 100 $ maintenant en t’envoyant chez Bluehost. Au lieu de cela, je gagne 0 $ en te parlant d’une meilleure solution. C’est exactement pourquoi les guides traditionnels « comment créer un blog » n’écriront pas cet article.

Cloudflare Pages : 0 $ (hébergement de blog gratuit, pas de programme d’affiliation)
Astro : 0 $ (plateforme de blog open source, pas de programme d’affiliation non plus)

Pour qui est ce guide

Développeurs qui veulent un blog rapide
Startups ayant besoin de sites de marketing performants
Quiconque à l’aise avec git et markdown
Les gens fatigués de l’enfer des plugins WordPress

Qui devrait rester avec WordPress

Sois honnête envers toi-même. Les générateurs de sites statiques ne sont pas des systèmes de gestion de contenu, et prétendre qu’ils le sont mène à la frustration. Reste avec WordPress si tu :

As des clients non techniques qui ont besoin d’une interface graphique
As besoin de fonctionnalités complexes d’adhésion/paywall
Ne toucheras pas à la ligne de commande
As besoin de rôles d’utilisateurs étendus et de permissions
As des exigences de contenu généré par l’utilisateur

Le reste de ce guide suppose que tu es un développeur qui veut construire un blog, pas un CMS pour une équipe de contenu.

Le problème de performance WordPress (données réelles)

Sautons les hypothèses. J’ai migré websiterating.com de WordPress vers Astro en octobre 2025. Voici les résultats réels de PageSpeed Insights de pagespeed.web.dev.

Performance de la page d’accueil : Avant vs Après

Page d’accueil Avant	Page d’accueil Après

WordPress (Avant la migration) :

Score de performance : 77 (amélioration nécessaire)
Première peinture contenu : 3,2s (lent)
Peinture du plus grand contenu : 3,4s (lent)
Indice de vitesse : 9,6s (très lent)
Temps de blocage total : 50ms (bon)

Astro (Après la migration) :

Score de performance : 90 (✅ bon)
Première peinture contenu : 1,5s (✅ bon)
Peinture du plus grand contenu : 3,6s (amélioration nécessaire)
Indice de vitesse : 2,5s (✅ bon)
Temps de blocage total : 0ms (✅ excellent)

Amélioration de la page d’accueil ✅ : Score de performance augmenté de 17%, FCP amélioré de 53%, Indice de vitesse amélioré de 74%.

Performance de l’article de blog : La vraie différence

La performance de la page d’accueil a de l’importance, mais les articles de blog sont l’endroit où les lecteurs passent du temps. Les résultats de l’article de blog sont encore plus dramatiques.

Article de blog Avant	Article de blog Après

Article de blog WordPress (Avant) :

Score de performance : 56 (faible)
Première peinture contenu : 3,6s (lent)
Peinture du plus grand contenu : 4,0s (lent)
Indice de vitesse : 17,4s (extrêmement lent)
Temps de blocage total : 480ms (faible)

Article de blog Astro (Après) :

Score de performance : 97 (✅ excellent)
Première peinture contenu : 1,2s (✅ bon)
Peinture du plus grand contenu : 2,6s (✅ bon)
Indice de vitesse : 2,4s (✅ bon)
Temps de blocage total : 0ms (✅ excellent)

Amélioration de l’article ✅ : Score de performance augmenté de 73%, FCP amélioré de 67%, LCP amélioré de 35%, Indice de vitesse amélioré de 86%, TBT complètement supprimé.

Qu’est-ce qui a changé ?

La différence vient de l’exécution PHP et des requêtes de base de données par rapport au HTML pré-généré servi depuis un CDN. WordPress doit traiter ta demande, interroger la base de données, exécuter PHP, rendre HTML puis l’envoyer. Astro a déjà le HTML construit et mis en cache globalement.

Stack WordPress (websiterating.com avant) :

Exécution PHP 8.1
Requêtes de base de données MySQL
12+ plugins actifs
Traitement des thèmes
Plusieurs requêtes HTTP pour les assets
Rendu côté serveur à chaque chargement de page

Stack Astro (websiterating.com maintenant) :

HTML statique pré-généré
Servi depuis le bord de Cloudflare (300+ emplacements)
Zéro requête de base de données
Zéro exécution PHP
JavaScript minimal (seulement où nécessaire)
Assets optimisés au moment de la construction

L’amélioration de l’indice de vitesse de 17,4s à 2,4s sur les articles de blog est la vraie histoire. C’est une amélioration de 86% dans la vitesse de chargement perçue. Les lecteurs voient le contenu 7 fois plus vite.

Le bonus d’accessibilité

Remarque les scores d’accessibilité :

WordPress : 78-82 (amélioration nécessaire)
Astro : 100 (✅ parfait)

Ce n’était pas intentionnel. Les modèles par défaut d’Astro suivent les normes Web mieux que la plupart des thèmes WordPress. Tu obtiens du HTML accessible par défaut sans installer de plugins comme WP Accessibility.

La taxe des plugins WordPress

Les sites WordPress exécutent généralement 15-30 plugins, chacun ajoutant des requêtes de base de données, des requêtes HTTP et du poids CSS/JS. Websiterating.com avant la migration exécutait :

Yoast SEO : Gestion des balises meta, génération de plans du site
WP Rocket : Mise en cache pour atténuer les problèmes de performance
Contact Form 7 : Gestion de formulaires basique
Akismet : Filtrage des spams dans les commentaires
Plugins de partage social : Ajouter des boutons de partage
Plugins d’analyse : Suivre les visiteurs
Plugins de sécurité : Surveiller les attaques

Chaque plugin ajoute du poids. Chaque plugin a besoin de mises à jour. Chaque plugin est un trou de sécurité potentiel.

Équivalent Astro :

SEO : Intégré (cartes du site XML, support robots.txt, URLs canoniques, frontmatter complet pour balises meta OG/Twitter, schéma prêt)
Mise en cache : Non nécessaire (HTML statique mis en cache globalement)
Formulaires : Netlify Forms, Web3Forms ou appels API simples
Commentaires : Giscus (GitHub Discussions)
Partage : Boutons HTML statiques
Analyse : Cloudflare Web Analytics
Sécurité : Rien à attaquer (pas de base de données, pas de PHP)

Zéro plugin. Zéro frais généraux de maintenance.

Le cauchemar de la maintenance

WordPress nécessite :

Mises à jour hebdomadaires des plugins (vulnérabilités de sécurité si tu les ignores)
Mises à jour de thème qui peuvent casser occasionnellement ton design
Vérifications de compatibilité de version PHP
Optimisation de base de données pour éviter les ralentissements
Gestion des sauvegardes
Surveillance de la sécurité

Même si tu n’ajoutes pas souvent de nouveau contenu, WordPress nécessite des mises à jour régulières du noyau, des plugins et des thèmes pour maintenir les performances et la sécurité.

Astro nécessite :

git push

C’est tout. Pas de mises à jour à surveiller. Pas de correctifs de sécurité. Pas d’optimisation de base de données. Le site est du HTML pré-généré, il n’y a rien à attaquer.

🎯 L’alternative Astro + Cloudflare Pages

Pourquoi cette pile

Astro ne livrera zéro JavaScript par défaut, en rendant le contenu en HTML statique au moment de la construction. Cloudflare Pages déploie ton site sur 300+ emplacements de bord mondiaux avec SSL automatique, protection DDoS et bande passante illimitée au niveau gratuit.

Ce que tu obtiens :

Temps de construction : 2-10 secondes pour les blogs typiques
Temps de déploiement : ~30 secondes distribution mondiale
SSL : Automatique et gratuit
Protection DDoS : Intégrée
Bande passante : Illimitée (niveau gratuit)
Coût : 0 $/mois pour la plupart des blogs (500 constructions/mois)

Les compromis (honnêteté brutale)

Ce que tu perds :

Pas d’éditeur de contenu GUI (fichiers markdown uniquement)
Impossible de remettre facilement aux rédacteurs non techniques
Les commentaires nécessitent une intégration tierce
La recherche a besoin d’une implémentation
Le contenu dynamique nécessite une configuration supplémentaire

Ce que tu gagnes :

7-10x temps de chargement plus rapides (documenté ci-dessus avec des données réelles)
Zéro maintenance au-delà du contenu
Contrôle de version complet via git
Pas de mises à jour de sécurité à surveiller
Pas de frais d’hébergement pour les cas d’utilisation typiques
Contrôle total du code

Les sites statiques sont rapides et propres car aucun code ne s’exécute dans le navigateur du lecteur, ce qui les rend intrinsèquement respectueux de la vie privée sans traceurs par défaut.

Toujours là ? Bien. Cela signifie que cette pile a du sens pour toi. Construisons ça.

Ton chemin de configuration : Choisis ta route (15-30 minutes)

Je ne vais pas copier-coller la documentation de configuration d’Astro. Ils la maintiennent mieux que je ne pourrais jamais, et elle reste à jour quand les choses changent.

Route A : Partir de zéro (15-20 minutes)

Suis les guides officiels :

Important : Les guides officiels te demanderont d’ajouter l’adaptateur Cloudflare avec npm run astro add cloudflare. Suis ces étapes exactement. L’adaptateur est nécessaire pour le déploiement de Cloudflare Pages.

Ce que tu obtiendras : Projet Astro vierge déployé sur Cloudflare Pages à your-project.pages.dev

Route B : Choisis un thème - Recommandé (20-30 minutes)

Ne gaspille pas de temps à consulter 100 thèmes. Voici ce qui fonctionne vraiment :

Meilleur choix pour les développeurs : AstroPaper

Pourquoi celui-ci :

Accessibilité : 100/100 en standard
Léger : Pas de encombrement, rapide par défaut
Optimisé pour le SEO : Bonnes balises meta, plan du site, RSS inclus
Maintenance active : Mises à jour régulières
Support TypeScript : Frontmatter sûr pour les types
Mode sombre : Intégré

Configuration :

npm create astro@latest my-blog -- --template satnaing/astro-paper
cd my-blog
npm install
npm run dev

Ouvre http://localhost:4321 et tu as un blog fonctionnel localement.

Alternative si tu préfères Tailwind : Astro Boilerplate

Veux-tu en explorer plus ? Tous les thèmes Astro - Filtre par tag “Blog”.

Installe l’adaptateur Cloudflare (ÉTAPE CRITIQUE)

Avant de pouvoir déployer sur Cloudflare Pages, tu dois ajouter l’adaptateur Cloudflare à ton projet :

npm run astro add cloudflare

Cette commande fait trois choses :

Installe le paquet @astrojs/cloudflare dans tes dépendances
Met à jour ta astro.config.mjs avec la configuration de l’adaptateur
Configure ton projet pour le déploiement sur Cloudflare Pages

Ce que tu verras après son exécution :

Dans astro.config.mjs :

import { defineConfig } from 'astro/config';
import cloudflare from '@astrojs/cloudflare';  // ← Ajouté automatiquement

export default defineConfig({
  site: 'https://yourdomain.com',
  adapter: cloudflare(),  // ← Ajouté automatiquement
});

Dans package.json :

{
  "dependencies": {
    "@astrojs/cloudflare": "^x.x.x"  // ← Ajouté automatiquement
  }
}

C’est non-négociable. Sans cette étape, ta construction échouera sur Cloudflare Pages.

Suivant : Déploie en utilisant le Guide Astro de Cloudflare Pages. Cela prend 5 minutes.

Suis leur guide de déploiement. Je serai ici quand tu reviendras avec cette belle URL *.pages.dev.

Que se passe-t-il ensuite : Comprendre ton flux de travail (10 minutes)

Tu as suivi les guides. Tu as déployé. Tu as une URL en direct. La plupart des tutoriels s’arrêtent ici. Parcourons le flux de travail réel quotidien.

Ton nouveau processus de publication

Ancienne façon WordPress :

Connecte-toi à wp-admin
Articles → Ajouter nouveau
Écris dans l’éditeur visuel (qui casse tes blocs de code)
Clique sur Publier
Vérifie si les mises à jour de plugin ont cassé le design
Surveille les correctifs de sécurité
Répète hebdomadairement

Nouvelle façon Astro :

Ouvre VS Code
Crée un fichier markdown : src/content/blog/my-post.md
Écris un article
git push
Le site se déploie en 60 secondes

C’est tout. Pas d’étape 6. Pas d’étape 7.

Ton architecture de projet

your-blog/
├── src/
│   ├── content/
│   │   └── blog/          ← TES ARTICLES VIVENT ICI (90% de ton temps)
│   ├── pages/             ← Routes (/, /blog, /about)
│   ├── layouts/           ← Modèles de page
│   ├── components/        ← Pièces UI réutilisables
│   └── styles/            ← Fichiers CSS
├── public/                ← Assets statiques (images, favicon)
├── astro.config.mjs       ← Configuration
└── package.json           ← Dépendances

Le seul dossier que tu toucheras régulièrement : src/content/blog/

Écris ton premier article (5 minutes)

Étape 1 : Crée le fichier

# Depuis la racine de ton projet
touch src/content/blog/hello-world.md

Étape 2 : Ajoute le frontmatter + le contenu

---
title: "Comment j'ai échappé à l'enfer de WordPress"
description: "De temps de chargement de 17,4s à 2,4s"
pubDate: 2025-10-20
author: "Ton nom"
tags: ["webdev", "performance"]
---

Écris en markdown comme un humain normal. Pas d'éditeur visuel cassant ta mise en forme.

## Les sous-titres fonctionnent

Les blocs de code fonctionnent parfaitement :

` ``javascript
// Pas de codes courts WordPress cassant ta syntaxe
console.log("Enfin, mise en évidence correcte");
` ``

Les images sont simples :
![Alt text](/images/screenshot.jpg)

Les liens internes fonctionnent :
Lis [ma page about](/about) pour le contexte.

Étape 3 : Ajoute une image (si nécessaire)

Dépose l’image dans public/images/
Référence : ![Alt](/images/filename.jpg)

Étape 4 : Aperçu local

npm run dev
# Ouvre http://localhost:4321
# Vois ton article immédiatement
# Enregistre un fichier → rechargement instantané

Étape 5 : Déploie

git add .
git commit -m "Ajoute le premier article"
git push

Cloudflare détecte le push → construit le site (~30 secondes) → déploie globalement. Ton article est en ligne.

Pas de bouton “Publier”. Pas de panneau d’administration. Juste git push.

Utilisation réelle quotidienne

Café du matin, nouvelle idée d’article :

cd my-blog
npm run dev
touch src/content/blog/new-idea.md
# Écris dans VS Code en obtenant un aperçu sur localhost:4321

Prêt à publier :

git add .
git commit -m "Article : Pourquoi WordPress est lent"
git push
# Prends un café. Le blog se met à jour en 60 secondes.

Temps total de l’idée à publié : 5 minutes.

Comparecla avec WordPress : Connecte-toi → attends le tableau de bord → traite la notification de mise à jour du plugin → lutte avec l’éditeur visuel → publie → vérifie si quelque chose s’est cassé → répare → maudis → terminé (20 minutes).

Ajouter des pages (3 minutes)

Besoin d’une page About ? Crée un fichier dans src/pages/ :

touch src/pages/about.astro

Structure de base :

---
import Layout from '../layouts/Layout.astro';
---

<Layout title="About">
  <h1>À propos de moi</h1>
  <p>Je construis des blogs rapides. WordPress est lent.</p>
</Layout>

Routage basé sur les fichiers :

src/pages/about.astro → yoursite.com/about
src/pages/uses.md → yoursite.com/uses
src/pages/blog/[slug].astro → Routes dynamiques (déjà configurées)

Fais-le tien : Guide de personnalisation exact (15 minutes)

Pas de conneries vagues de “vérifie ta configuration”. Voici les fichiers exacts à modifier.

Modifie les infos et la marque du site

Fichier : src/config.ts (ou similaire, dépend du thème)

Quoi changer :

export const SITE = {
  title: 'Nom de ton blog',           // ← Modifie ceci
  description: 'Ton slogan ici',  // ← Modifie ceci
  author: 'Ton nom',               // ← Modifie ceci
  email: '[email protected]',          // ← Modifie ceci
  website: 'https://yourdomain.com', // ← Modifie quand tu ajoutes un domaine
  defaultLanguage: 'en',
};

export const SOCIALS = {
  github: 'yourusername',              // ← Modifie ceci
  twitter: 'yourhandle',               // ← Modifie ceci
  linkedin: 'yourprofile',             // ← Modifie ceci
};

Fichier : Dépend du thème, généralement src/components/Header.astro ou src/config/menu.ts

Exemple (Header.astro) :

<nav>
  <a href="/">Accueil</a>
  <a href="/blog">Blog</a>
  <a href="/about">À propos</a>     <!-- ← Ajoute/supprime des liens ici -->
  <a href="/uses">Utilisations</a>       <!-- ← Les pages personnalisées vont ici -->
</nav>

Exemple (menu.ts config) :

export const MENU_LINKS = [
  { text: 'Accueil', href: '/' },
  { text: 'Blog', href: '/blog' },
  { text: 'À propos', href: '/about' },  // ← Ajoute/supprime ici
  { text: 'Utilisations', href: '/uses' },    // ← Liens personnalisés
];

Personnalise les couleurs et les polices

Fichier : src/styles/global.css ou tailwind.config.cjs

Pour CSS vanilla (global.css) :

:root {
  --color-primary: #3b82f6;      /* ← Ta couleur de marque */
  --color-text: #1f2937;         /* ← Couleur du texte */
  --color-bg: #ffffff;           /* ← Couleur de fond */
  --font-base: 'Inter', sans-serif;  /* ← Ton police */
}

.dark {
  --color-text: #f9fafb;         /* ← Texte du mode sombre */
  --color-bg: #111827;           /* ← Fond du mode sombre */
}

Pour Tailwind (tailwind.config.cjs) :

module.exports = {
  theme: {
    extend: {
      colors: {
        primary: '#3b82f6',        // ← Ta couleur de marque
      },
      fontFamily: {
        sans: ['Inter', 'system-ui'],  // ← Ta police
      }
    }
  }
}

Mets à jour la configuration d’Astro

Fichier : astro.config.mjs

L’adaptateur Cloudflare a déjà été ajouté quand tu as exécuté npm run astro add cloudflare. Ton fichier devrait ressembler à ceci (déjà configuré) :

import { defineConfig } from 'astro/config';
import cloudflare from '@astrojs/cloudflare';

export default defineConfig({
  site: 'https://yourdomain.com',  // ← Modifie ceci quand tu ajoutes ton domaine personnalisé
  adapter: cloudflare(),
  // D'autres paramètres généralement corrects tel quel
});

Ce que tu devras peut-être changer :

site : Mets à jour quand tu achètes un domaine personnalisé
Tout le reste : Généralement pas besoin de changements pour un blog

Ajoute tes propres images

Favicon et logo :

Remplace les fichiers dans public/ (généralement favicon.svg, logo.svg)
Ou utilise le dossier d’assets dédié du thème (vérifiez la doc du thème)

Images d’articles de blog :

Dépose les images dans public/images/
Référence dans markdown : ![Alt text](/images/your-image.jpg)

Ou utilise le composant Image d’Astro (recommandé pour l’optimisation) :

---
import { Image } from 'astro:assets';
import heroImage from '../assets/hero.jpg';
---

<Image src={heroImage} alt="Description" />

Astro gère les images responsives, la conversion WebP, le chargement différé automatiquement.

Configuration des fonctionnalités essentielles (20 minutes au total)

Commentaires via Giscus (5 minutes)

Les sites statiques n’ont pas de bases de données. Solution : GitHub Discussions via Giscus.

Pourquoi Giscus :

Gratuit (utilise ton dépôt GitHub)
Pas de suivi
Auth GitHub filtre le spam
Réactions, réponses, modération intégrées

Configuration :

Active Discussions sur ton dépôt GitHub :
- Repo → Settings → Features → Coche “Discussions”
Configure Giscus :
- Va à giscus.app
- Rentre ton repo : yourusername/your-blog-repo
- Sélectionne la catégorie de Discussion : “Commentaires” (ou crée une)
- Copie le script généré
Ajoute à ta mise en page de blog :

Fichier : src/layouts/BlogPost.astro (ou similaire)

---
// Ton frontmatter existant
---

<Layout>
  <article>
    <h1>{frontmatter.title}</h1>
    <slot />
  </article>

  <!-- Ajoute Giscus ici -->
  <script src="https://giscus.app/client.js"
          data-repo="yourusername/your-repo"
          data-repo-id="YOUR_REPO_ID"
          data-category="Comments"
          data-category-id="YOUR_CATEGORY_ID"
          data-mapping="pathname"
          data-reactions-enabled="1"
          data-emit-metadata="0"
          data-theme="preferred_color_scheme"
          crossorigin="anonymous"
          async>
  </script>
</Layout>

Alternatives :

Utterances : Utilise GitHub Issues à la place de Discussions
Disqus : Facile mais suit les utilisateurs, publicités au niveau gratuit
Commento : Axé sur la vie privée, 10 $/mois ou auto-hébergé

Analyses via Cloudflare (5 minutes)

Pourquoi Cloudflare Web Analytics :

Gratuit à jamais
Pas de cookies (conforme RGPD)
Respectueux de la vie privée
Montre ce dont tu as besoin : pages vues, références, emplacements

Configuration :

Tableau de bord Cloudflare → Analyse → Web Analytics
Clique sur “Ajouter un site”
Rentre ton URL de site
Copie le jeton du script de balise

Ajoute à ta mise en page :

Fichier : src/layouts/Layout.astro (mise en page de base)

---
// Frontmatter
---

<html>
  <head>
    <!-- Ton contenu d'en-tête existant -->

    <!-- Ajoute l'analyse Cloudflare -->
    <script defer
            src='https://static.cloudflareinsights.com/beacon.min.js'
            data-cf-beacon='{"token": "YOUR_TOKEN_HERE"}'>
    </script>
  </head>
  <body>
    <slot />
  </body>
</html>

Ce que tu obtiens :

Vues de page et visiteurs uniques
Pages principales
Sources de référence
Données de pays/appareil/navigateur
Tout sans pixels de suivi ni cookies

Alternatives payantes (si tu as besoin de plus) :

Plausible : 9 $/mois, belle interface
Fathom : 14 $/mois, fonctionnalités similaires

J’utilise Cloudflare. C’est gratuit et ne traite pas les lecteurs comme des cibles publicitaires.

Flux RSS (Déjà intégré)

Bonne nouvelle : Les thèmes Astro incluent RSS par défaut.

Ton flux : https://yoursite.com/rss.xml

Teste : Visite cette URL. Tu devrais voir du XML avec tes articles.

Personnalise (si nécessaire) :

Fichier : src/pages/rss.xml.js (ou similaire)

export const GET = async (context) => {
  const posts = await getCollection('blog');

  return rss({
    title: 'Titre de ton blog',      // ← Modifie ceci
    description: 'Ta description RSS',  // ← Modifie ceci
    site: context.site,
    items: posts.map(post => ({
      title: post.data.title,
      pubDate: post.data.pubDate,
      link: `/blog/${post.slug}/`,
    })),
  });
};

Recherche (Optionnel, 10 minutes)

Les sites statiques n’ont pas de recherche de base de données. Solutions :

Option 1 : Pagefind (Recommandé)

Gratuit et open source
Construit au moment de la construction
Recherche côté client rapide
Pas de service externe

npm install -D pagefind

Puis ajoute au script de construction dans package.json :

"scripts": {
  "build": "astro build && pagefind --source dist"
}

Configuration complète : Docs Pagefind

Option 2 : Algolia DocSearch

Gratuit pour open source/docs sites (besoin d’approbation)
Plus de fonctionnalités, dépendance externe
Demande ici

Option 3 : Fuse.js (Simple)

JavaScript pur
Côté client uniquement
Bon pour plus de 100 articles
Docs Fuse.js

Pour la plupart des blogs de développeurs, Pagefind est parfait.

Ajouter une GUI avec Decap CMS (Optionnel, 15 minutes)

Plus tôt j’ai dit “Ce que tu perds : Pas d’éditeur de contenu GUI (fichiers markdown uniquement)”. Ce n’est plus tout à fait vrai.

Decap CMS est un système de gestion de contenu open source basé sur Git qui fonctionne magnifiquement avec Astro + Cloudflare Pages. Il te donne une GUI de panneau d’administration sans sacrifier les performances ou ton flux de travail basé sur Git.

Pourquoi Decap ?

Gratuit et open source
Pas de base de données (les changements se valident sur ton dépôt Git)
Basé sur Markdown (identique à ton blog Astro)
Fonctionne avec Cloudflare Pages
Configuration minimale (un fichier de config)

Quand utiliser Decap CMS :

✅ Petite équipe a besoin d’accès GUI occasionnel mais tu contrôles le code
✅ Collaborateurs non techniques qui ont besoin d’une interface
✅ Option GUI désirée sans sacrifier les performances
❌ Ne l’utilise pas si : Collaboration lourde, workflows complexes ou grandes équipes ayant besoin de permissions

Aperçu de la configuration (simplifié) :

Ajoute la config Decap à ton dépôt
Déploie ton site Astro sur Cloudflare
Connecte Decap à ton dépôt GitHub (OAuth)
Accède au panneau d’administration à yourdomain.com/admin
Les rédacteurs utilisent la GUI pour créer des articles
Les changements se valident automatiquement dans Git

La vraie différence de WordPress : Les changements sont des commits Git, pas des lignes de base de données. Tout ton historique de contenu est contrôlé en version.

Decap n’est pas meilleur que Markdown pour les développeurs individuels, mais si tu confies l’édition de contenu à quelqu’un qui ne touche pas à la ligne de commande, c’est 10 fois meilleur que WordPress tout en conservant tous les avantages de performance.

Configuration complète : Guide Decap CMS + Astro

Référence rapide des commandes (Marque-page ceci)

Flux de travail quotidien :

npm run dev              # Démarrer le serveur local (http://localhost:4321)
npm run build            # Construire la version de production (teste avant de déployer)
npm run preview          # Aperçu de la construction de production localement

git add .                # Prépare tous les changements
git commit -m "message"  # Valide avec le message
git push                 # Déploie sur Cloudflare (automatique)

Dépannage :

npm install              # Réinstalle les dépendances
rm -rf node_modules      # Option nucléaire : supprime et réinstalle
rm -rf .astro            # Vide le cache d'Astro
npm run build            # Teste la construction localement avant de pousser

Ajouter du contenu :

touch src/content/blog/new-post.md    # Crée un nouvel article
touch src/pages/new-page.astro        # Crée une nouvelle page

Vérifie les problèmes :

npm run build            # Si cela échoue, Cloudflare échouera aussi
                         # Répare les erreurs localement avant de pousser

La comparaison des coûts (Vérification de réalité de 3 ans)

Coûts de la pile WordPress

Année 1 :

Domaine : 15 $ (ou “gratuit” avec l’hébergement, puis 15 $/an)
Hébergement : 60-240 $ (prix promotionnel)
Thème premium : 50-100 $ (une fois)
Plugins essentiels : 50-200 $/an (Yoast Premium, sauvegardes, etc.)
Total année 1 : 175-555 $

Années 2-3 (l’enfer du renouvellement commence) :

Domaine : 15 $/an
Hébergement : 120-360 $/an (les prix de renouvellement augmentent souvent de 200-400% après la période de promotion)
Renouvellements de plugins : 50-200 $/an
Total année 2 : 185-575 $
Total année 3 : 185-575 $

Total de 3 ans : 545-1 705 $

Coût minimum WordPress (Conservateur)

Total increase: Loading...

Coûts de la pile Astro + Cloudflare

Tous les 3 ans :

Domaine : 15 $/an (tout registraire)
Cloudflare Pages : 0 $/mois (500 constructions, bande passante illimitée)
Commentaires : 0 $ (Giscus via GitHub)
Analyse : 0 $ (Cloudflare Web Analytics)
Par année : 15 $

Total de 3 ans : 45 $

Astro + Cloudflare Pages

Total increase: Loading...

Si tu dépasses le niveau gratuit (improbable pour les blogs) :

Cloudflare Pages Pro : 20 $/mois pour 5 000 constructions/mois
Tu devrais déployer 167+ fois par mois pour avoir besoin de ceci

Les vraies économies

Économies sur 3 ans : Minimum 500-1 660 $
Économies de temps : 2-4 heures/mois sans traiter les mises à jour (72-144 heures sur 3 ans)
Gains de performance : 7x temps de chargement plus rapides (amélioration de 86% de l’indice de vitesse)

Je pourrais faire 100-300 $ de commissions en recommandant WordPress. Au lieu de cela, je gagne 0 $ en te parler de la meilleure solution.

Dépannage des problèmes courants

La construction échoue sur Cloudflare

Problème : Le site se construit localement mais échoue sur Cloudflare Pages

Solutions :

Vérifie la version de Node :

# Dans ton projet
node --version

# Cloudflare Pages utilise Node 18 par défaut
# Ajoute à package.json si tu as besoin d'une version spécifique :
"engines": {
  "node": ">=18.0.0"
}

Variables d’environnement :

Si tu utilises des clés API, ajoute-les dans le tableau de bord Cloudflare Pages
Paramètres → Variables d’environnement

Problèmes de commande de construction :

Les paramètres de Cloudflare devraient être :
- Commande de construction : npm run build
- Répertoire de sortie : dist
- Répertoire racine : / (ou ton sous-répertoire)

Les images ne se chargent pas

Problème : Les images fonctionnent localement mais 404 en production

Solutions :

Vérifie les chemins :

✅ Bon :  ![Alt](/images/photo.jpg)
❌ Mauvais :   ![Alt](images/photo.jpg)
❌ Mauvais :   ![Alt](../../../public/images/photo.jpg)

Structure du dossier public :

public/
  images/
    photo.jpg    ← Référence comme /images/photo.jpg
  favicon.svg    ← Référence comme /favicon.svg

Sensibilité de la casse :

Local (Mac/Windows) : Insensible à la casse
Cloudflare (Linux) : Sensible à la casse
Photo.jpg ≠ photo.jpg en production

Erreurs “Module not found”

Problème : Erreurs d’import après le déploiement

Solutions :

Nettoie et réinstalle :

rm -rf node_modules package-lock.json
npm install
npm run build  # Teste localement

Vérifie les imports :

✅ Bon :  import Layout from '../layouts/Layout.astro';
❌ Mauvais :   import Layout from '../layouts/layout.astro';  // Mauvaise casse

Dépendances :

# Si tu as installé un paquet, assure-toi qu'il est dans package.json
npm install package-name --save  # Pas juste npm install package-name

Temps de construction lents

Problème : Les constructions prennent >5 minutes

Solutions :

Vide le cache :

rm -rf .astro
npm run build

Optimisation des images :

Utilise le composant Image d’Astro à la place des tags <img> bruts
Les images sont optimisées au moment de la construction (prend plus de temps mais en vaut la peine)

Trop de pages :

Si 1000+ pages, considère les constructions incrémentielles
Vérifie les docs de déploiement d’Astro

Les commentaires n’apparaissent pas

Problème : Les commentaires Giscus n’apparaissent pas

Solutions :

Vérifie que le dépôt est public :

Giscus nécessite un dépôt public
Les dépôts privés ne fonctionneront pas

Vérifie la catégorie de Discussion :

Repo → Discussions → Doit avoir une catégorie correspondant à la configuration de Giscus

Vérifie data-mapping :

<!-- Devrait généralement être pathname -->
data-mapping="pathname"

<!-- Pas des chemins spécifiques -->
data-mapping="url"  <!-- Essaie ceci si pathname échoue -->

Vide le cache du navigateur :

Le script Giscus pourrait être en cache avec l’ancienne configuration

Tout a explosé ?

Option nucléaire (recommencer frais) :

# Sauvegarde d'abord ton contenu !
cp -r src/content/blog ~/backup

# Supprime tout
rm -rf node_modules package-lock.json .astro dist

# Réinstalle
npm install

# Teste
npm run build
npm run dev

# Si toujours cassé, vérifie Discord d'Astro pour obtenir de l'aide

Toujours cassé ? Astro Discord a des humains utiles qui répondent réellement aux questions.

Quand tu devrais réellement utiliser WordPress

WordPress n’est pas de la merde, il résout des problèmes différents que les générateurs de sites statiques. Utilise WordPress quand tu as :

1. Des équipes de contenu non techniques

10+ rédacteurs qui ont besoin d’une GUI
Des gens qui panique à la ligne de commande
Des workflows d’approbation multi-étapes

2. Des adhésions complexes

Paywalls et niveaux d’abonnement
Des comptes utilisateur avec rôles/permissions
Des zones de contenu réservées aux membres

3. Le commerce électronique lourd

Bien que Shopify soit meilleur
Si tu es coincé avec l’écosystème WooCommerce

4. Du contenu généré par l’utilisateur

Des forums, des commentaires, des profils d’utilisateur
Des interactions en temps réel
Du contenu dynamique qui change par utilisateur

WordPress est un système de gestion de contenu. Astro est un générateur de sites statiques. Peu importe la qualité des générateurs de sites statiques pour générer du HTML à partir de texte, ils ne sont pas des systèmes de gestion de contenu.

Si tu es un développeur qui écris un blog, tu utilises le mauvais outil et tu paies pour des fonctionnalités dont tu n’as pas besoin.

Migration depuis WordPress (Si nécessaire)

Exporte le contenu WordPress (5 minutes)

Tableau de bord WordPress → Outils → Exporter
Sélectionne “Articles”
Télécharge le fichier XML

Convertis en Markdown (2 minutes)

Utilise wordpress-export-to-markdown - un excellent outil open source qui traite la conversion correctement :

npx wordpress-export-to-markdown

# Suis les invites :
# - Chemin vers le fichier XML WordPress
# - Dossier de sortie (./output recommandé)
# - Inclure les images ? Oui
# - Inclure markdown ? Oui

Cet outil préserve :

Le contenu et la mise en forme de l’article
Les images mises en avant
Les références d’image en markdown
Le frontmatter avec les dates et les auteurs
Les métadonnées de l’article

Crée des fichiers markdown propres avec une structure appropriée, aucun nettoyage nécessaire.

Importe dans Astro (10 minutes)

Copie les fichiers markdown :

cp -r output/posts/* src/content/blog/

Répare le frontmatter (si nécessaire) :

L’export WordPress pourrait avoir :

---
title: Mon article
date: 2024-01-15
---

Astro a besoin de (vérifies ton thème) :

---
title: "Mon article"
pubDate: 2024-01-15
description: "Description de l'article"
---

Répare les chemins d’image :

# Ancien chemin WordPress :
![Image](wp-content/uploads/2024/01/image.jpg)

# Nouveau chemin Astro :
![Image](/images/image.jpg)

# Copie les images à public/images/
cp -r output/images/* public/images/

Configure les redirections (5 minutes)

Fichier : public/_redirects (format Cloudflare Pages)

# Anciennes URLs WordPress → Nouvelles URLs Astro
/old-post-title            /blog/new-post-title     301
/category/tech/post-name   /blog/post-name          301
/page/about-us             /about                   301

# Attrape-tout pour l'ancienne structure (optionnel)
/*/                        /blog/:splat             301

Ou utilise la configuration de redirection d’Astro :

Fichier : astro.config.mjs

export default defineConfig({
  redirects: {
    '/old-url': '/new-url',
    '/old-page': {
      status: 301,
      destination: '/new-page',
    },
  },
});

Fonctionnalités de SEO intégrées à Astro

Astro fournit un SEO professionnel par défaut. Ce ne sont pas des extras de thème - ils sont intégrés au framework :

Plan du site XML : Généré automatiquement à /sitemap.xml

Inclut automatiquement tous tes articles de blog et pages
Soumis par les moteurs de recherche automatiquement
Aucun plugin nécessaire

Robots.txt (optionnel) : Crée public/robots.txt pour personnaliser les règles de rastreage :

User-agent: *
Allow: /

Sitemap: https://yourdomain.com/sitemap.xml

Balises Meta et Réseaux Sociaux : Ajoute au frontmatter de ton article pour personnaliser comment il apparaît sur les réseaux sociaux :

---
title: "Titre de ton article"
description: "Description de l'article pour les résultats de recherche"
pubDate: 2025-10-20
# SEO et Réseaux Sociaux
ogImage: "/images/post-image.jpg"          # Aperçu Facebook/LinkedIn
ogType: "article"
twitterHandle: "@yourhandle"                # Créateur Twitter
canonicalUrl: "https://yourdomain.com/blog/post-slug"  # Empêche les problèmes de contenu dupliqué
---

URLs canoniques : Empêche les moteurs de recherche de pénaliser le contenu dupliqué :

---
canonical: "https://yourdomain.com/blog/post-slug"
---

Les composants de mise en page de ton thème rendent automatiquement ces balises meta dans la section <head>. Aucune modification manuelle du HTML nécessaire.

Schema Markup Ready : Astro gère bien les données structurées. La plupart des thèmes de blog incluent le schéma JSON-LD pour les articles automatiquement.

La section de divulgation d’hébergement

Ce que je fais de ce guide

Cloudflare Pages : 0 $ (aucun programme d’affiliation n’existe) Astro : 0 $ (open source, sans système de référence) Commissions totales : 0 $

Ce que je pourrais faire

Si je recommandais l’hébergement WordPress à la place :

Bluehost : ~100 $/vente
SiteGround : 50-120 $/vente
WP Engine : 200 $ +/vente

Pourquoi je ne le fais pas : Cette solution est techniquement meilleure pour les blogs de développeurs. Je gagne 0 $ en la recommandant, c’est exactement pourquoi les sites de “blog” axés sur les revenus n’écriront pas ce guide.

Où je GAGNE réellement de l’argent

Je ne dirige pas une œuvre caritative. Je gagne des commissions sur :

Scala Hosting (~100 $/vente) - Quand tu as besoin d’un vrai hébergement VPS
ChemiCloud (~100 $/vente) - Hébergement WordPress quand le statique ne fonctionne pas
Hetzner (0 $/vente) - Hébergement VPS cloud quand tu as besoin de plus de puissance

Je classe par valeur, pas commissions. Cloudflare Pages est objectivement meilleur pour les blogs de développeurs même s’il ne me paie rien.

La ligne de fond

Ce que tu viens de construire

Blog de développeur professionnel
Score 97/100 PageSpeed (vs 56 sur WordPress)
1,2s Première peinture contenu (vs 3,6s WordPress)
2,4s Indice de vitesse (vs 17,4s WordPress)
0 $/mois hébergement (vs 10-30 $/mois WordPress)
0 heures/mois maintenance (vs 2 heures/mois WordPress)
Contrôle total du code

Résumé de l’investissement en temps

Configuration initiale : 30-45 minutes
Écrire des articles : Même temps que WordPress (markdown vs éditeur visuel)
Publication : git push (30 secondes)
Maintenance mensuelle : 0 minute (vs 2 heures pour mettre à jour WordPress)

La matrice de compromis

Choisis Astro + Cloudflare si :

✅ À l’aise avec markdown
✅ Veux performance maximale
✅ Préfères le workflow basé sur Git
✅ Valorises zéro maintenance
✅ D’accord avec la ligne de commande

Reste avec WordPress si :

❌ Équipe de contenu non technique
❌ Besoin de rôles d’utilisateurs/permissions
❌ Exigences de commerce électronique lourd
❌ Doit avoir un constructeur de pages visuelles
❌ Contenu généré par l’utilisateur en temps réel

Ressources additionnelles

Documentation officielle :

Documentation Astro - Excellente documentation, vraiment utile
Docs Cloudflare Pages - Guides de déploiement
Tutoriel de blog Astro - Apprenez les principes fondamentaux d’Astro
Tutoriel Youtube

Communauté et support :

Astro Discord - Communauté active, gens utiles
Discussions GitHub Astro - Format Q&A
Tu peux aussi me contacter personnellement

Tests de performance :

PageSpeed Insights - Teste ton site
Compare avec websiterating.com - Résultats de migration réels

Guides connexes :

Meilleur hébergement cPanel + LiteSpeed - Quand tu as besoin de plus que du statique
Meilleur hébergement Nginx WordPress - Si tu dois utiliser le CMS WordPress
Hébergement WordPress géré - Si tu dois utiliser l’hébergement WordPress, sache ceci d’abord
Mes avis Scala Hosting et ChemiCloud

Pourquoi ce guide existe

Personne d’autre n’écrit cela car Cloudflare ne paie pas de commissions. Astro n’a pas de programme d’affiliation. Mais cette pile est objectivement meilleure pour les blogs de développeurs, prouvée par la propre migration de websiterating.com montrant une amélioration de 86% de l’indice de vitesse.

Tu mérites de savoir qu’elle existe.

Ton mouvement : Suis les guides de configuration ci-dessus, déploie sur Cloudflare, écris ton premier article. Ou continue à payer 20 $/mois pour un site qui charge en 17 secondes car c’est ce que chaque tutoriel “créer un blog” optimisé pour la commission d’affiliation te dit de faire.