IPFS를 사용한 첫 번째 Web3 페이지

에 대한

커뮤니티의 첫 번째 게시물로서 Contentful 및 클래식 템플릿을 사용하여 IPFS에서 이력서 페이지를 구축하고 배포한 방법을 기록하고 싶습니다. 최종 결과를 확인하십시오.

ENS 도메인(느림): https://yaozeliang.eth.link

DNS 도메인(고속): https://yaozeliang.github.io/me

ENS 도메인으로 느리게 로드되는 이유를 여전히 이해할 수 없습니다...

Some screenshots

기본 구조

내 사이트의 기본 구조는 다음과 같습니다.

도메인: ENS 도메인https://ens.domains/

프런트 엔드: 구입한 템플릿(jQuery,css,h5)

백엔드: IPFShttps://ipfs.io/

코드 저장: Github

배포: Fleek

양식 서비스: Formspree

댓글 플러그인: Valine.js

헤드리스 CMS: Conetentful

도메인

첫째, 내 ENS 도메인에 대해, 하나를 구입한 직후에 후회한다는 것을 인정해야 합니다. 기존 DNS 도메인에 비해 비용이 많이 들고 느립니다(적어도 현재로서는). 내 관점에서 유일한 이점은 암호화폐를 가리킬 수 있다는 것입니다. 지갑, 콘텐츠 해시…

프런트엔드

Python 개발자이자 프리랜서로서 저는 react.js 또는 vue.js와 같은 JS 프레임워크와 씨름하는 데 너무 많은 시간을 보내고 싶지 않습니다. 여기에서 템플릿을 구입했습니다.

Sunshine template

2017년에 출시되었지만 여전히 디자인이 마음에 듭니다.

백엔드 및 배포

저는 IPFS에 관심이 있고 여전히 그것에 대해 배우고 있습니다. 개념 및 자세한 내용은 공식 웹 사이트에서 찾을 수 있습니다: https://ipfs.io/

그것을 사용하는 방법은 매우 많습니다. 초보자로서 데스크톱 응용 프로그램을 다운로드하고 Python HTTPS 클라이언트 모듈을 가지고 놀았습니다.

Desktop windows version

python module ipfshttpclient

Desktop UI

ipfs init 백엔드와 같은 명령을 실행하고 인터페이스를 생성합니다. go에 익숙하다면 IPFS CLI 도구를 직접 사용해 보는 것이 좋습니다.

Explore with python library

조언의 일부일 뿐이므로 최신 버전을 사용하는 것이 좋습니다.
라이브러리 ipfshttpclient, 그렇지 않으면 몇 가지 이상한 오류가 발생할 수 있습니다.

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

여기에서 볼 수 있듯이 처음으로 버전 0.6.0을 시도했지만 작동하지 않습니다. 그런 다음 문서에 설명된 방법(클라이언트 연결 생성, 파일 업로드, 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'}>]

업로드하는 콘텐츠는 기본 청커 크기가 256KB인 IPFS로 분할되며 각 블록에는 고유한 해시(콘텐츠 식별자 CID)가 있습니다.

알아야 할 몇 가지 중요한 사항이 있습니다. DRIES BUYTAERT의 다음 기사를 추천합니다. My first web3 webpage

헤드리스 CMS

저는 Conetentful을 사용하여 이미지, 오디오, 비디오와 같은 정적 소스를 저장합니다. Contentful을 사용하면 데이터 모델을 생성하고 API 호출로 검색할 수 있습니다.

수집된 책의 예는 다음과 같습니다.

타사 호스트 서비스

템플릿을 수정한 후 IPFS에서 내 콘텐츠를 호스팅하기 위해 fleek를 선택합니다. 여기서는 매우 간단합니다. GitHub에 연결하고 저장소를 선택하고 프레임워크를 선택하고 필요한 경우 몇 가지 명령을 추가합니다.



배포를 클릭하고 몇 초 동안 기다립니다. 내 사이트에 대한 링크와 CID를 받았습니다. 마지막으로 해야 할 일은 사이트를 내 ENS 도메인에 연결하는 것입니다. 이는 설정 섹션에서 수행할 수 있습니다.

개선

Fleek에서 지원하는 프레임워크를 고려하여 최신 js 프레임워크를 사용하십시오. 저는 개인적으로 다음을 권장합니다.

반응 기반: Gatsby

Vue 기반: Gridsome