Crypto Rainbow
  • 加密貨幣平台開戶優惠
    • 全球领先的加密货币交易平台:BingX 交易所介绍 | 功能、手续费等真实体验揭秘,BingX 安全吗?
    • BingX 交易所完整教学 | 如何出金/入金?使用独家专属BingX优惠码注册可获30% 手续费折扣+160 美赠金! – Crypto Rainbow
    • 馬來西亞
      • Introduction to BingX Exchange: Features, Fees, and Security of a Leading Global Cryptocurrency Trading Platform.
      • Here is a complete tutorial on using BingX Exchange, including how to withdraw and deposit funds. Register using the exclusive promo code to receive a 10% transaction fee discount and a $160 USD bonus!
    • 越南
      • Giới thiệu về Sàn giao dịch tiền điện tử BingX: Nền tảng giao dịch tiền điện tử toàn cầu hàng đầu về Tính năng, Phí và Bảo mật.
      • Bản sao Hướng dẫn hoàn chỉnh về BingX Exchange | Làm thế nào để Rút tiền / Gửi tiền? Đăng ký với mã khuyến mãi độc quyền để nhận được giảm giá phí giao dịch 10% + thưởng 160 USD!
  • 加密貨幣資訊
  • 加密貨幣市場
  • 區塊鏈新手教學
  • 區塊鏈商業應用
No Result
View All Result
Crypto Rainbow
No Result
View All Result
Home 區塊鏈新手教學

教學|手把手帶你建立「去中心化個人網站」

by Crypto Rainbow
07/01/2023
in 區塊鏈新手教學
A A
bingxfa14111c2f75fb52f5c8dbf4867fe11a

對於有觀點輸出習慣的 Web3 愛好者而言,將內容 「寄存」在 Twitter 等 Web2 社交媒體上,似乎還不夠 「抗審查」,也缺些專屬感和獨立性;對於 Web3 協議團隊或項目方而言,從產品服務到前端呈現全流程的去中心化,也在敘事上更具吸引力。

而無論是抱著何種動力,將個人或項目官方網站製作為去中心化網站,在成本、匿名性、隱私保護等方面都有一定優勢。

因此,本文將帶你一步步將個人網站(以 Notion 生成的網頁為例)部署到 IPFS 上,建立一個只屬於你的、真正去中心化的網站(Dweb)。

文章一共分為介紹、實操、建議三部分。我會先介紹去中心化網路 Dweb 的概念及代表,再手把手教學將個人名片網站署到 Dweb 上的方法,最後,我也會總結下當前方案的優劣勢。

考慮到文章篇幅和上手難度,在實操部分,我只介紹最簡單的一種 Html 網頁框架部署方法。同時,這一教學主要靠 Fleek 工具來實現部署。Fleek 的功能強大,能打包多種網頁框架(如 WordPress、Next. js 等),有一定技術基礎的朋友,可以縱深探索。

文章大綱

  • 什麼是去中心化網站?
  • 基於 ENS+IPFS 的代表網站
  • 如何部署
    • 1. 從 Notion 導出 Html
    • 2. 上傳到 Github
    • 3. 使用 Fleek 新建一個項目
  • 建站進程中的一些思考
    • 優勢
    • 不足

什麼是去中心化網站?

去中心化網站(Dweb),字面上看就是部署在去中心化網路上的網站。

從構成部分看,Dweb 和傳統互聯網網站類似,都需要擁有一個入口 —— 域名、一個承載主體 —— 託管伺服器。在 Web3 世界,與這兩項 「功能」相對應的代表項目分別是 ENS、IPFS 和 Arweave(本文重點介紹前者,也是較多項目在使用的方案)。

ENS(Ethereum Name Service)是基於以太坊的分佈式、可擴展、開放的命名系統;通俗講,就是區塊鏈域名系統。

IPFS 的理念是將數據分佈存儲在世界各地、任何人可運行的節點上;本質上是項抗審查、點對點的數據存儲服務。此外,由於 IPFS 跨節點分發數據並指向特定數據,可以確保資源來自最近更新的來源,實際體驗會更快捷和可靠。

延伸:Web2 Web3 最大域名商之戰》ENS 勝訴 GoDaddy!奪回eth.link域名

延伸:Web3 域名|身份展示+跨鏈註冊,為何拍出高價原因分析

在 ENS 和 IPFS 的共同支援下,分佈式的區塊鏈基礎架構可以將內容直接存儲到智能合約(容器)中。

基於 ENS+IPFS 的代表網站

