DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for My first Web3 page with IPFS
YAO ZELIANG
YAO ZELIANG

Posted on • Updated on

My first Web3 page with IPFS

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 and a classic template. Check out the final result :

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

Some screenshots

Image description

Image description

Image description

Basic structure

Here is the basic structure for my site:

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 :

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/

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 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
Image description

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:

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
Enter fullscreen mode Exit fullscreen mode

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'}>]
Enter fullscreen mode Exit fullscreen mode

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

Headless CMS

I use Conetentful 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
Image description

Image description

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
Image description

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:

Top comments (18)

Collapse
 
briancodes profile image
Brian

The eth link isn't working for me, other link does - site look good, nice animated page transitions

ipfs resolve -r /ipns/yaozeliang.eth/: could not resolve name: "yaozeliang.eth" is missing a DNSLink record (https://docs.ipfs.io/concepts/dnslink/)

Collapse
 
yaozeliang profile image
YAO ZELIANG

the link with ens domain: yaozeliang.eth.link/ (slow...)

Collapse
 
iravshan profile image
Sadikov Dev

Yeah

Collapse
 
thorstenhirsch profile image
Thorsten Hirsch

Can you give us some details how ENS and DNS differ in accessing IPFS? For example I've seen that the ENS version uses the CID with the path

/ipns/yaozeliang.eth/images/bg-01.jpg
Enter fullscreen mode Exit fullscreen mode

to access the bg image (which takes very long to load) while the DNS version uses

/ipfs/bafybeic6nofd74yeq6ksmejqewx3higowjzx2gouqqe4u3cb6yeku7ajzi/images/bg-01.jpg
Enter fullscreen mode Exit fullscreen mode

which seems to be the base32 representation of the CID. So when accessing IPFS content over DNS we need to use base32 for URL compliance...? Btw: I wonder why cloudflare has a cache miss in both cases.

Collapse
 
yaozeliang profile image
YAO ZELIANG

Sorry, I didn't go deeper about it. Maybe I can response to you later haha

Collapse
 
yaozeliang profile image
YAO ZELIANG

No, it's just a decentrenlized p2p file system, you don't need eth domain at all, here I used a third-party service Fleek, once deployed, we have a normal dns domain and a ContentID for IPFS, with that CID every node in the IPFS network can visit your site

Collapse
 
benjaminallanrahill profile image
Benjamin Allan-Rahill

If you go to a modern JS framework, I'd vouch for NextJS over Gatsby.

Collapse
 
yaozeliang profile image
YAO ZELIANG

Thanks for advice, I will compare them haha

Collapse
 
qm3ster profile image
Mihail Malo

So a bunch of paid centralized services? :/

 
yaozeliang profile image
YAO ZELIANG

content storage for now

Collapse
 
spaquet profile image
Stephane Paquet

what are the costs? (upload, ops, etc.)

Collapse
 
yaozeliang profile image
YAO ZELIANG

Deploy to IPFS doesn't cost anything, it's just node/peers as backend. but it will cost some "gas fee" when make a change to ENS domain, fleek will pay for this part. that means when there's a change in github, it will trigger deployment on Fleek automatically then fleek pays gas fee to synchronize the content attached to ENS domain.

For IPFS storage, I think the main benefit is high "download" speed since you request content from many peers/nodes in the network but not one central server. but for data privacy, ops...etc, I didn't find more advantages

Collapse
 
spaquet profile image
Stephane Paquet

Not that sure about the speed. Free IPFS comes with a major restriction from what I recall: the data will be cached in a node when the person operating the node access your data. Otherwise there is a pin fee (as you operate from a pinning service) to deploy and control a CDN like service on IPFS.
Another disadvantage is the fact that the cache can be cleared faster than expected removing the data from your users...
So as of today I'm not convinced by web 3 for this type of application, unless you want to circumvent some sort of censorship.

Thread Thread
 
yaozeliang profile image
YAO ZELIANG

totally agree !

Collapse
 
samifouad profile image
Sami Fouad

that's not what's happening with Fleek. They use IPNS hash to add to your ENS .eth name, not the IPFS hash.

So when the site is updated, it's getting a new IPFS hash but the static IPNS hash never changes, and this IPNS hash is always pointing towards the newest version of the site's IPFS hash, so there isn't a need to update ENS & spend gas every time you publish a change, that would be unsustainable for gas fees for fleek. It's a one-time update.

Thread Thread
 
samifouad profile image
Sami Fouad

I stand corrected. They don't pay for gas fees at all. You have to do the initial ENS update yourself, so you're paying the gas fees to add the IPNS hash to ENS. Then whenever you update your site, the IPFS hash will change of course, but IPNS hash won't, so there won't ever be a need to update it in the future.

please see this guide for more, also I think once you properly configure your ENS domain, loading will be faster. Right now, it's not configured correctly: docs.fleek.co/domain-management/en...

Top Heroku Alternatives (For Free)

>> Check out this classic DEV post <<