ÉTUDES DE CAS

Comment Harun Studio est passé de WordPress à Astro

|
Harun Studio après avoir migré vers Astro.js

Je me souviens encore qu’il y a quelques années, lorsque j’ai lancé Harun Studio, WordPress était le choix le plus judicieux. J’utilise WordPress depuis 2015 et je n’ai jamais vraiment pensé à apprendre une autre pile comme Astro.

Mais l’IA a tout changé. La technologie Web ne cesse d’évoluer, et avec les progrès rapides de l’IA et des générateurs de sites statiques, j’ai commencé à me demander : WordPress est-il toujours le meilleur choix pour ce site Web ?

Après une évaluation plus approfondie, j’ai décidé de passer de WordPress à Astro.js et d’héberger le site Web sur Cloudflare Pages. Le résultat ? De meilleures performances, un flux de travail plus efficace et des coûts réduits.

Permettez-moi de parcourir ce voyage plus en détail.

Le point de départ : Harun Studio sur WordPress

Avant la migration, le site Web de Harun Studio fonctionnait déjà bien. Honnêtement, je n’ai eu aucun problème majeur avec WordPress. J’ai même réussi à atteindre un score de 100 sur toutes les métriques PageSpeed Insights : performances, accessibilité, meilleures pratiques et référencement.

Voici la pile WordPress que j’ai utilisée :

  • Thème : GeneratePress Premium
  • Générateur de pages : GenerateBlocks Pro
  • SEO : SEO mince
  • Formulaires : Formulaire de contact 7
  • E-mail : Bit SMTP
  • Sécurité : NinjaFirewall
  • Performances : Nginx-Cache, pages volantes
  • Utilitaires : Debloat, Fluent Snippet, Flamingo

Même si le site Web fonctionnait déjà bien, j’ai encore vu des domaines qui pourraient être améliorés :

  1. Maintenance complexe : les thèmes, les plugins et le noyau WordPress nécessitaient tous des mises à jour régulières.
  2. Frais généraux d’abonnement : les abonnements aux thèmes et aux plugins premium ont ajouté des considérations de maintenance récurrentes.
  3. Hébergement : j’avais toujours besoin d’un VPS pour obtenir les meilleures performances, ce qui ajoutait une autre dépendance opérationnelle.
  4. Workflow : WordPress est convivial, mais les mises à jour de contenu pourraient encore être plus efficaces avec une approche plus moderne.

Pourquoi Astro.js ?

Lorsque j’ai commencé à envisager une migration, quelques frameworks modernes étaient sur mon radar, notamment Next.js. Mais Astro s’est démarqué pour plusieurs raisons :

  1. Priorité au contenu : Astro est particulièrement bien conçu pour les sites Web riches en contenu comme Harun Studio.
  2. Hydratation partielle : Astro ne fournit que le JavaScript réellement nécessaire.
  3. Prise en charge multi-framework : il reste flexible si jamais j’ai besoin de React, Vue, Svelte ou autre chose.
  4. Excellentes performances : la génération de sites statiques par défaut produit du HTML très rapide.
  5. Routage basé sur des fichiers : simple et intuitif à comprendre.
  6. Prise en charge native de Markdown/MDX : idéale pour les flux de travail de contenu.
  7. Une communauté et un écosystème en croissance rapide.
  8. Flux de travail natif de l’IA : en tant que développeur qui utilise déjà l’IA dans son travail quotidien, Astro s’adapte bien mieux à un flux de travail axé d’abord sur l’invite. La rédaction d’articles, l’édition, l’exploration de la conception et la création de nouvelles fonctionnalités sont devenues plus faciles sans écrire constamment du CSS, du PHP ou du JavaScript à l’ancienne manière WordPress.

Modèle AstroWind

Pourquoi les pages Cloudflare ?

Outre Cloudflare Pages, j’ai également envisagé Vercel et Netlify. Mais Cloudflare Pages est devenu le choix final car :

  1. Une configuration de plateforme pratique : les capacités disponibles de la plateforme étaient suffisantes pour mon cas d’utilisation.
  2. Intégration DNS et proxy : cela fonctionne bien avec les autres services Cloudflare que j’utilise déjà.
  3. Règles Cloudflare : les redirections et la gestion des demandes sont faciles à gérer.
  4. Présence en Indonésie : Cloudflare a une présence périphérique proche de mon public, ce qui facilite la rapidité pour les visiteurs locaux.
  5. Compatibilité : Vercel et Netlify ne recommandent pas de mettre Cloudflare devant eux, alors que je souhaitais continuer à utiliser les services Cloudflare.
  6. Disponibilité fiable : la disponibilité de Cloudflare est difficile à contester, ce qui est important pour la crédibilité de l’entreprise.