雖然在感知層面並不明顯,但用戶如果留意一些主流的 Web 3 應用,可以從他們的官方文檔中發現,Uniswap、 1inch 等頭部 Web3 協議已經將其網站同步至 IPFS 上。

其 ENS 連結地址分別是 1inch . eth 、uniswapexchange.eth ,對於原生 Web3 瀏覽器可以直接輸入以上地址訪問,對於非原生瀏覽器,可以使用兼容地址訪問:

1inch: https://1inch.eth.link/

uniswap:https://uniswapexchange.eth.link

更多採用 ENS+IPFS 技術部署的網站,Almonit 做過 Dweb 網站整理,連結如下:https://almonit.eth.link/#/discover/,感興趣的讀者歡迎訪問查看。

如何部署

本文我們主要使用 Fleek 工具提供的方案,該方案優點是部署簡單,支援多種 Web 框架,除了支援 Html 頁面外,也支援如 Next.js 、Hugo.js 、Wordpress 等多種語言的網頁框架。

本文聚焦在 Fleek 支援的諸多功能中最簡單的一種 ——Html 頁面框架部署方案,並且做了分步講解,希望小白看完能快速上手;對於高手而言,也能起到拋磚引玉的作用。

剛剛提到需要準備一個 Html 網頁,因此會用到 notion 來生成這個 Html 網頁文件,原因主要是 notion 操作簡便,且自帶了 html 導出功能,可以將其作為一個可視化的 Html 網頁製作器。

由於使用的工具 Fleek 採用的是自動同步 Github 的方式,因此也需要準備好一個 Github 帳號以及對應的 Repo(庫)。

部署到 IPFS 網路本身不需要域名,上傳到網路中會生成一段 hash,類似於 Web2 中的 IP 地址,因此還需要準備一個 ENS 來映射這段 IPFS hash。

概括一下,事前準備三樣東西:

  1. 一個 github 帳號;
  2. 一個 ENS 域名,以及對應的錢包和少量 ETH 作為 gas;
  3. 一個 notion 帳號,並製作一個個人 profile 頁面。

1. 從 Notion 導出 Html

1.1 在 notion 設計一個 profile,Demo 如下圖。

bingxb2a4f604f18fcb2b26121a190649923c

1.2 從 notion export 功能導出我們準備好的頁面,由於 IPFS 對於靜態網頁支援的能力有限,暫時只能選擇單頁面導出。(高階選手也可實現多級頁面 ——subpages)。

bingxb2a4f604f18fcb2b26121a190649923c

1.3 獲得了導出的壓縮文件後會自動下載到本地。在本地解壓後,會得到下圖中的一個文件夾和一個 Html 文件。將 「xxx. html」結尾的文件更名為 「index. html」。

2. 上傳到 Github

2.1 進入到 GitHub 主頁,登陸(沒有帳號的需要註冊一個帳號)進入如下頁面,點擊 「New」新建一個 Repo。

bingx31d57f33168e10203b2a37f818050ae3

2.2 對於這個新建的 Repo 建議採用 Private (隱私)庫的方式。因為這樣可以避免除了 Fleek 工具和創建者的其他人訪問到原始文件。

bingxe397ea9543e19d511acd4ed193e8fe05

2.3 接下來需要用到 Github 客戶端(如果電腦上沒有 Github 客戶端則需要下載並安裝一個)。登陸 Github 客戶端后,回到剛剛創建之後的 Github 網頁,點擊藍色框內的 「Set up in desktop」(在桌面打開客戶端)。

bingx07e997c7d6378f6d0d1965b2157b5085

2.4 安裝了桌面客戶端后,會有如下提示。

bingx07e997c7d6378f6d0d1965b2157b5085

2.5 來到桌面客戶端,按照提示設定好一個本地目錄並記錄這個本地目錄的路徑。將第一步 「從 Notion 導出資料」中我們在下載的文件,複製到該本地目錄中。

bingx40d0eb59167dcc73422fb2aa6e70f6dc

2.6 複製完成後,回到客戶端會有如下提示。填寫一些描述內容並點擊 commit。

bingx6c0cf67f634d83e4f40dd33cc6e98a08

2.7 點擊 push origin 把文檔推送到 Github Repo 中。

bingx7fa595004e3eb52b0f511e6cd69f04c6

3. 使用 Fleek 新建一個項目

「Fleek 是一套工具,包含在開放網路及其協議上無縫建構現代站點和應用程式所需的一切。」

簡單來說,Fleek 這個工具可以將個人網站簡便地部署到去中心化網路上。

3.1 首次進入 Fleek 需要註冊,建議採用 Etheretrum 小狐狸錢包直接一鍵註冊並登錄,比較方便(亦可以使用 Github 或 Email 來註冊)。

