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 :

• 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 windows version
• python module 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

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:

<span>pip</span> <span>install</span> <span>ipfshttpclient</span><span>==</span><span>0.8</span><span>.</span><span>0</span><span>a2</span>
    <span>Found</span> <span>existing</span> <span>installation</span><span>:</span> <span>ipfshttpclient</span> <span>0.6</span><span>.</span><span>0</span>
    <span>Uninstalling</span> <span>ipfshttpclient</span><span>-</span><span>0.6</span><span>.</span><span>0</span><span>:</span>
      <span>Successfully</span> <span>uninstalled</span> <span>ipfshttpclient</span><span>-</span><span>0.6</span><span>.</span><span>0</span>
<span>Successfully</span> <span>installed</span> <span>ipfshttpclient</span><span>-</span><span>0.8</span><span>.</span><span>0</span><span>a2</span>
<span>pip</span> <span>install</span> <span>ipfshttpclient</span><span>==</span><span>0.8</span><span>.</span><span>0</span><span>a2</span>
    <span>Found</span> <span>existing</span> <span>installation</span><span>:</span> <span>ipfshttpclient</span> <span>0.6</span><span>.</span><span>0</span>
    <span>Uninstalling</span> <span>ipfshttpclient</span><span>-</span><span>0.6</span><span>.</span><span>0</span><span>:</span>
      <span>Successfully</span> <span>uninstalled</span> <span>ipfshttpclient</span><span>-</span><span>0.6</span><span>.</span><span>0</span>
<span>Successfully</span> <span>installed</span> <span>ipfshttpclient</span><span>-</span><span>0.8</span><span>.</span><span>0</span><span>a2</span>
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'}>]
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'}>]
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:

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

原文链接：My first Web3 page with IPFS