原文: 「分散型個人 Web サイトを構築する方法をステップごとに教えます」
作者: ファットタイガー
意見を発信する習慣がある Web3 愛好家にとって、Twitter などの Web2 ソーシャル メディアでコンテンツを「ホスティング」することは、「検閲耐性」が十分ではなく、Web3 プロトコル チームやプロジェクト関係者にとっての独占性や独立性の感覚に欠けているように見えます。言い換えれば、製品サービスからフロントエンドのプレゼンテーションまでのプロセス全体の分散化は、物語の観点からもより魅力的です。どのような動機があるとしても、個人またはプロジェクトの公式 Web サイトを分散型 Web サイトにすることには、コスト、匿名性、プライバシー保護の点で一定の利点があります。
したがって、この記事では、個人の Web サイト (Notion によって生成された Web ページを例として) を IPFS にデプロイして、あなただけに属する真の分散型 Web サイト (Dweb) を構築する手順を段階的に説明します。
この記事は、導入、実践的な操作、提案の 3 つの部分に分かれています。まず分散型ネットワーク Dweb の概念と表現を紹介し、次に個人名刺 Web サイトを Dweb に追加する方法を段階的に説明します。最後に、現在のソリューションの長所と短所についてもまとめます。
記事の長さと開始の難しさを考慮して、実践的な部分では、Html Web ページ フレームワークをデプロイする最も簡単な方法のみを紹介します。同時に、このチュートリアルは主に Fleek ツールに依存して展開を実装します。 Fleek は強力で、さまざまな Web フレームワーク (WordPress、Next.js など) をパッケージ化できます。特定の技術的基盤を持つ友人は、Fleek を詳しく調べることができます。
分散型ウェブサイトとは何ですか?
分散型 Web サイト (Dweb) は文字通り、分散型ネットワーク上に展開された Web サイトを指します。
コンポーネントの観点から見ると、Dweb は従来のインターネット Web サイトに似ています。これらはすべて、入り口 (ドメイン名) とホスティング サブジェクト (ホスティング サーバー) を必要とします。 Web3 の世界では、これら 2 つの「機能」に対応する代表的なプロジェクトは、ENS、IPFS、Arweave です (この記事では、多くのプロジェクトで使用されているソリューションでもある前者に焦点を当てます)。
ENS (イーサリアム ネーム サービス) は、イーサリアムに基づく分散型、スケーラブルな、オープンなネーミング システムであり、平たく言えば、ブロックチェーン ドメイン ネーム システムです。
IPFS の考え方は、世界中の誰でも実行できるノード上にデータを分散および保存することであり、本質的には検閲に耐性のあるピアツーピア データ ストレージ サービスです。さらに、IPFS はデータをノード間で分散し、特定のデータを指すため、リソースが最近更新されたソースから確実に取得され、実際のエクスペリエンスはより速く、より信頼性の高いものになります。
ENS と IPFS の詳細については、興味のある読者は (これまでで最も成功した非金融イーサリアム アプリケーションである ENS について学ぶための 1 つの記事) (IPFS の詳細な分析: 新世代のインターネット基盤プロトコル) を参照してください。
ENS と IPFS を活用した分散型ブロックチェーン インフラストラクチャは、コンテンツをスマート コントラクト (コンテナ) に直接保存できます。
ENS+IPFSに基づく代表的なWebサイト
知覚レベルでは明らかではありませんが、ユーザーがいくつかの主流の Web3 アプリケーションに注目すると、Uniswap や 1inch などの主要な Web3 プロトコルが Web サイトを IPFS に同期していることが公式文書からわかります。
ENS リンクのアドレスはそれぞれ 1inch.eth と uniswapexchange.eth です。ネイティブ Web3 ブラウザの場合は、上記のアドレスを直接入力してアクセスできます。非ネイティブ ブラウザの場合は、互換性のあるアドレスを使用してアクセスできます。
1inch：1inch. eth. link/" _src="https://1inch. eth. link/">https://1inch.eth.link/
uniswap：https://uniswapexchange.eth.link。
ENS+IPFS テクノロジーを使用して展開されたその他の Web サイトについては、Almonit の Dweb Web サイトのリンクを参照してください: https://almonit.eth.link/#/discover/。
導入方法
この記事では、主に Fleek ツールによって提供されるソリューションを使用します。このソリューションの利点は、展開が簡単で、HTML ページのサポートに加えて、複数の言語の Web フレームワークもサポートしていることです。 Next.js、Hugo.js、Wordpress など。
この記事では、Fleek でサポートされている多くの機能の中で最も単純な 1 つである Html ページ フレームワーク展開ソリューションに焦点を当て、初心者が読んだ後すぐに使い始めることができるように段階的に説明しています。新しいアイデアを引き寄せる出発点として機能します。
先ほど、HTML Web ページを用意する必要があると述べましたが、この Html Web ページ ファイルの生成には Notion を使用します。主な理由は、Notion には操作が簡単で、独自の HTML エクスポート機能があるため、そのまま使用できます。ビジュアルな HTML Web ページ メーカー。
Fleekが使用したツールはGithubとの自動同期を利用しているため、Githubアカウントと対応するRepo(ライブラリ)も用意する必要があります。
IPFS ネットワーク自体への展開にはドメイン名は必要ありません。ネットワークにアップロードすると、Web2 の IP アドレスと同様のハッシュが生成されるため、この IPFS ハッシュをマッピングするために ENS を準備する必要があります。
まとめると、事前に次の 3 つを準備してください。
github アカウント、ENS ドメイン名、対応するウォレット、およびガスとしての少量の ETH を用意し、個人プロフィール ページを作成します。 1.NotionからHTMLをエクスポートする
1.1 概念でプロファイルを設計します。デモは次のようになります。
1.2 コンセプト エクスポート機能から準備したページをエクスポートする IPFS の静的 Web ページのサポート機能には限界があるため、当面は 1 つのページをエクスポートすることしか選択できません。 (上級プレイヤーは、マルチレベルのページ、つまりサブページを実装することもできます)。
1.3 エクスポートされた圧縮ファイルを取得すると、自動的にローカルにダウンロードされます。ローカルで解凍すると、以下のようなフォルダーとHTMLファイルが得られます。 「xxx.html」で終わるファイル名を「index.html」に変更します。
2.Githubにアップロードする
2.1 GitHub ホームページにアクセスし、ログインし (アカウントをお持ちでない場合はアカウントを登録する必要があります)、次のページに入り、「新規」をクリックして新しいリポジトリを作成します。
2.2 この新しく作成されたリポジトリには Private (プライバシー) ライブラリを使用することをお勧めします。これにより、Fleek ツールと作成者以外は元のファイルにアクセスできなくなります。
2.3 次に、Github クライアントを使用する必要があります (コンピュータに Github クライアントがない場合は、ダウンロードしてインストールする必要があります)。 Github クライアントにログインした後、作成したばかりの Github Web ページに戻り、青いボックス内の [デスクトップでセットアップ] をクリックします (デスクトップでクライアントを開きます)。
2.4 デスクトップ クライアントをインストールすると、次のプロンプトが表示されます。
2.5 デスクトップ クライアントに移動し、プロンプトに従ってローカル ディレクトリを設定し、ローカル ディレクトリのパスを記録します。最初のステップ「Notion からデータをエクスポート」でダウンロードしたファイルをローカル ディレクトリにコピーします。
2.5 コピーが完了した後、クライアントに戻ると、次のプロンプトが表示されます。説明を入力し、「コミット」をクリックします。
2.6 「プッシュオリジン」をクリックして、ドキュメントを Github リポジトリにプッシュします。
3. Fleekを使用して新しいプロジェクトを作成します
「Fleek は、オープン ネットワークとそのプロトコル上で最新のサイトとアプリケーションをシームレスに構築するために必要なものがすべて含まれたツール スイートです。」
簡単に言えば、Fleek は個人の Web サイトを分散ネットワークに簡単に展開できるツールです。
3.1 Fleek に初めて入るときは登録が必要です。ワンクリックで直接登録してログインできる Etheretrum Little Fox ウォレットを使用することをお勧めします (Github または電子メールを使用して登録することもできます)。
3.2 登録してログインすると、プロジェクトのホームページが表示されます。次に、Web サイトのプロジェクトを作成する必要があります。
3.3 2 番目のステップで作成したばかりの Github リポジトリを選択し、次のステップに進みます。
3.4 [ホスティング サービス] オプションで [IPFS] を選択し、[Cointinue] を選択して次のステップに進みます。
3.5 作成した Web サイトを選択し、詳細設定ページに入ります。
3.6 Web サイトが IPFS 上に展開されたので、図に示すように、Fleek ツールはマップされたドメイン名も慎重に関連付けました。
3.7 次に、ENS ドメイン名をバインドし、[設定] を選択して、[ENS] を見つけます。
3.8 「ENS の追加」まで下にスクロールします。
3.9 ENS ドメイン名を入力します。
3.10 次のインターフェイスに入り、先ほど入力した ENS アドレスを再度クリックします。そして「コンテンツハッシュを設定」を選択し、最後にガス料金を支払えばバインドが完了します。
3.11 この時点で、以前はグレーだった ENS ドメイン名が青に変わり、バインドが成功したことがわかります。
3.12 Brave、Little Fox Wallet モバイル APP などの分散ドメイン名をサポートするブラウザの場合、ここで設定した yyzfish.eth などの ENS を直接入力して、展開された Dweb に直接アクセスできます。Web2 ブラウザの場合、ENS にも互換性があります。ソリューションの場合は、https://yyzfish.eth.link/ に直接アクセスできます。
ウェブサイトを構築する過程で考えたこと
このプロセスを経て、従来の Web サイトと比較した分散型 Web サイトの長所と短所をいくつか認識しました。
利点
低コストで安定した
従来の Web2 Web ページはサーバー上に展開する必要があり、メンテナンスが必要なだけでなく、ユーザーの数に応じてコストも増加しますが、この記事の Web3 への展開プロセスを通じて、コストがかかることがわかります。 IFPS への導入は非常に安価であり (現在は無料)、ユーザーの数に関係なく、コストは変わりません。
より完全な Web3 の説明
初期の頃は、チェーン上のガスが多いため、完全なプロジェクト (フロントエンド + スマート コントラクト) をイーサリアムなどのネットワークに同時にデプロイすることは困難でした。現在、IPFS ネットワーク プロトコルの改良により、巨大なフロントエンド インタラクティブ ページにも独自の排他的な分散ネットワークが存在します。これは、真の「分散化」の考え方と物語的に一致しています。現在、Uniswap や 1inch などの主要な DeFi プロトコルは分散型ネットワークに導入されており、将来的には分散型ネットワーク上での完全な導入が Web3 プロジェクトの標準機能になる可能性があります。
個人的にかっこいい
ENS ドメイン名はソーシャル メディア (Twitter など) で非常に人気があり、多くの KOL は xxx.eth というニックネームを持ち、ブログを IPFS ネットワークにさらに拡張し、ENS ドメイン名を入り口として使用しています。暗号通貨愛好家にとっては素晴らしいことです。
匿名性とプライバシー保護
Dweb は初期の設計段階で「分散化」と「プライバシー」の組み合わせを十分に考慮しているため、実際には Tor ネットワークに似ており、追跡不可能で匿名性があるという特徴を持っています。
不十分
Web2 との互換性はまだ改善の必要があります
このツールはすでに多くの主流フレームワークをサポートしていますが、PHP などの動的 Web フレームワークのすべてがサポートされているわけではありません。全体的な互換性を改善する必要があります。
国内ユーザーには優しくない
現在のIPFSノード数はホワイトペーパー（ロードマップ）で計画されている数には程遠いため、Dwebの国内アクセスには一定の障害が存在する。
将来的には、より完全なソリューションと技術の反復が見られることを期待しています。