bingx7fa595004e3eb52b0f511e6cd69f04c6

3.2 註冊並登陸之後來到項目主頁,接下來需要創建一個網站項目。

bingx7fa595004e3eb52b0f511e6cd69f04c6

3.3 我們選擇剛剛第二步中創建的 Github Repo,並進入到下一步。

bingx641c060aff178193676d61ba8e4746ac

3.4 我們選擇 Hosting services 選項中的 IPFS,選擇 Cointinue 進入下一步。

bingx58fa9c34204d75f16ebb911caab2e20d

3.5 選擇剛剛創建完成的網站,進入詳細配置頁面。

bingxe38c726b2d8ee45a2435e8eecce0182b

3.6 現在網站已經部署到 IPFS 上面了,Fleek 工具還很貼心的關聯了一個映射域名,如圖所示。

bingxe38c726b2d8ee45a2435e8eecce0182b

3.7 接下來,綁定 ENS 域名,選擇 「Setting」,並找到 「ENS 」。

bingx6f03c71ce185433d8139f91f188722b7

3.8 下拉到 「Add ENS」。

bingx596fcce1aac4add03da1152d241b6077

3.9 輸入 ENS 域名。

bingx60f95ae95588d66bb278a061b7edb0b0

3.10 進入到如下介面,再次點擊剛剛輸入的 ENS 地址。並選擇 「Set content hash」,最後支付一筆 Gas 費完成綁定。

bingx60f95ae95588d66bb278a061b7edb0b0

3.11 此時我們看到之前是灰色的 ENS 域名已經轉變成為藍色,綁定成功。

bingx029f8fbdda51357d014084292a95ebd8

3.12 對於支援去中心化域名的瀏覽器,如 Brave,小狐狸錢包手機 APP 等,直接輸入 ENS 如我這裡設置的 yyzfish.eth 即可以直接訪問部署的 Dweb,對於 Web2 的瀏覽器,ENS 也有兼容方案,可以直接訪問 https://yyzfish.eth.link/。

bingx029f8fbdda51357d014084292a95ebd8

建站進程中的一些思考

走完這套流程後,我體會到了去中心化網站相較於傳統網站的一些優劣勢。

優勢

|成本低廉穩定

傳統的 Web2 網頁需要部署到伺服器上,不僅需要維護,而且花費隨著用戶數量而增加,但是透過本文部署到 Web3 的流程,不難發現,部署到 IFPS 的花費是極其便宜的(當前免費),且無論用戶量大小如何,花費不會有變化。

|更完整的 Web3 敘事

早期,由於鏈上 gas 高很難把完整的項目(前端+智能合約)同時部署到如以太坊網路上。而如今,隨著 IPFS 網路協議的完善,龐大的前端交互頁面也有了自己專屬的去中心化網路。這在敘事上符合真正的「去中心化」理念。目前 Uniswap、1inch 等頭部 DeFi 協議都陸續部署到了去中心化網路上面,未來或許完整部署到去中心化網路將成為 Web3 項目的標配。

|對個人來說很酷

ENS 域名在社交媒體(如 Twitter)上很受歡迎,不少 KOL 的暱稱為 xxx. eth,而在此基礎上實現了進一步延伸——把自己的博客部署到 IPFS 網路,並以 ENS 域名作為入口,對於加密愛好者來說會是件很酷的事。

|匿名性與隱私保護

由於 Dweb 在早期設計階段就充分考慮了「去中心化」與「隱私」結合,其實和 Tor 網路有些許類似之處,都具有不可追踪、匿名性的特點。

不足

|對於 Web 2 的兼容性仍然有待提高

雖然工具已經支援很多主流框架,但還不是全部,對於像 PHP 這種的動態網頁框架仍然是不支援的狀態。整體兼容度還有待提高。

|對中國用戶不友好

由於當前 IPFS 的節點還遠未達到白皮書中所計劃的數量(路線圖),因此,Dweb 在中國的訪問有一定的阻礙。

希望未來能夠看到更加完善的方案,以及技術的迭代。

本文由 Odaily (作者:胖虎) 授權,屬作者之觀點不代表動區立場。文章內容與觀點亦不是投資建議。

Tags: Dweb去中心化網站
ShareTweetShare
Previous Post

NFT新熱點》詳解 Memeland:12分鐘1200萬美元銷售,2億人的迷因帝國大遷徙

Next Post

23億鎂BTC賣壓延後》交易所Mt.Gox:債權人登記系統將延期至3月10日

