My first Web3 page with IPFS

YAO ZELIANG — Sat, 26 Mar 2022 23:10:03 +0000

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 :

Sunshine template

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:

React based: Gatsby
Vue based: Gridsome

DEV Community: YAO ZELIANG