Comment créer un site Web décentralisé

Lancer un site internet décentralisé est une démarche plus accessible qu'on ne le pense généralement. La distinction majeure entre un site décentralisé et un site web classique réside dans son hébergement sur un réseau distribué. La majeure partie des autres aspects reste comparable.

Ce guide va explorer les étapes nécessaires pour concevoir et déployer un site web décentralisé. Pour suivre ce processus, un nom de domaine Web3 et une petite quantité d'ETH dans votre portefeuille seront nécessaires.

1. Préparation des fichiers de votre site web

Commencez par organiser les fichiers essentiels de votre site. Vous pouvez aussi utiliser un modèle de site gratuit disponible chez différents fournisseurs pour démarrer votre site décentralisé. Nous allons choisir un modèle sur Free CSS pour notre projet.

Rendez-vous sur Free CSS, choisissez un modèle et téléchargez-le. Ensuite, décompressez l'archive ZIP dans un répertoire, contenant chaque fichier distinct, comme illustré ci-dessous.

Si vous créez votre site de A à Z, assurez-vous de regrouper tous les fichiers dans un seul dossier.

2. Téléchargement de vos fichiers sur IPFS

IPFS (InterPlanetary File System) est le système de stockage de fichiers décentralisé le plus répandu. Il repose sur un réseau pair à pair mondial qui travaille ensemble pour héberger des fichiers.

Dans un premier temps, vous pouvez héberger les fichiers de votre site web sur votre propre ordinateur en utilisant un nœud IPFS exécuté localement. L'inconvénient de cette méthode est que votre ordinateur doit être en ligne pour que votre site décentralisé soit accessible.

Une alternative consiste à passer par une plateforme d'hébergement IPFS telle que Pinata, Infura ou Fleek pour héberger et diffuser vos fichiers sur le réseau IPFS. Cela les rendra accessibles à tous. Toutefois, certains de ces services impliquent un abonnement payant.

Téléchargement sur votre nœud IPFS

Il faut commencer par mettre en place un nœud IPFS local.

Installez IPFS sur votre ordinateur. Vous pouvez télécharger l'application pour PC ou employer l'extension Brave pour configurer votre nœud IPFS.
Une fois configuré, accédez au tableau de bord IPFS, cliquez sur Importer et téléchargez le dossier de votre site.
Pour vérifier le bon fonctionnement de votre site, cliquez sur les trois points à droite du fichier, choisissez Partager le lien, copiez le lien IPFS et ouvrez-le dans un nouvel onglet de Brave. Le site devrait s'afficher correctement si Brave est configuré adéquatement.

Téléchargement sur Fleek

Fleek permet le téléchargement gratuit de sites web sur IPFS, tandis que Piñata requiert un abonnement payant. Cependant, il est nécessaire de déployer votre site web sur GitHub avant d'utiliser Fleek.

Ouvrez votre tableau de bord GitHub et créez un nouveau dépôt. Ensuite, téléchargez les fichiers de votre site web sur votre dépôt GitHub à l'aide de Git, un système de contrôle de version bien intégré à GitHub. Pour simplifier la démonstration, enregistrez le dossier de votre site web sur votre bureau dans un répertoire nommé dWeb.
Allez sur Git-scm, téléchargez et installez la dernière version de Git.
Ouvrez Git Bash depuis le menu Démarrer et saisissez :
```
 cd desktop/dWeb  
```
Cette commande permet de lancer Git dans le répertoire que nous avons créé sur le bureau afin d'initialiser un dépôt local.
Exécutez ensuite les commandes ci-dessous une par une :
```
 git init 
git add . 
git commit -m "first commit" 
git remote add origin [url].git 
```
Où [url] est l'adresse de votre dépôt GitHub. Dans notre cas, il s'agit de :
```
 git remote add origin https: 
```