Le processus de migration

Planification de la structure du contenu

Tout d’abord, j’ai à nouveau cartographié la structure du site Web pour améliorer la clarté :

  • Accueil : reste la page d’accueil principale
  • Pages : à propos, contact et conditions
  • Blog : tous les articles de /blog/
  • Services : toutes les pages de services utilisent le préfixe /jasa/

J’ai modifié certaines URL en pensant au référencement. Par exemple, des URL telles que https://harunstudio.com/jasa-perbaikan-website sont devenues https://harunstudio.com/jasa/perbaikan-website. Pour éviter les liens rompus, j’ai utilisé les règles Cloudflare pour les redirections.

Règles Cloudflare

Cadre et outils

Pour accélérer la migration, j’ai utilisé :

  1. Thème Astro : J’ai commencé avec Astroship, même si plus tard j’ai trouvé AstroWind plus complet. AstroWind comprend déjà des balises, des catégories, une bascule sombre/clair et RSS.
  2. Exportation WordPress : J’ai utilisé WordPress Export to Markdown pour convertir le contenu WordPress en Markdown.
  3. Gestion des formulaires : Web3Forms était suffisant pour la gestion des formulaires de contact avec 250 soumissions par mois.
  4. Intégration SEO : Astro SEO a aidé avec Open Graph, Twitter Cards et les balises méta.
  5. Assistance IA : Cursor AI avec Claude Sonnet 3.7 a joué un rôle énorme dans le processus de développement.

Refonte et développement

Le concept global de conception est resté proche de l’ancien site Web WordPress, mais avec Cursor AI et Claude 3.7, j’ai repensé plusieurs sections du site. Le processus s’est avéré beaucoup plus rapide que prévu. L’IA a produit plus de 90 % du code dont j’avais besoin.

Le flux de travail de développement est également devenu plus simple. J’ai travaillé localement pour la préparation, validé les modifications sur GitHub et Cloudflare Pages les a automatiquement récupérées et reconstruites le site. Ce flux de travail a réduit les erreurs car j’ai pu tester localement avant de mettre en ligne.

L’étude de cas que vous lisez actuellement est une preuve très directe de l’utilité de l’IA dans ce flux de travail. Il a été écrit 100% par IA avec Claude Sonnet 3.7. J’ai seulement fourni le contexte et les faits pertinents.

Page d'accueil de Harun Studio après le passage à Astro

Certains des défis auxquels j’ai été confronté :

  1. Apprendre la syntaxe Astro, qui est proche du HTML mais qui possède tout de même ses propres modèles.
  2. Passer de la pensée WordPress à la pensée basée sur les composants.
  3. Adaptation d’une logique de formulaire plus complexe dans Web3Forms.

Pour aider Cursor à produire un code plus précis, j’ai inclus la documentation Astro et Tailwind dans mes invites, ce qui a considérablement amélioré le processus.

Résultats et analyse

Gains de performances significatifs

La différence avant et après la migration était très visible. En utilisant la page d’accueil de Harun Studio comme exemple :

Avant (WordPress) :

  • 37 demandes
  • 2,15 Mo / 1,59 Mo transférés
  • Fin : 4,96 s

Après (Astro) :

  • 17 demandes
  • 527,91 Ko / 255,22 Ko transférés
  • Fin : 0,626 s

Cela signifie :

  • 54 % de requêtes HTTP en moins
  • 75 % de taille de transfert en moins
  • Temps de chargement des pages 8 fois plus rapide

Résultats du diagnostic Harun Studio PageSpeed

Coût et efficacité de la maintenance

  1. L’hébergement est passé d’une configuration dépendante du serveur à un modèle Cloudflare Pages plus léger.
  2. Fini les abonnements premium à des thèmes ou des plugins.
  3. Maintenance plus simple : plus de mises à jour de routine du noyau, des plugins et des thèmes.
  4. Meilleure sécurité par défaut : les sites Web statiques sont naturellement plus sûrs car il n’y a pas de base de données active ni de surface backend traditionnelle à attaquer.

