DEV Community

Cover image for Comment créer et héberger un site web 3.0 ?
gatweb
gatweb

Posted on • Updated on

Comment créer et héberger un site web 3.0 ?

Nous allons voir cela en en 4 étapes et de façon décentralisé:
Technologie utilisés: ENS et IPFS
Objectif : Déployer un site web statique hébergé sur IPFS et le lié à un domaine à votre nom sur ENS
Niveau : Débutant ( Attention toutefois au vocabulaire parfois spécifique)

Première étape: enregistré un nom sur ENS
Seconde étape: Créer un site internet statique ( pour le moment restons simple d’autant que la technologie est récente et donc pas encore optimum )
Troisième étape: Envoi de notre site sur IPFS
Quatrième étape: Mise à jour du champ de contenu de la notice ENS avec le hash IPFS du site web

Ready?
Bon on va d’abord obtenir un nom de domaine ENS
. ENS, ou Ethereum Name Service, est un service de domaine qui attribue un domaine qui peut être lié à l'adresse votre portefeuille.
Vos noms en .eth vous seront également très utiles car vous pouvez envoyer des ETH en fournissant une url simple et lisible. En effet au lieu d'une longue chaîne de chiffres et de lettres aléatoires que n'importe qui peut confondre.
L'enregistrement d'un nom ENS n’est vraiment pas très compliqué.
Pour l’exemple on utilisera gd-solutions.eth

On commence par se rendre sur :
https://app.ens.domains/.
On recherche le domaine .eth et on vérifie qu'il soit encore disponible.
Vous aurez besoin de quelques ETH dans votre portefeuille MetaMask pour acheter votre nom de domaine ENS. (Le prix dépendra du nombre d’année désiré et des frais de gas à ce moment là)
Ensuite, créer votre site Web. Il peut être aussi simple qu'un fichier index.html ou contenir des CSS ou JavaScript si vous le souhaitez.

Néanmoins je ne recommande pas de site trop sophistiqué. L'IPFS ne fonctionne pas (encore) comme un serveur auquel nous sommes habitués, donc le chargement de nombreuses pages ou images peut nécessiter des temps de réponses assez longs.
Une fois que vous avez préparé un fichier index.html simple et léger, c’est parti !

Rendez-vous sur :
https://github.com/gatweb/ipfs-desktop
Et téléchargez la dernière version de IPFS Desktop.
Utiliser 'Depuis IPS' et configurer la connexion
Ensuite cliquez sur le bouton +Add dans le coin supérieur droit de la fenêtre IPFS pour ajouter votre index.html.

Image description

L'une des étapes les plus importantes consiste à ajouter votre hachage IPFS à l’enregistrement ENS.
Rendez-vous sur : sur https://app.ens.domains/
Ajoutez le hachage IPFS à votre enregistrement ENS dans le type d'enregistrement du champ "Contenu".
N’oubliez pas le ipfs://avant le CID

Image description
Idéalement il faut faire cette manipulation dès l’enregistrement en remplissant bien tous les champs que vous souhaiter remplir car pour chaque modification il faut s’acquitter de frais de gaz.

IPFS est un système de partage de fichiers de pair à pair.
La propagation du contenu sur le réseau peut donc prendre quelques minutes.

Voici le résultat :
https://gd-solutions.eth.link/

Et c'est tout ! Une façon très simple d'héberger un site web décentralisé en utilisant des noms de domaine ENS et le système de contenu distribué IPFS.
Nous allons utiliser IPFS dans cet exemple, mais il existe d'autres systèmes de stockage ex. Swarm (https://ethersphere.github.io/swarm-home/), ou DAT (https://dat.foundation/).

Gaetan D.

Top comments (0)