Texte original : « Vous apprendre étape par étape à créer un site Web personnel décentralisé »

Auteur : Gros Tigre

Pour les passionnés du Web3 qui ont l'habitude d'émettre des avis, « héberger » des contenus sur les réseaux sociaux Web2 comme Twitter ne semble pas assez « résistant à la censure » et manque d'un sentiment d'exclusivité et d'indépendance ; pour les équipes du protocole Web3 ou les parties au projet, En d’autres termes, la décentralisation de l’ensemble du processus depuis les services produits jusqu’à la présentation frontale est également plus attrayante en termes de narration. Quelle que soit votre motivation, faire d'un site Web officiel personnel ou de projet un site Web décentralisé présente certains avantages en termes de coût, d'anonymat et de protection de la vie privée.

Par conséquent, cet article vous guidera étape par étape pour déployer votre site Web personnel (en prenant comme exemple la page Web générée par Notion) sur IPFS pour créer un site Web véritablement décentralisé (Dweb) qui n'appartient qu'à vous.

L'article est divisé en trois parties : introduction, fonctionnement pratique et suggestions. Je présenterai d'abord le concept et la représentation du réseau décentralisé Dweb, puis j'enseignerai étape par étape comment ajouter un site Web de cartes de visite personnelles à Dweb. Enfin, je résumerai également les avantages et les inconvénients de la solution actuelle.

Compte tenu de la longueur de l'article et de la difficulté de démarrage, dans la partie pratique, je ne présenterai que la méthode la plus simple pour déployer un framework de page Web HTML. En parallèle, ce tutoriel s'appuie principalement sur l'outil Fleek pour mettre en œuvre le déploiement. Fleek est puissant et peut regrouper une variété de frameworks de pages Web (tels que WordPress, Next.js, etc.). Les amis possédant une certaine base technique peuvent l'explorer en profondeur.

Qu'est-ce qu'un site Web décentralisé ?

Un site Web décentralisé (Dweb) fait littéralement référence à un site Web déployé sur un réseau décentralisé.

Du point de vue des composants, Dweb est similaire aux sites Internet traditionnels. Ils doivent tous avoir une entrée - un nom de domaine et un sujet d'hébergement - un serveur d'hébergement. Dans le monde Web3, les projets représentatifs correspondant à ces deux « fonctions » sont ENS, IPFS et Arweave (cet article se concentre sur le premier, qui est également une solution utilisée par de nombreux projets).

ENS (Ethereum Name Service) est un système de nommage distribué, évolutif et ouvert basé sur Ethereum ; en termes simples, il s'agit du système de noms de domaine blockchain.

L'idée d'IPFS est de distribuer et de stocker des données sur des nœuds qui peuvent être exécutés par n'importe qui dans le monde ; il s'agit essentiellement d'un service de stockage de données peer-to-peer résistant à la censure. De plus, étant donné qu'IPFS distribue les données entre les nœuds et pointe vers des données spécifiques, il peut garantir que les ressources proviennent de sources récemment mises à jour, et l'expérience réelle sera plus rapide et plus fiable.

Pour plus d'explications sur ENS et IPFS, les lecteurs intéressés peuvent lire « Un article pour en savoir plus sur ENS, l'application Ethereum non financière la plus réussie à ce jour » et « Analyse approfondie d'IPFS : le protocole sous-jacent de la nouvelle génération d'Internet ». ".

Propulsée par ENS et IPFS, l'infrastructure blockchain distribuée peut stocker du contenu directement dans des contrats intelligents (conteneurs).

Site représentatif basé sur l'ENS+IPFS

Bien que cela ne soit pas évident au niveau perceptuel, si les utilisateurs prêtent attention à certaines applications Web3 traditionnelles, ils peuvent découvrir dans leurs documents officiels que les principaux protocoles Web3 tels que Uniswap et 1inch ont synchronisé leurs sites Web avec IPFS.

Les adresses des liens ENS sont respectivement 1inch.eth et uniswapexchange.eth. Pour les navigateurs Web3 natifs, vous pouvez saisir directement les adresses ci-dessus pour y accéder. Pour les navigateurs non natifs, vous pouvez utiliser des adresses compatibles pour accéder :

1 pouce : 1 pouce. eth. lien/" _src="https://1inch. eth. lien/">https://1inch.eth.link/

uniswap：https://uniswapexchange.eth.link。

