My first Web3 page with IPFS
Tags: web3, ipfs, javascript, python
Published: 2022-03-26 23:10:03

## About
As my first post in the community, I just want to record how I built and deployed my resume page on IPFS with [Contentful](https://www.contentful.com/) and a classic template. Check out the final result :
- ENS domain (slow): [https://yaozeliang.eth.link](https://yaozeliang.eth.link)	
- DNS domain (fast): [https://yaozeliang.github.io/me](https://zyao.on.fleek.co/)

I still don't understand why it loads slowly with the ENS domain...

> Some screenshots 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bu5d5ng732y5pvkryesv.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m0snx7ac85d84br406nx.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zfzwsf75g9j20gun3gmd.png)
  
## Basic structure
Here is the basic structure for my site:
 * Domain: ENS Domain [https://ens.domains/](https://ens.domains/)
 * Front-end: purchased template (jQuery,css,h5)
 * Back-end: IPFS [https://ipfs.io/](https://ipfs.io/)
 * Code storage: Github
 * Deploy: [Fleek](https://fleek.co/)
 * Form service: [Formspree](https://formspree.io/)
 * Comments plugin : [Valine.js](https://valine.js.org/en/quickstart.html)
 * Headless CMS: [Conetentful](https://www.contentful.com/)

### Domain
First, about my ENS domain, I have to admit I regret it immediately after purchasing one, it's costly and slow compared with a traditional DNS domain (at least for now), the only advantage from my perspective is that it can point to a cryptocurrency wallet, a content hash...
 
### Front-end stuff
As a python developer and free-lancer, I don't want to spend too much time struggling with any JS framework like react.js or vue.js, the main goal is to deliver a professional image to my client at first glance, so I purchased a template here : 
* [Sunshine template](https://themeforest.net/item/sunshine-a-vcard-template/19503929)
 
Although it's published in 2017, I still like its design.

### Back-end & Deploy 
I m interested in IPFS and still learning about it. for the conceptions and more details, you can find them on the official website: [https://ipfs.io/](https://ipfs.io/)

There are so many ways to use it, as a beginner I downloaded the desktop application and played around with the python HTTPS client module:
* [Desktop windows version](https://docs.ipfs.io/install/ipfs-desktop/#windows)
* [python module ipfshttpclient](https://pypi.org/project/ipfshttpclient/)

> Desktop UI

it will execute the command like `ipfs init` backend and generate an interface, if you are familiar with go, I think it's better to try the IPFS CLI tools directly
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3asyd8tfh8yg9jk2hvn3.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4u92klevmo9dd5he1mvb.png)
 


> Explore with python library

Just a piece of advice, it's better to use the latest version for
library ipfshttpclient, otherwise you may encounter some weird errors:

```python
pip install ipfshttpclient==0.8.0a2
    Found existing installation: ipfshttpclient 0.6.0
    Uninstalling ipfshttpclient-0.6.0:
      Successfully uninstalled ipfshttpclient-0.6.0
Successfully installed ipfshttpclient-0.8.0a2
```
As you can see here I tried version 0.6.0 the first time but it doesn't work, then we can try with the methods explained in the doc (create a client connection, upload files, pin with CID...)
```
import ipfshttpclient
# Default to local
client = ipfshttpclient.connect("/ip4/127.0.0.1/tcp/5001")
print(client)
<ipfshttpclient.client.Client object at 0x000001909A270910>
# upload a folder
client.add("test")
[<ipfshttpclient.client.base.ResponseBase: {'Name': 'resume-test/favicon.ico', 'Hash': 'QmXUrHJ3k5fZFUZhvGNzdqiPZgbnbr5LRN3VYDjwyqZmmf', 'Size': '15417'}>, <ipfshttpclient.client.base.ResponseBase: {'Name': 'resume-private-master/index.html', 'Hash': 'QmTiiC9BgBtpNuPG4QybLH9wMKZvgjp9wvTPqvA3R4439A', 'Size': '43377'}>]
```
The content we upload will be split by IPFS with a default chunker size of 256KB and each block has its unique hash (Content identifier CID) 

There are some important things to know, I recommend this article from DRIES BUYTAERT: [My first web3 webpage](https://dri.es/my-first-web3-webpage)
### Headless CMS 
I use [Conetentful](https://www.contentful.com/) to store my static sources like images, audios, videos...  With contentful, you can create a data model and retrieve them by API call.

here's an example for collected books:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wkoq8fgmayg908chsds6.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ngndbniofiv7svm1crxu.png)
  
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bh03wmmcfrndbcigv582.png)
 
### Third-party host service

After modification for the template, I choose fleek to host my content on IPFS, it's pretty simple here, connect with GitHub and choose your repo, select a framework and add some commands if needed:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j62f16u588hx5kp55p11.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mis3lcj69qsnldyeg5ks.png)

Click deploy and wait for a few seconds, I got the link and a CID for my site, the last thing to do is attach the site with my ENS domain. This can be done in the setting section.

### Improvement

Use a modern js framework, considering the frameworks supported by fleek, I personally recommend:
 - React based: [Gatsby](https://www.gatsbyjs.com/)
 - Vue based: [Gridsome](https://gridsome.org/)