Le développement Web de nos jours est devenu très compliqué grâce aux créateurs de milliers de nouvelles façons de faire la même chose. Au début du développement Web, il disposait de PHP et jQuery qui faisaient à peu près tout ce dont nous avions besoin. Mais bon, les choses ont changé maintenant.

Longue histoire courte

Je cherchais donc un moyen de créer mon site Web personnel. Qui aurait eu des blogs et une vitrine de mon projet, c'est tout, ce n'est pas grave, n'est-ce pas ? Eh bien, c’est aussi la même chose. Donc, ma première pensée était de les utiliser comme pile technologique

• Réagir
• Firebase/Supabase
• Tailwind CSS
• Pages Cloudflare pour le déploiement

Eh bien, cela pourrait être une fin heureuse mais... ?

Comme je l'ai déjà dit, j'aurai besoin d'une section blog et, ironiquement, bloguer et réagir ne vont pas bien ensemble. Étant donné que React sert essentiellement à créer des WebApps et non des sites Web axés sur le contenu. Maintenant, ceux qui ne savent pas pourquoi, voici un résumé de chatGPT

Pourquoi React n'est pas adapté aux sites axés sur le contenu

ChatGPT a dit :

React n'est pas idéal pour les sites axés sur le contenu, principalement parce qu'il repose sur le rendu côté client, ce qui peut avoir un impact négatif sur le référencement et les temps de chargement initiaux des pages. Les sites axés sur le contenu bénéficient du rendu côté serveur (SSR) ou de la génération de sites statiques (SSG), que React ne gère pas directement. Des outils comme Next.js ou Gatsby, qui étendent React, sont mieux adaptés à ces besoins.

Cible suivante : NextJs

Eh bien, il est évident que j'ai besoin de SSR pour un site de blog car je voulais une bonne indexation par les moteurs de recherche et un aperçu professionnel des liens vers les réseaux sociaux. NextJs pourrait me donner les deux, mais il y a toujours un problème, et c'est plutôt personnel.

Vous voyez, j'ai toujours aimé utiliser les pages Cloudflare et je voulais m'en tenir à cela. De plus, je voulais que le routage gratuit des e-mails de Cloudflare ait une adresse e-mail personnalisée attachée à mon domaine, réduisant ainsi le coût.

NextJS chez Cloudflare

J'ai essayé de déployer le site nextJS sur les pages cloudflare via leur documentation officielle. Eh bien, les choses ne se sont pas bien passées. Je n'ai pas pu déployer là-bas, j'ai essayé des heures pour trouver une solution et rien n'a fonctionné. Disons simplement que nextJS et cloudflare ne allaient pas bien ensemble pour moi. Donc, si quelqu'un de Vercel ou Cloudflare lit ceci, corrigez-moi si j'ai raté quelque chose.

Eh bien, à ce stade, j'étais désespéré et la dernière option que j'avais était SSG.

Solution suivante : SSG

Maintenant, SSG est une bonne chose et je comprends son importance ici. Le problème est que je n'ai jamais travaillé avec SSG auparavant et qu'il existe plusieurs voies d'accès. Il y a des choses comme Hugo, Gatsby, Astro bla bla. Et probablement plus. Maintenant, je ne connaissais aucun d'entre eux et à ce stade, j'étais tellement frustré que je n'étais pas prêt à investir un peu dans l'apprentissage d'un nouvel outil pour une simple application de blog. Alors je me suis dit merde, je ferai mon propre truc.

Création de mon propre générateur de site statique.

Quelques raisons pour lesquelles j'ai décidé de développer mon propre générateur de site statique

1. J'étais frustré (bien sûr mdr)
2. Puisque je crée mon propre outil pour mon propre truc, j'aurai le contrôle total sur la façon dont les pages seront générées. À quoi ressembleront-ils.
3. J'aime réinventer.
4. J'avais du temps libre à consacrer.

Le plan

Le plan était une manière démodée de créer un site Web. Les articles séparés auront leurs propres pages HTML.

Voici le plan complet :

