Cet article provient de mon article de blog. J’ai mis cet article pour montrer comment vous pouvez rédiger des articles de blog en utilisant le thème Point Rouge.
Mon expérience dans le développement de mon premier site web de portfolio et d’un blog utilisant NextJS et un CMS headless.
Motivation
J’ai toujours pensé à lancer mon propre site web avec mon nom de domaine personnalisé (satnaing.dev) depuis ma vie étudiante. Mais cela ne s’est jamais produit jusqu’à ce projet. J’ai réalisé plusieurs projets et travaux sur le développement d’applications Web mais je n’ai pas fait d’effort pour le faire.
Alors, « et le blog ? » vous pouvez demander. Oui, le blog est également dans ma liste de projets depuis un certain temps. J’ai toujours voulu réaliser un projet de blog en utilisant certaines des dernières technologies. Cependant, j’ai été occupé avec mes travaux et autres projets, donc ce projet de blog n’a jamais démarré.
Aujourd’hui, je préfère développer moins de projets, mais avec davantage d’attention portée à leur qualité. Une fois un projet terminé, j’ajoute généralement un fichier README détaillé au dépôt GitHub. Cependant, un README convient surtout aux aspects techniques. Je voulais aussi raconter mes expériences et les difficultés rencontrées : j’ai donc décidé de créer mon propre blog. À ce stade, j’avais également acquis suffisamment d’expérience et de confiance pour me lancer.
Pile technologique
Pour le front-end, je voulais utiliser React. Mais React seul n’est pas suffisant pour le référencement ; et j’ai dû prendre en compte de nombreux facteurs comme le routage, l’optimisation de l’image, etc. J’ai donc choisi NextJS comme ma pile frontale principale. Et bien sûr TypeScript pour la vérification du type. (On dit que vous adorerez TypeScript quand vous y serez habitué 😉)
Pour le coiffage, j’utilise Tailwind CSS. En effet, j’aime l’expérience de développement offerte par Tailwind et elle offre beaucoup de flexibilité par rapport à d’autres bibliothèques d’interface utilisateur de composants telles que MUI ou React Bootstrap.
Tout le contenu de ce projet réside dans le référentiel GitHub. Tous mes articles de blog (y compris celui-ci) sont écrits au format de fichier Markdown car j’y suis très habitué. Mais pour écrire Markdown avec son frontmatter sans effort, j’utilise Forestry CMS headless. Il s’agit d’un CMS basé sur Git qui peut servir Markdown et d’autres contenus. Pour cette raison, je peux écrire mon contenu en utilisant Markdown ou l’éditeur wysiwyg. De plus, écrire des documents de présentation avec cela est un jeu d’enfant.
Les images et les ressources sont hébergées sur Cloudinary. J’ai connecté Cloudinary à Forestry afin de les gérer directement depuis le tableau de bord.
En conclusion, voici la pile technologique que j’ai utilisée pour ce projet.
- Front-end : NextJS (TypeScript)
- Style : TailwindCSS
- Animations : GSAP
- CMS : CMS headless pour la foresterie
- Déploiement : Vercel
Caractéristiques
Voici certaines fonctionnalités de mon portfolio et de mon blog
Optimisé pour le référencement
L’ensemble du projet est développé en gardant à l’esprit le référencement. J’ai utilisé des balises méta, des descriptions et des alignements de titres appropriés. Ce site est désormais indexé par Google.
Vous pouvez rechercher ce site web sur Google en utilisant des mots clés tels que « sat naing dev »
De plus, ce site web s’affichera bien lorsqu’il sera partagé sur les réseaux sociaux grâce à des balises méta correctement utilisées.
Plan du site dynamique
Le plan du site joue un rôle important dans le référencement. Pour cette raison, chaque page de ce site doit être incluse dans sitemap.xml. J’ai créé un plan de site généré automatiquement sur mon site web chaque fois que je crée un nouveau contenu, des balises ou des catégories.
Thèmes clairs et sombres
En raison de la tendance des thèmes sombres ces dernières années, de nombreux sites Web incluent aujourd’hui un thème sombre prêt à l’emploi. Certes, mon site web prend également en charge les thèmes clairs et sombres.
Entièrement accessible
Ce site web est entièrement accessible. Vous pouvez naviguer en utilisant uniquement le clavier. J’ai mis toutes les meilleures pratiques d’amélioration, comme l’inclusion de texte alternatif dans toutes les images, l’absence de saut de titres, l’utilisation de balises HTML sémantiques, l’utilisation correcte des attributs aria.
Champ de recherche, catégories et balises
Tous les contenus du blog peuvent être recherchés par champ de recherche. De plus, le contenu peut être filtré par catégories et balises. De cette façon, les lecteurs du blog peuvent rechercher et lire ce qu’ils veulent vraiment.
Performances et score Lighthouse
Grâce à une mise en œuvre soignée et au respect des bonnes pratiques, ce site obtient d’excellentes performances et un très bon score Lighthouse.
Animations
Au départ, j’ai utilisé Framer Motion pour ajouter des animations et des micro-interactions. Lorsque j’ai voulu créer des animations plus complexes et des effets de parallaxe, son intégration m’a toutefois semblé moins pratique. J’ai donc choisi GSAP pour l’ensemble des animations. Cette bibliothèque très populaire permet de réaliser des effets complexes et avancés. Vous pouvez observer des animations et des micro-interactions sur presque toutes les pages du site.
Sortie
En conclusion, ce projet m’apporte beaucoup d’expérience et de confiance dans le développement de sites de blogs (SSG). Maintenant, j’ai acquis des connaissances sur le CMS basé sur Git et sur la façon dont il interagit avec NextJS. J’ai également appris le référencement, la génération de plans de site dynamiques et les procédures d’indexation Google. Je ferai de meilleurs projets à l’avenir. Alors restez à l’écoute ! ✌🏻
Et… enfin et surtout, je voudrais dire “merci” à mon ami Swann Fevian Kyaw (@ToonHa) qui a dessiné une belle illustration pour ma section héros du site.
Liens du projet
- Site web : https://satnaing.dev/
- Blog : https://satnaing.dev/blog
- Dépôt : https://github.com/satnaing/my-portfolio