Décentraliser son site Web avec IPFS, Pinata, Infura et Cloudflare
Tags: blockchain, ipfs, serverless, node
Published: 2020-04-05 20:42:01

![](https://telegra.ph/file/c8ea6803d5d07dfc79e6f.jpg)

IPFS, InterPlanetary File System (ou système de fichier inter-planétaire) est un système distribué de fichiers pair à pair qui ne dépend pas de serveurs centralisés. Son but est de connecter un ensemble d'équipements informatiques avec le même système de fichiers. D'une certaine manière IPFS est similaire au World Wide Web, à la différence qu'il peut être vu comme un essaim BitTorrent (Swarm) unique, qui échange des objets au sein d'un dépôt Git.

<https://ipfs.io/>

![](https://telegra.ph/file/2dbfdac39b4ebd8bfe694.jpg)

En d'autres termes, IPFS fournit un modèle de stockage par blocs adressable par contenu de haute capacité, utilisant des hyperliens pour l'accès. Ceci forme un graphe orienté acyclique de Merkle généralisé. IPFS combine une table de hachage, un échange de blocs encouragé et un espace de noms auto-certifié. IPFS n'a pas de point unique de défaillance et les nœuds n'ont pas besoin de se faire mutuellement confiance ...

Pour cette expérience, je pars d'un template Next.js fourni par Cosmic JS =>

<https://github.com/cosmicjs/nextjs-website-boilerplate>

que je charge avec ses dépendances dans une petite instance Ubuntu 18.04 LTS qui tourne dans Hetzner Cloud :

![](https://telegra.ph/file/bf7d641beee3029ad3000.jpg)

![](https://telegra.ph/file/d67725a5b952abd9231e9.png)

Je peux tester que ce template fonctionne bien localement :

![](https://telegra.ph/file/e339fd4d705a4974f7f7d.png)

et c'est le cas :

![](https://telegra.ph/file/bcc3522a9208042d5063a.jpg)

Je crée un fichier next.config.js pour profiter de la génération de contenu statique avec le module export => <https://nextjs.org/learn/excel/static-html-export>

![](https://telegra.ph/file/edb9f9836adc2babe750b.png)

et je modifie le fichier package.json en conséquence :

![](https://telegra.ph/file/54ae4791237278ce20424.jpg)

Je peux alors générer du contenu statique à partir de ce template :

![](https://telegra.ph/file/bb02b5ff1be35f8b7356f.png)

![](https://telegra.ph/file/0785084531269c7e1ea3f.png)

Je peux le tester pour vérifier que mon site web est opérationnel :

![](https://telegra.ph/file/9f8c6c57afb005984634e.png)

![](https://telegra.ph/file/a3b26aec1686203363846.jpg)

Je récupère le binaire go-ipfs depuis son dépôt sur GitHub :

<https://github.com/ipfs/go-ipfs/releases>

![](https://telegra.ph/file/abf6fb431d0593a770ea8.jpg)

que je charge sur mon instance :

![](https://telegra.ph/file/32fd2e18c9b3c0731fd6f.png)

Petite configuration pour une exposition globale des endpoints :

![](https://telegra.ph/file/d2ed4aab2fcfefc40a428.png)

Et je lance le démon IPFS :

![](https://telegra.ph/file/f5652628b2b9e41c220ed.png)

![](https://telegra.ph/file/aa4a27ba81c63fcbda1ec.jpg)

Je peux charger mon contenu statique dans IPFS :

![](https://telegra.ph/file/9bd416831ee99b6d6abad.png)

Et je vérifie dans le dashboard proposé par IPFS que c'est le cas :

![](https://telegra.ph/file/8421972aa7d2de80dd90d.jpg)

![](https://telegra.ph/file/8b74036acc0b509a4e77b.jpg)

Le site web apparait localement à partir du Hash du répertoire chargé sur le port TCP 8080 :

![](https://telegra.ph/file/5a4ede45a0c6bae6e9a2c.jpg)

mais également sur l'IPFS Gateway :

![](https://telegra.ph/file/21d078b4790b33f6f2f8a.jpg)

Ou également à partir de ce Hash sur la passerelle Cloudflare :

![](https://telegra.ph/file/6d4d5b0e3b29504467a8e.png)

<https://developers.cloudflare.com/distributed-web/ipfs-gateway/>

![](https://telegra.ph/file/512c075afc2e2fa586372.jpg)

J'utilise ipfs-deploy maintenant : <https://github.com/ipfs-shipyard/ipfs-deploy>

![](https://telegra.ph/file/ceadf038892db96070029.png)

que j'installe sur mon instance :

![](https://telegra.ph/file/719a0f0d9ad6c97be799d.png)

Je vais avec cet utilitaire charger ce site web sur Infura qui fournit un accès API instantané et évolutif aux réseaux Ethereum et IPFS pour y connecter son application gratuitement ! <https://infura.io/>

![](https://telegra.ph/file/fde4df2d79b2e47640e81.jpg)

![](https://telegra.ph/file/54b4e8a039d40f6a9375d.png)

C'est le cas avec le contenu statique du template :

![](https://telegra.ph/file/a98c598d740ba2d615110.jpg)

Je peux également le déployer sur Pinata qui fournit également un stockage décentralisé : [https://pinata.cloud](https://pinata.cloud/)

![](https://telegra.ph/file/d2d36ce14b4c8c56043a7.png)

J'utilise encore une fois *ipfs-deploy* avec le provider Pinata après inscription et récupération des identifiants à charger dans *.env* :

![](https://telegra.ph/file/04e543412194a4ebc1ab8.png)

Le contenu statique est chargé :

![](https://telegra.ph/file/c9ec9aa20178e19103f5a.jpg)

et exposé :

![](https://telegra.ph/file/b6cb7dae09f1df7c6954f.jpg)

Quelques liens complémentaires :

<https://medium.com/pinata/how-to-easily-host-a-website-on-ipfs-9d842b5d6a01>

<https://towardsdatascience.com/decentralizing-your-website-f5bca765f9ed>

<https://gist.github.com/claus/1287f47b5fbaaea338ac8a04d02bf258>

![](https://telegra.ph/file/9fa712a9a2ed95bf3fe2b.png)

À suivre !