1. J'écrirai sur des fichiers Palin Markdown
2. Utilisez Python pour analyser la démarque en HTML simple
3. J'aurai déjà un modèle dans lequel différentes sections seront injectées dynamiquement.
4. J'aurai également un fichier de configuration correspondant à l'article. La hiérarchie des fichiers ressemblera donc à ceci

articles/
├── art-1
│   ├── art.md
│   └── config.json
├── art-2
│   ├── art.md
│   └── config.json
├── art-3
│   ├── art.md
│   └── config.json
└── art-4
    ├── art.md
    └── config.json

Par conséquent, chaque article aura son propre dossier et le dossier aura les fichiers config.json et art.md. Le script python prendra le template.html et insérera du contenu dynamique dans ce modèle HTML, par exemple le titre de l'article, slug, vignettes du fichier de configuration et article principal du fichier de démarque analysé. Plus important encore, il générera dynamiquement des balises méta pour le référencement et les médias sociaux. Ensuite, il écrira les modifications dans un fichier appelé art/.html afin que le lien de publication soit example.com/art/slug.

Comment a-t-il été intégré ?

Eh bien, j'ai développé une interface CLI pour interagir avec le générateur. Je l'ai nommé fit vous savez comme dans F it. Il propose les commandes ou options suivantes :

$ ./fit --help
fit: also known has f**k it build system
A build system for my personal site developed by Shazin

USAGE
     fit 
COMMANDS
    init                Creates a new post template at articles/art-[n]
    build art-       Builds the specified article
    sync                Syncs the global articles index to homepage
    uploader            Launches the GTK GUI image uploader
    upload   Uploads the specified file to firebase
    deploy              Deploys local changes to remote repository
    help, -h, --help    Displays this help menu

Mécanisme de déploiement

Donc, comme je l'ai dit, je voulais utiliser les pages Cloudflare pour le déploiement. Fondamentalement, ce que j'ai fait, c'est que j'ai créé une branche appelée prod et chaque fois que la commande ./fit déployer est exécutée, elle copiera essentiellement tous les fichiers nécessaires dans la branche prod et transmettra les modifications à github. Ensuite, cloudflare créera et redéployera automatiquement les modifications.

Remise des images

Afin de gérer les images ou tout fichier statique que j'ai utilisé le stockage Firebase, le téléchargeur ./fit ouvrira un téléchargeur GUI basé sur GTK à partir duquel je peux télécharger une image et il me donnera l'URL publique que je peux ensuite copie, voici à quoi cela ressemble :

Interface de téléchargement

Interface de post-téléchargement

Interface CLI

Il existe également une interface CLI qui peut être utilisée par ./fit upload

Fond d'écran ambiant dynamique

Donc, j'ai pensé que lorsque je serai celui qui gère moi-même toute la construction et la génération, je pourrai certainement faire des trucs sympas avec, j'ai donc ajouté un arrière-plan ambiant coloré et dynamique à chaque message. L'idée était de choisir une couleur moyenne dans l'image miniature, puis de l'assombrir et de l'utiliser comme arrière-plan. J'ai également choisi une couleur primaire pour les liens et les boutons de l'image miniature et honnêtement, ça a l'air vraiment cool, voici une capture d'écran

Commentaires et discussion

Comme je travaillais avec pratiquement aucune base de données ni aucun service backend, j'ai dû choisir un service externe pour cela et quoi d'autre fait cela de mieux que Disqus .

Est-ce que ça valait le coup ?

Eh bien, pour être honnête, comme je l'ai dit, je passais du temps libre, alors oui, ça valait vraiment le coup, et cela ne m'a pas pris longtemps pour être honnête, j'ai passé 2-3 jours pour ce projet complet et je me suis vraiment amusé à construire quelque chose de créatif.

Conclusion

Donc, j'ai eu une expérience vraiment amusante avec ce projet et j'espère y apporter plus d'améliorations et y ajouter plus de fonctionnalités. Pour le moment, c'est tellement basique et simple, c'est ce que je voulais. Si vous aimez ce projet ou souhaitez que je l'open source, faites-le moi savoir. Oh et voici le lien du site dont je criais à propos de shazin.me Merci d'avoir lu.