Comment j'ai crée mon site internet?

Mon site internet est pensé pour être mon aide mémoire, mon terrain d'expérimentation qui me permet d'apprendre de nouvelles technologies, de tester de nouveaux outils et de pousser mes limites dans la compréhension du fonctionnement du web et des outils digitaux. C'est aussi un espace pour échanger avec les personnes qui s'intéressent à mon travail. Ce site est le résultat de plusieurs itérations au fil des années et cette version est la troisième.

Je l'ai developpé comme une mini-saas application avec plusieurs composantes intéressantes dont la gestion des comptes, des emails, des commentaires, l'utilisation de l'intégration et déploiement en continue, la gestion des caches etc...

Pendant que c'est encore tout récent dans ma tête, je voulais documenter cette version de mon site pour présenter comment il fonctionne, quels outils, logiciels, et technologies il utilise.

Objectifs

les versions précédentes de mon site internet étaient principalement des vitrines pour afficher mes compétences, un peu comme un CV. Pour cette nouvelle version, je voulais avoir la possibilité d'être plus présent et alimenter régulièrement mon blog. Pour y parvenir mon site devait respecter plusieurs critères:

Réduction de la friction pour rédiger les articles

Je n'ai jamais actualisé les anciennes versions de mon site internet. L'une des raison principale était la difficulté de mettre à jour le site internet qui étaient hébergé sur un serveur. Rediger des articles, les mettre à jour ou les supprimer n'étaient pas assez fluide.

En construisant ce nouveau site, j'ai défini une architecture me permettant de faire de l'intégration et du déploiement continue à l'aide de Github et d'utiliser des fichiers au format Markdown pour rédiger le contenu des articles. Aujourd'hui, rajouter un articles revient à créer un fichier MDx, remplir les informations nécessaires et faire un "pull & push request" et Voilà, le nouveau contenu est présent et publié sur internet.

Cette nouvelle approche me permet de me focaliser uniquement sur la création du contenu.

Combinaison d'outils pratiques

il existe de nombreux outils que j'ai voulu tester comme twilio / nexmo, next js, AWS, cloudflare etc... En trouvant le moyen de combiner tous ces outils, j'ai pu me créer un système d'alerte de messagerie, un site internet accessible rapidement et une application avec plusieurs API pour rendre l'expérience utilisateur ludique.

Rapidité

Je voulais un site rapide pour permettre à mes lecteurs de trouver facilement l'information dont ils ont besoin et reduire les frictions qu'ils peuvent rencontrer sur d'autres site internet et/ou blog. Un site internet qui n'est pas rapide, n'est pas agréable à visiter. Pour y arriver, j'ai géré la mise en cache des images et des requêtes.

Interactif

Je veux que mes lecteurs puissent me donner leur avis sans que je n'ai besoin de passer par un service tiers et les obliger de fournir leur informations pour commenter mes articles. C'est la raison pour laquelle j'ai developpé un système de commentaires accessible uniquement pour les personnes qui sont connectés à mon site. Bien sure, les personnes ont la possibilité de supprimer leur compte à tout moment. En faisant celà, je m'assure que mes lecteurs n'aient pas leur adresse email diffusé et surtout je leur donne la possibilité de me dire ce qu'ils pensent directement, voire de m'aider à m'améliorer s'ils le veulent.

Mon Stack

Next.js

Next.js est mon framework front-end React de préference. J'apprécie particulièrement son utilisation à cause se son système de gestion des routes à l'aide de système d'organisation des fichiers. C'est un système très intuitif et facile à prendre en main qui permet de bien construire ses routes. Next.js possède également une grande communauté qui a permet de hisser la plateforme à son niveau actuel. Quand je suis bloqué je me réfère à Next.js discussions sur github. Presque tout le temps, il y'a déjà une personne qui a réussi à trouver le moyen de resoudre un problème complexe.

Styled Component

Styled component est mon outil Css par défaut lorsque. Il me permet de créer des composants très modulables. Et parce que j'écris toutes mes styles, je peux ainsi maîtriser le le CSS que j'envoie. Il s'agit d'un framework CSS-in-JS qui utilise des templates litérals. Grâce à cet outil, je peux créer des composants react sans avoir besoin d'ouvrir mon fichier css. le style fait désormais parti du composant. De plus, il accepte des propriétés et un tas d'autres astuces qui lui donnent des super pouvoirs.

import { FC, HTMLAttributes } from "react"
import styled from "styled-components"

const Div = styled.div`
  background: red;
`

const Test: FC<HTMLAttributes<HTMLDivElement>> = props => {
  return <Div {...props}>Div de couleur rouge</Div>
}

export default Test

MDX

MDX qui est une combinaison entre Markdown et React (Jsx). Ce format me permet d'incorporer du code react dans mon document sans friction. Il permet d'attribuer de super pouvoir à son document Markdown. Par exemple, il est possible de rajouter un bloc de code avec un bouton permettant de copier le code.

Ci-dessous à quoi ressemble un fichier md :

Hello there! This is a paragraph.

This is another paragraph, with some **bold text**.

Here's an unordered list:

- Apple
- Banana
- Carrot

Quand il est combiner avec react, son format change et devient mdx. Il nous permet de rajouter des composantes réact:

import DivColor from "../component/DivColor"

Ce fichier inclus des composants react

<DivColor color="Rouge"/>

AWS et API

Tellement puissant cette plateforme. Elle ne cesse de développer des outils et possède une bonne documentation qui est malheuresement en anglais pour la plupart. C'est l'espace de deploiement des api que j'utilise sur mon site.

le système de commentaires des articles par exemple est connecté à une lambda fonction qui permet d'écrire, de mettre à jour et supprimer les informations dans la base de données dans mes collections. Pour chaque commentaires, correspond un enregistrement au format suivant:

{
  //id unique du message
  "_id":"TTYSIbIVvdy105fdsd",
  // nom de l'application
  "appId":"nom_de_lapplication",
  //slug de l'article
  "articleId":"comment-jai-cree-mon-site-internet",
  //corps du message envoyé
  "body":"Super article",
  "linkImageUser":"https://link-vers-la-photo-du-user",
  //id du message parent s'il existe
  "parentId":null,
  //id de la personne qui envoie le message
  "userId":"ShNYf4sM1kCZgUMsNcav1",
  //Nom et prenom si disponible
  "userName":"John Doe",
  //date de création du message
  "createdAt":"2022-07-08",
  //date de la dernière modification
  "updatedAt":"2022-07-08"
}

Mongo DB

J'utilise la base de données pour enregistrer les commentaires, les mentions j'aime pour chaque articles. Je préfère utiliser mongoDB qui une base de données documentaires parce qu'il n'y a pas de relation complexe entre mes données et que leur schema peut très facilement varier en fonction de mes différentes besoins. De plus, il est facile à mettre en place et pour l'utilisation que j'en fait, je peux me servir de la solution cloud qu'il propose mongodb atlas.

Les petits plus

les exemples de codes