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 :
- ENS domain (slow): https://yaozeliang.eth.link
- DNS domain (fast): https://yaozeliang.github.io/me
I still don't understand why it loads slowly with the ENS domain...
Some screenshots
Basic structure
Here is the basic structure for my site:
- Domain: ENS Domain https://ens.domains/
- Front-end: purchased template (jQuery,css,h5)
- Back-end: IPFS https://ipfs.io/
- Code storage: Github
- Deploy: Fleek
- Form service: Formspree
- Comments plugin : Valine.js
- Headless CMS: Conetentful
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
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
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
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:
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:
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:
Latest comments (16)
So a bunch of paid centralized services? :/
If you go to a modern JS framework, I'd vouch for NextJS over Gatsby.
Thanks for advice, I will compare them haha
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/)Yeah
the link with ens domain: yaozeliang.eth.link/ (slow...)
content storage for now
what are the costs? (upload, ops, etc.)
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
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.
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...
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.
totally agree !
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
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
to access the bg image (which takes very long to load) while the DNS version uses
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.
Sorry, I didn't go deeper about it. Maybe I can response to you later haha