This content originally appeared on DEV Community and was authored by YAO ZELIANG
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:
This content originally appeared on DEV Community and was authored by YAO ZELIANG
YAO ZELIANG | Sciencx (2022-03-26T23:10:03+00:00) My first Web3 page with IPFS. Retrieved from https://www.scien.cx/2022/03/26/my-first-web3-page-with-ipfs/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.