Pour plus de sites Web déployés à l'aide de la technologie ENS+IPFS, Almonit a organisé des sites Web Dweb. Le lien est le suivant : https://almonit.eth.link/#/discover/.

Comment déployer

Dans cet article, nous utilisons principalement la solution fournie par l'outil Fleek. L'avantage de cette solution est qu'elle est simple à déployer et prend en charge plusieurs frameworks web. En plus de prendre en charge les pages HTML, elle prend également en charge les frameworks web dans plusieurs langages. tels que Next.js, Hugo.js et Wordpress.

Cet article se concentre sur la plus simple des nombreuses fonctions prises en charge par Fleek - la solution de déploiement de framework de pages HTML, et donne une explication étape par étape, j'espère que les novices pourront se lancer rapidement après l'avoir lu pour les experts ; jouer un rôle en attirant de nouvelles idées.

Je viens de mentionner que vous devez préparer une page Web HTML, donc notion sera utilisée pour générer ce fichier de page Web HTML. La raison principale est que notion est facile à utiliser et possède sa propre fonction d'exportation HTML, vous pouvez donc l'utiliser comme. un créateur de pages Web HTML visuel.

Puisque l'outil utilisé par Fleek utilise la synchronisation automatique avec Github, vous devez également préparer un compte Github et le Repo (bibliothèque) correspondant.

Le déploiement sur le réseau IPFS lui-même ne nécessite pas de nom de domaine. Le téléchargement sur le réseau générera un hachage, similaire à l'adresse IP dans Web2, un ENS doit donc être préparé pour mapper ce hachage IPFS.

Pour résumer, préparez trois choses à l’avance :

Un compte github ; un nom de domaine ENS, le portefeuille correspondant et une petite quantité d'ETH comme gaz ; un compte notion, et créer une page de profil personnel. 1. Exporter du HTML depuis Notion

1.1 Concevoir un profil en notion, la démo est comme indiqué ci-dessous.

1.2 Exportez la page que nous avons préparée à partir de la fonction d'exportation de notion En raison de la capacité limitée d'IPFS à prendre en charge les pages Web statiques, nous ne pouvons choisir d'exporter qu'une seule page pour le moment. (Les joueurs avancés peuvent également implémenter des pages à plusieurs niveaux – sous-pages).

1.3 Après avoir obtenu le fichier compressé exporté, il sera automatiquement téléchargé localement. Après décompression locale, vous obtiendrez un dossier et un fichier HTML comme indiqué ci-dessous. Renommez le fichier se terminant par « xxx.html » en « index.html ».

2. Télécharger sur Github

2.1 Accédez à la page d'accueil de GitHub, connectez-vous (si vous n'avez pas de compte, vous devez créer un compte), entrez dans la page suivante et cliquez sur « Nouveau » pour créer un nouveau dépôt.

2.2 Il est recommandé d'utiliser la bibliothèque privée (confidentialité) pour ce Repo nouvellement créé. Cela empêche toute personne autre que l'outil Fleek et le créateur d'accéder au fichier d'origine.

2.3 Ensuite, vous devez utiliser le client Github (s'il n'y a pas de client Github sur votre ordinateur, vous devez en télécharger et en installer un). Après vous être connecté au client Github, revenez à la page Web Github que vous venez de créer et cliquez sur « Configurer sur le bureau » dans la case bleue (ouvrez le client sur le bureau).

2.4 Après avoir installé le client de bureau, l'invite suivante apparaîtra.

2.5 Accédez au client de bureau, suivez les invites pour définir un répertoire local et enregistrez le chemin du répertoire local. Copiez le fichier que nous avons téléchargé lors de la première étape « Exporter les données de Notion » dans le répertoire local.

2.5 Une fois la copie terminée, l'invite suivante apparaîtra lorsque vous reviendrez au client. Remplissez une description et cliquez sur valider.

2.6 Cliquez sur push origin pour pousser le document vers Github Repo.

3. Créez un nouveau projet en utilisant Fleek

"Fleek est une suite d'outils qui comprend tout ce dont vous avez besoin pour créer de manière transparente des sites et des applications modernes sur le réseau ouvert et ses protocoles."

En termes simples, Fleek est un outil qui permet de déployer facilement des sites Web personnels sur des réseaux décentralisés.

3.1 Vous devez vous inscrire lorsque vous entrez dans Fleek pour la première fois. Il est recommandé d'utiliser le portefeuille Etheretrum Little Fox pour vous inscrire et vous connecter directement en un seul clic, ce qui est plus pratique (vous pouvez également utiliser Github ou Email pour vous inscrire).

