Réflexions derrière le lancement de ce blog
Je partage les points et contenus étudiés lors du lancement de ce blog, du but recherché au choix des frameworks frontend et du CMS headless.
J'ai rassemblé mes réflexions initiales lors du lancement de ce blog.
【Objectif】
En bloguant sur les technologies que j'acquiers, mon but est de parvenir à une compréhension précise et approfondie de la technologie et, en bonus, de tenter de la monétiser pour financer la maintenance du serveur. Par conséquent, les priorités sont les suivantes :
- Acquérir les technologies les plus récentes.
- Maintenir les coûts d'exploitation aussi bas que possible. Si les dépenses dépassent les revenus, la continuité devient difficile.
- Minimiser les efforts hors rédaction, tels que la gestion opérationnelle et la publication des articles.
- Le contenu des articles sera principalement technique, suivi par mes loisirs.
【Considérations sur l'environnement d'exploitation】
J'ai répertorié les méthodes de fonctionnement pour démarrer un blog.
<Inconvénients des sites gratuits>
- Ne permet pas d'acquérir les dernières technologies.
- Les sites gratuits affichent automatiquement des publicités, augmentant les affichages qui ne génèrent aucun revenu pour vous. De plus, des publicités indésirables peuvent s'afficher.
- Comme il s'agit d'une plateforme de blog clé en main, l'effort requis est probablement minimal.
<Inconvénients des sites payants>
- Ne permet pas d'acquérir les dernières technologies.
- Le problème est que cela coûte cher. Risque élevé d'abandonner sans continuer.
- C'est probablement ce qui demande le moins d'efforts administratifs.
<Indépendant : WordPress + Serveur domestique + Cloudflare Tunnel>
- Seul Cloudflare Tunnel est une nouveauté.
- Pratiquement gratuit, donc la continuité is simple.
- WordPress lui-même est devenu très complexe, ce qui a tendance à compliquer la gestion comme les mises à jour d'articles, entraînant un certain coût d'apprentissage. *Dans une mesure acceptable ?
<Indépendant : Framework JS + GitHub + Headless CMS + Cloudflare Pages>
- Gestion du contenu via Headless CMS, une nouvelle forme de CMS, combinée à un framework JS.
- Pratiquement gratuit, l'objectif est donc atteint.
- Fonctionner via SaaS est bien, mais si le service s'arrête, vous êtes bloqué. Augmentation des coûts et des efforts de migration.
【Environnement de développement】
Par conséquent, sur la base des considérations ci-dessus et des informations sur les frameworks ci-dessous, dans le cadre de mes études pour de futurs développements d'applications à grande échelle, j'ai décidé de construire ce blog avec un framework frontend + headless CMS + Cloudflare Pages.
<À propos de l'éditeur>
Pour coder, il est courant d'installer un environnement de développement intégré (IDE) et d'ajouter des extensions adaptées. VS Code est optimal, mais comme l'éditeur léger et rapide Zed propose désormais des extensions Astro, je vais l'utiliser.
<Environnement de bureau pour le développement>
Le développement de code nécessite une intégration avec d'autres services cloud comme npm (Node Package Manager) et GitHub. (Référence : npx signifie "Node Package Execute". Contrairement à npm, c'est un outil en ligne de commande pour exécuter temporairement des packages Node.js sans les installer globalement, évitant ainsi de polluer l'environnement de développement.)
Système d'exploitation | Caractéristiques |
Linux | On estime que 70 % des serveurs web mondiaux tournent sous Linux. Il possède une part de marché élevée sur les serveurs et propose le plus grand nombre d'outils de développement. Cependant, le raffinement de l'interface graphique et le support des applications de bureau sont inférieurs à ceux de Mac ou Windows, le rendant moins adapté comme machine principale de développement. |
macOS | Développé à l'origine comme un système de type Unix, il est très performant avec les commandes Linux, et la plupart d'entre elles peuvent être utilisées. L'interface graphique est excellente et macOS est choisi par de nombreux développeurs. |
Windows | Sa part de marché pour un usage professionnel et général est écrasante. Adapté également aux jeux vidéo, il détient la première place pour les ordinateurs de bureau. En installant WSL (Windows Subsystem for Linux), vous pouvez exécuter un environnement Linux complet sur Windows, tirant le meilleur des deux mondes. Depuis la version 2.0, de nombreux développeurs l'utilisent. |
Un environnement de blog ne nécessite pas de configuration avancée, donc Mac ou Windows conviennent parfaitement. Mais pour m'éviter d'installer WSL, je vais procéder avec macOS cette fois-ci.
【Dev Container】
Dans un projet collaboratif, unifier l'environnement de développement avec DevContainers est très courant. Cependant, installer DevContainers pour un projet géré par une seule personne semble ajouter plus de complexité de maintenance, j'ai donc mis cette idée de côté pour le moment.
【Caractéristiques des frameworks frontend】
Généralement, une collection de fonctions et de bibliothèques pratiques structurées selon une "philosophie de conception" pour construire un site est appelée un framework. Suivre cette philosophie lors de l'écriture du code rend le développement plus efficace. Bien que cela nécessite de comprendre le fonctionnement et d'apprendre la syntaxe, cela crée une cohérence dans le code, facilitant sa lecture et limitant les bugs, ce qui est essentiel pour les grands sites.
Nom du framework | Créateur | Caractéristiques |
React (Beaucoup d'utilisateurs) | Meta (Facebook) | L'interface est gérée par composants et le rendu est rapide car seules les différences sont mises à jour via le DOM virtuel. Plus proche d'une bibliothèque d'interface que d'un framework. *Personnellement, je ne l'apprécie pas |
Vercel | Un framework full-stack basé sur React. Alors que React est uniquement côté client, Next.js inclut le côté serveur, ce qui permet un rendu optimal et un affichage plus rapide. *Actuellement obsolete ! (Le PDG est insupportable, donc je ne l'aime plus) | |
Vue.js (Beaucoup d'utilisateurs) | Evan You | Simple avec un coût d'apprentissage faible pour les développeurs indépendants. Offre de nombreuses possibilités grâce à diverses combinaisons. Basé sur des composants. Facile à associer à d'autres bibliothèques. Nombreuses ressources disponibles. Personnellement, je l'apprécie. |
Alexandre Chopin, etc. | Un framework full-stack basé sur Vue.js. Particulièrement efficace pour construire des sites en mode SPA (Single Page Application). | |
Astro Technology Company | Astro génère l'intégralité de la page en HTML statique et offre d'excellentes performances en supprimant le JavaScript inutile. Conçu pour permettre l'utilisation conjointe de divers frameworks comme React ou Vue. Mieux adapté aux MPA qu'aux SPA, l'affichage initial est très rapide. Le framework idéal pour un blog. |
<Référence>
- Résultats de la migration de Next.js vers Astro
- React possède des dérivés comme React Native pour créer des applications mobiles natives. Pour des services multi-plateformes, le coût d'apprentissage est amorti.
- Cependant, pour le développement multi-plateforme iOS et Android, Flutter de Google suscite plus d'intérêt que React Native. L'interface utilisateur étant partagée, le comportement reste similaire sur tous les modèles, ce qui est idéal pour les entreprises. Je ne vois pas de raison de forcer l'usage de React.
【CMS Headless Open Source (Gratuits)】
Il existe peu de CMS headless open-source utilisables sur un serveur privé. Comme microCMS, beaucoup d'entreprises les proposent sous forme de services SaaS dans le cloud. Cependant, l'open source présente de grands avantages si vous souhaitez conserver le contrôle de vos données ou si vous redoutez les frais d'abonnement lors d'une montée en charge. Un serveur privé reste toutefois nécessaire.
Nom | Caractéristiques |
Probablement le CMS headless open-source le plus célèbre. Licencié sous MIT. Gratuit pour un usage personnel et commercial, avec une version payante plus avancée. *Le noyau semble basé sur React. | |
Sanity | Ses points forts sont un schéma de données flexible et l'édition collaborative en temps réel. Adapté à la gestion de contenu dynamique. Type cloud (SaaS) avec offre gratuite. |
Écrit en JavaScript, fonctionne sous Node.js. Distribué sous licence MIT. Image officielle sur Docker Hub. Un CMS headless spécialisé pour les blogs, avec une structure proche de WordPress. | |
Anciennement Netlify CMS. Licencié sous MIT. Peu de documentation en français. CMS open-source basé sur Git, connecté directement au dépôt. | |
Très utilisé dans les grandes entreprises. Écrit en JavaScript, fonctionne sous Node.js. Convertit les bases de données SQL existantes en APIs ultra-rapides. | |
Basé sur Python. Adopté par la NASA et Google. | |
La base de données semble limitée à MongoDB. Basé sur JavaScript. | |
Utilisé par Unity. Licencié sous Apache 2.0. | |
Développement par une entreprise. | |
Licence GPL 3.0. Enregistre les fichiers au format JSON sans base de données. |
<Sélection du CMS Headless>
S'agissant d'un blog personnel, il doit impérativement rester gratuit pour être viable. Le choix s'est donc restreint aux solutions open-source sous licence MIT comme Strapi, Ghost et Directus. Parmi elles, Strapi est apparue comme la plus adaptée pour de futures extensions ou du e-commerce, c'est pourquoi je l'ai choisie.
【Conclusion】
J'ai donc opté pour Astro + Strapi + AlloyDB (PostgreSQL) + TailwindCSS + Cloudflare Pages + MacBook Pro + Zed comme socle technique de ce blog. Le point clé réside dans le workflow de build.
- Lancer le conteneur Strapi sur Mac et rédiger les articles.
- Lors de la phase de build, extraire les pages statiques et les images depuis Strapi (pas besoin de faire tourner Strapi en production !).
- Déployer l'ensemble des fichiers statiques générés par le build sur Cloudflare Pages. Le site est entièrement statique avec un minimum de JavaScript. L'affichage est ultra rapide.
L'avantage majeur est que la production est **entièrement composée de données statiques**. On n'utilise Strapi que pour rédiger les articles.