Related Posts

Giới thiệu về Sàn giao dịch tiền điện tử BingX: Nền tảng giao dịch tiền điện tử toàn cầu hàng đầu về Tính năng, Phí và Bảo mật.
BingX Vietnam

Giới thiệu về Sàn giao dịch tiền điện tử BingX: Nền tảng giao dịch tiền điện tử toàn cầu hàng đầu về Tính năng, Phí và Bảo mật.

09/05/2023
全球领先的加密货币交易平台:BingX 交易所介绍 | 功能、手续费等真实体验揭秘,BingX 安全吗?
BingX Malaysia

Here is a complete tutorial on using BingX Exchange, including how to withdraw and deposit funds. Register using the exclusive promo code to receive a 10% transaction fee discount and a $160 USD bonus!

09/05/2023
全球领先的加密货币交易平台:BingX 交易所介绍 | 功能、手续费等真实体验揭秘,BingX 安全吗?
BingX Malaysia

Introduction to BingX Exchange: Features, Fees, and Security of a Leading Global Cryptocurrency Trading Platform.

09/05/2023
全球领先的加密货币交易平台:BingX 交易所介绍 | 功能、手续费等真实体验揭秘,BingX 安全吗?
BingX

BingX 交易所完整教学 | 如何出金/入金?使用独家专属BingX优惠码注册可获30% 手续费折扣+160 美赠金! – Crypto Rainbow

28/04/2023
全球领先的加密货币交易平台:BingX 交易所介绍 | 功能、手续费等真实体验揭秘,BingX 安全吗?
BingX

全球领先的加密货币交易平台:BingX 交易所介绍 | 功能、手续费等真实体验揭秘,BingX 安全吗?

27/04/2023
免費CryptoPard加密豹加密貨幣學堂 | 不懂如何投資加密貨幣?新手必備!現在報名參加還能有專屬優惠哦!
Crypto

免費CryptoPard加密豹加密貨幣學堂 | 不懂如何投資加密貨幣?新手必備!現在報名參加還能有專屬優惠哦!

19/04/2023
Next Post
bingx84d24ecbfe3f231b7e6d5c5fc42387cd

23億鎂BTC賣壓延後》交易所Mt.Gox:債權人登記系統將延期至3月10日

No Result
View All Result
  • Trending
  • Comments
  • Latest
全球领先的加密货币交易平台:BingX 交易所介绍 | 功能、手续费等真实体验揭秘,BingX 安全吗?

Here is a complete tutorial on using BingX Exchange, including how to withdraw and deposit funds. Register using the exclusive promo code to receive a 10% transaction fee discount and a $160 USD bonus!

09/05/2023
全球领先的加密货币交易平台:BingX 交易所介绍 | 功能、手续费等真实体验揭秘,BingX 安全吗?

全球领先的加密货币交易平台:BingX 交易所介绍 | 功能、手续费等真实体验揭秘,BingX 安全吗?

27/04/2023
Bản sao Hướng dẫn hoàn chỉnh về BingX Exchange | Làm thế nào để Rút tiền / Gửi tiền? Đăng ký với mã khuyến mãi độc quyền để nhận được giảm giá phí giao dịch 10% + thưởng 160 USD!

Bản sao Hướng dẫn hoàn chỉnh về BingX Exchange | Làm thế nào để Rút tiền / Gửi tiền? Đăng ký với mã khuyến mãi độc quyền để nhận được giảm giá phí giao dịch 10% + thưởng 160 USD!

09/05/2023
全球领先的加密货币交易平台:BingX 交易所介绍 | 功能、手续费等真实体验揭秘,BingX 安全吗?

BingX 交易所完整教学 | 如何出金/入金?使用独家专属BingX优惠码注册可获30% 手续费折扣+160 美赠金! – Crypto Rainbow

28/04/2023
【加密貨幣】加密貨幣字典!18個一定要識的加密貨幣術語

【加密貨幣】加密貨幣字典!18個一定要識的加密貨幣術語

0
【穩定幣收息風險】分析穩定幣收息5大風險!

【穩定幣收息風險】分析穩定幣收息5大風險!

0
【零成本GameFi遊戲】打機賺錢一個月出糧2次!免費賺錢!戰鬥卡牌GameFi遊戲Jobtribes職業神傳說介紹

【零成本GameFi遊戲】打機賺錢一個月出糧2次!免費賺錢!戰鬥卡牌GameFi遊戲Jobtribes職業神傳說介紹

0
【最新元宇宙概念幣介紹】未來世代的元宇宙迪士尼?元宇宙遊戲生態幣DeHorizon (DEVT)介紹!GameFi|元宇宙|加密貨幣|$DEVT