3.2 Après vous être inscrit et connecté, vous arriverez à la page d'accueil du projet. Ensuite, vous devez créer un projet de site Web.

3.3 Nous sélectionnons le Github Repo que nous venons de créer dans la deuxième étape et passons à l'étape suivante.

3.4 Nous sélectionnons IPFS dans l'option Services d'hébergement et sélectionnons Cointinue pour passer à l'étape suivante.

3.5 Sélectionnez le site Web que vous venez de créer et entrez dans la page de configuration détaillée.

3.6 Maintenant que le site Web a été déployé sur IPFS, l'outil Fleek a judicieusement associé un nom de domaine mappé, comme le montre la figure.

3.7 Ensuite, liez le nom de domaine ENS, sélectionnez « Paramètres » et recherchez « ENS ».

3.8 Faites défiler jusqu'à « Ajouter ENS ».

3.9 Saisissez le nom de domaine ENS.

3.10 Entrez dans l'interface suivante et cliquez à nouveau sur l'adresse ENS que vous venez de saisir. Et sélectionnez "Définir le hachage du contenu", et enfin payez des frais de gaz pour terminer la liaison.

3.11 À ce stade, nous constatons que le nom de domaine ENS qui était auparavant gris est devenu bleu et que la liaison a réussi.

3.12 Pour les navigateurs prenant en charge les noms de domaine décentralisés, tels que brave, l'application mobile Little Fox Wallet, etc., vous pouvez saisir directement ENS tel que yyzfish.eth que j'ai défini ici pour accéder directement au Dweb déployé. Pour les navigateurs Web2, ENS est également compatible. solutions, vous pouvez accéder directement à https://yyzfish.eth.link/.

Quelques réflexions pendant le processus de création d'un site Web

Après avoir suivi ce processus, j'ai réalisé certains des avantages et des inconvénients des sites Web décentralisés par rapport aux sites Web traditionnels.

Avantage

Faible coût et stable

Les pages Web Web2 traditionnelles doivent être déployées sur le serveur, ce qui nécessite non seulement une maintenance, mais les coûts augmentent également avec le nombre d'utilisateurs. Cependant, grâce au processus de déploiement sur Web3 décrit dans cet article, il n'est pas difficile de déterminer le coût. Le déploiement sur IFPS est extrêmement bon marché (actuellement gratuit). Et quel que soit le nombre d'utilisateurs, le coût ne changera pas.

Un récit Web3 plus complet

Au début, il était difficile de déployer simultanément un projet complet (front-end + contrat intelligent) sur un réseau tel qu’Ethereum en raison de la quantité élevée de gaz sur la chaîne. Désormais, avec l'amélioration du protocole réseau IPFS, l'énorme page interactive frontale dispose également de son propre réseau décentralisé dédié. Ceci est narrativement cohérent avec l’idée d’une véritable « décentralisation ». À l'heure actuelle, les principaux protocoles DeFi tels que Uniswap et 1inch ont été déployés sur des réseaux décentralisés. À l'avenir, un déploiement complet sur des réseaux décentralisés pourrait devenir une fonctionnalité standard des projets Web3.

cool personnellement

Les noms de domaine ENS sont très populaires sur les réseaux sociaux (comme Twitter). De nombreux KOL portent le surnom xxx.eth. Sur cette base, ils ont étendu leurs blogs au réseau IPFS et ont utilisé le nom de domaine ENS comme entrée. être une bonne chose pour les passionnés de crypto.

Anonymat et protection de la vie privée

Étant donné que Dweb a pleinement pris en compte la combinaison de « décentralisation » et de « confidentialité » dès les premiers stades de conception, il est en fait quelque peu similaire au réseau Tor et présente les caractéristiques d'intracabilité et d'anonymat.

insuffisant

La compatibilité avec Web2 doit encore être améliorée

Bien que l'outil prenne déjà en charge de nombreux frameworks grand public, tous ne sont pas pris en charge. Les frameworks Web dynamiques comme PHP ne sont toujours pas pris en charge. La compatibilité globale doit être améliorée.

Pas convivial pour les utilisateurs nationaux

Étant donné que le nombre actuel de nœuds IPFS est loin d'atteindre le nombre prévu dans le livre blanc (feuille de route), il existe certains obstacles à l'accès national de Dweb.

J'espère voir des solutions plus complètes et des itérations technologiques à l'avenir.