Tableau de comparaison

MétriqueWordPressAstroChangement
Requêtes HTTP3717-54%
Taille du transfert2,15 Mo527,91 Ko-75%
Temps de chargement4,96 s0,626 s8x plus rapide
EntretienComplexeMinimePlus simple
Modèle d’hébergementConfiguration dépendante du VPSPages CloudflareSimplifié
Modèle de thème/pluginThème et plugins premiumComposants et intégrations AstroMoins de dépendances récurrentes

Meilleure productivité

Avec des outils d’IA comme Cursor et Claude 3.7, le développement et les mises à jour de contenu sont devenus beaucoup plus efficaces :

  1. Rédaction de blog : l’IA aide à la rédaction et au formatage.
  2. Conception et développement : les modifications UI et UX peuvent être mises en œuvre beaucoup plus rapidement.
  3. Débogage : l’IA permet d’identifier et de résoudre rapidement les problèmes.
  4. Déploiement fluide : GitHub + Cloudflare Pages rend le déploiement simple et contrôlé.

Le flux de travail est devenu beaucoup plus efficace car Cursor + Claude Sonnet 3.7 sont désormais véritablement fiables. En pratique, je peux me concentrer sur les décisions en matière de direction, de contrôle qualité et d’architecture, tandis qu’une grande partie du travail technique répétitif est déléguée à l’IA. Pour le contenu, je peux préparer le brouillon et le contexte, puis utiliser l’IA pour l’édition et la finalisation. Pour la conception et les fonctionnalités, je peux donner une invite claire et répéter jusqu’à ce que le résultat soit correct.

Astro vs WordPress : quand choisir lequel ?

Pour être honnête, je ne recommande pas Astro à tout le monde. Tout le monde n’est pas à l’aise avec le code ou avec les outils d’IA comme Cursor et Windsurf.

WordPress reste le meilleur choix si :

  • vous souhaitez une gestion et une édition de contenu plus faciles
  • votre équipe n’a pas les connaissances techniques nécessaires pour gérer un site basé sur du code
  • vous devez modifier le contenu très fréquemment et souhaitez le faire vous-même

Astro est un meilleur choix lorsque :

  • vous êtes sérieux au sujet de votre entreprise et ne souhaitez pas consacrer trop de temps à la maintenance du site Web
  • vous avez déjà l’habitude de déléguer le travail de développement à un développeur
  • vous souhaitez réduire les coûts de maintenance à long terme
  • vous souhaitez économiser sur les coûts d’hébergement car des plateformes comme Cloudflare Pages et Vercel sont déjà largement suffisantes pour les sites Web statiques

Il convient également de noter que WordPress peut toujours atteindre de bonnes performances et passer les Core Web Vitals, à condition que la pile soit légère, par exemple GeneratePress avec GenerateBlocks.

Ce qui vient ensuite

Après la migration, quelques prochaines étapes pour Harun Studio sont déjà claires :

  1. Croissance du blog : plus d’études de cas et de tutoriels.
  2. Prise en charge i18n : prise en charge multilingue.
  3. Surveillance Web Vitals : surveillance continue des Core Web Vitals.
  4. Exploration progressive des applications Web.

Conclusion

Passer de WordPress à Astro.js s’est avéré être la bonne décision pour Harun Studio. Avec de meilleures performances, des coûts réduits et un flux de travail plus efficace, le site Web est désormais dans une position plus solide pour soutenir l’entreprise au fil du temps.

Si vous envisagez une migration similaire, Astro.js mérite une attention particulière, surtout si votre site Web est axé sur le contenu. Avec des outils d’IA modernes comme Cursor et Claude, la migration et le développement futur peuvent évoluer beaucoup plus rapidement.

Harun Studio propose également un service de migration WordPress vers Astro si vous souhaitez bénéficier des avantages d’une pile moderne sans passer vous-même par la courbe d’apprentissage.

Ressources et outils utilisés

Envisagez-vous de déplacer votre site Web de WordPress vers une pile plus moderne comme Astro ? Ou avez-vous des questions sur le processus de migration ? N’hésitez pas à nous contacter et nous pourrons en discuter davantage.

Services associés

Willya Randika

Willya Randika

Fondateur de Harun Studio, développeur web, blogueur et spécialiste de l’hébergement. Il aide les entreprises à construire des sites plus sains grâce au design, au développement et à la maintenance à long terme.