【最新元宇宙概念幣介紹】未來世代的元宇宙迪士尼?元宇宙遊戲生態幣DeHorizon (DEVT)介紹!GameFi|元宇宙|加密貨幣|$DEVT

0
Cách Copy Trade kiếm tiền hiệu quả từ BingX (2023)  

Cách Copy Trade kiếm tiền hiệu quả từ BingX (2023)  

31/05/2023
Top Malaysia Crypto Exchanges – Discover the Excellence of BingX

Top Malaysia Crypto Exchanges – Discover the Excellence of BingX

31/05/2023
bingxf2f4e548 904a 487a 9c51 4185a542fff8

Exploring the Best Crypto Exchanges in Vietnam——BingX Exchange: Your Gateway to Seamless Cryptocurrency Trading

31/05/2023
全球领先的加密货币交易平台:BingX 交易所介绍 | 功能、手续费等真实体验揭秘,BingX 安全吗?

利用加密货币交易赚钱致富?合约交易到底怎么玩?BingX交易所——优惠最多、新手投资者最容易入门合约交易的加密货币交易所

31/05/2023

Recent News

Cách Copy Trade kiếm tiền hiệu quả từ BingX (2023)  

Cách Copy Trade kiếm tiền hiệu quả từ BingX (2023)  

31/05/2023
Top Malaysia Crypto Exchanges – Discover the Excellence of BingX

Top Malaysia Crypto Exchanges – Discover the Excellence of BingX

31/05/2023
bingxf2f4e548 904a 487a 9c51 4185a542fff8

Exploring the Best Crypto Exchanges in Vietnam——BingX Exchange: Your Gateway to Seamless Cryptocurrency Trading

31/05/2023
全球领先的加密货币交易平台:BingX 交易所介绍 | 功能、手续费等真实体验揭秘,BingX 安全吗?

利用加密货币交易赚钱致富?合约交易到底怎么玩?BingX交易所——优惠最多、新手投资者最容易入门合约交易的加密货币交易所

31/05/2023

分類

2023 加密貨幣 BingX BingX Malaysia BingX Vietnam Crypto ICO nft Web3.0 交易所 以太坊 元宇宙 加密貨幣市場 加密貨幣平台開戶優惠 區塊鏈商業應用 區塊鏈平台 區塊鏈新手教學 即時新聞 市場分析 投資分析 比特幣 穩定幣 香港加密貨幣資訊

Recent News

Cách Copy Trade kiếm tiền hiệu quả từ BingX (2023)  

Cách Copy Trade kiếm tiền hiệu quả từ BingX (2023)  

31/05/2023
Top Malaysia Crypto Exchanges – Discover the Excellence of BingX

Top Malaysia Crypto Exchanges – Discover the Excellence of BingX

31/05/2023
bingxf2f4e548 904a 487a 9c51 4185a542fff8

Exploring the Best Crypto Exchanges in Vietnam——BingX Exchange: Your Gateway to Seamless Cryptocurrency Trading

31/05/2023

© 2023 加密彩虹 Crypto Rainbow

No Result
View All Result
  • 加密貨幣平台開戶優惠
    • 全球领先的加密货币交易平台:BingX 交易所介绍 | 功能、手续费等真实体验揭秘,BingX 安全吗?
    • BingX 交易所完整教学 | 如何出金/入金?使用独家专属BingX优惠码注册可获30% 手续费折扣+160 美赠金! – Crypto Rainbow
    • 馬來西亞
      • Introduction to BingX Exchange: Features, Fees, and Security of a Leading Global Cryptocurrency Trading Platform.
      • Here is a complete tutorial on using BingX Exchange, including how to withdraw and deposit funds. Register using the exclusive promo code to receive a 10% transaction fee discount and a $160 USD bonus!
    • 越南
      • Giới thiệu về Sàn giao dịch tiền điện tử BingX: Nền tảng giao dịch tiền điện tử toàn cầu hàng đầu về Tính năng, Phí và Bảo mật.
      • Bản sao Hướng dẫn hoàn chỉnh về BingX Exchange | Làm thế nào để Rút tiền / Gửi tiền? Đăng ký với mã khuyến mãi độc quyền để nhận được giảm giá phí giao dịch 10% + thưởng 160 USD!
  • 加密貨幣資訊
  • 加密貨幣市場
  • 區塊鏈新手教學
  • 區塊鏈商業應用

© 2023 加密彩虹 Crypto Rainbow

索取額外BingX開戶優惠(名額有限)