L'exécution de ces commandes permet d'initialiser un dossier .git masqué dans le répertoire de votre site, d'ajouter tous les fichiers du site dans le dossier .git, de les valider pour téléchargement et enfin de télécharger les fichiers sur votre dépôt GitHub.

Cette méthode est la plus efficace pour transférer de multiples fichiers et répertoires de sites web vers un dépôt GitHub, qui devrait ressembler à l'image ci-dessus.

Connexion de Fleek à GitHub

Voici la procédure pour relier un compte Fleek à GitHub :

Accédez à Fleek, connectez-vous à votre compte et cliquez sur Ajouter un nouveau site
Connectez Fleek à GitHub et autorisez l'accès au dépôt contenant les fichiers de votre site.
Fleek affichera le dépôt sélectionné. Allez dans l'onglet Emplacement de déploiement, sélectionnez IPFS et cliquez sur Continuer.
Choisissez le framework (si vous n'êtes pas sûr, laissez l'option Autre) et déployez votre site.

Votre site sera alors déployé sur IPFS.

3. Associez votre domaine Web3

Que vous utilisiez un nœud IPFS local ou une plateforme en ligne comme Fleek, votre site devrait maintenant être sur IPFS, ce qui signifie que vous possédez le hachage IPFS correspondant.

L'étape suivante consiste donc à lier votre site à votre domaine Web3. Vous pouvez en acheter un auprès d'un des principaux registres Web3 du marché. Le coût d'un domaine varie selon les conditions de chaque plateforme. Pour les systèmes de domaine basés sur la blockchain, des frais de réseau seront nécessaires pour que la transaction soit enregistrée sur la blockchain.

Pour cette démonstration, nous avons acquis le domaine elgwaro.eth sur ENS.

Liaison d'un domaine ENS à un site IPFS

Voici comment relier votre domaine ENS à un site hébergé sur IPFS :

Ouvrez votre tableau de bord ENS et allez dans la section correspondant à votre nom de domaine.
Sélectionnez l'onglet Enregistrements et cliquez sur Modifier les enregistrements.
Choisissez Autre, collez le lien de votre site IPFS hébergé localement, puis cliquez sur Enregistrer.
Vous serez invité à connecter votre portefeuille pour valider la transaction. Cette action engendrera des frais variables selon l'activité du réseau.
Une fois la transaction confirmée, votre domaine Web3 sera relié à votre site décentralisé.

Si vous utilisez Fleek, vous pouvez connecter votre domaine directement depuis le tableau de bord Fleek.

Ouvrez le tableau de bord de votre site déployé et cliquez sur Ajouter un domaine personnalisé.
Faites défiler jusqu'à ENS Info et cliquez sur Ajouter ENS.
Entrez votre domaine ENS, cliquez sur Vérifier puis confirmez.
Ensuite, cliquez sur Définir le hachage du contenu. Il faudra connecter votre portefeuille pour approuver la transaction. Les frais sont variables selon l'activité du réseau. Pour garantir une liaison réussie, assurez-vous que le portefeuille connecté est le contrôleur du domaine.

4. Accès à votre site web

Une fois la liaison entre votre domaine Web3 et votre site décentralisé établie avec succès, votre domaine Web3 pointera vers votre site web décentralisé.

Vous pouvez y accéder via votre domaine ENS complété par .link. Par exemple, dans notre situation, c'est elgwaro.eth.link. Cependant, si vous utilisez un navigateur compatible IPFS comme Brave, l'ajout de .link à la fin de votre URL n'est pas requis.

Vous avez ainsi créé votre site web décentralisé avec succès.

Au-delà du développement Web2

À mesure que l'internet se décentralise, le nombre de sites décentralisés pourrait dépasser celui des sites hébergés sur des serveurs centralisés. La transition du développement web Web2 vers le Web3 n'est pas aussi ardue qu'elle n'y paraît. Si vous ambitionnez de construire un site web décentralisé et résistant à la censure, ce guide pourrait être un excellent point de départ.