對于有觀點輸出習慣的 Web3 愛好者而言，將內容“寄存”在 Twitter 等 Web2 社交媒體上，似乎還不夠“抗審查”，也缺些專屬感和獨立性；對于 Web3 協議團隊或項目方而言，從產品服務到前端呈現全流程的去中心化，也在敘事上更具吸引力。而無論是抱著何種動力，將個人或項目官方網站制作為去中心化網站，在成本、匿名性、隱私保護等方面都有一定優勢。

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

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

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

什么是去中心化網站？

去中心化網站（Dweb），字面上看就是部署在去中心化網絡上的網站。

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

ENS（Ethereum Name Service）是基于以太坊的分布式、可擴展、開放的命名系統；通俗講，就是區塊鏈域名系統。

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

關于 ENS 和 IPFS 的進一步釋義，感興趣的讀者可以閱讀《一文了解迄今為止最成功的非金融類以太坊應用程序 ENS》《深度解析 IPFS：新一代互聯網底層協議》。

在 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 如下圖。

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

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

2.上傳到 Github

2.1 進入到 GitHub 主頁，登陸（沒有賬號的需要注冊一個賬號）進入如下頁面，點擊“ New ”新建一個 Repo。

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

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

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

2.5 來到桌面客戶端，按照提示設定好一個本地目錄并記錄這個本地目錄的路徑。將第一步 “從 Notion 導出資料”中我們在下載的文件，復制到該本地目錄中。

2.5 復制完成后，回到客戶端會有如下提示。填寫一些描述內容并點擊 commit。

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

3.使用 Fleek 新建一個項目

“Fleek 是一套工具，包含在開放網絡及其協議上無縫構建現代站點和應用程序所需的一切。”

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

3.1 首次進入 Fleek 需要注冊，建議采用 Etheretrum 小狐貍錢包直接一鍵注冊并登錄，比較方便（亦可以使用 Github 或 Email 來注冊）。

3.2 注冊并登陸之后來到項目主頁，接下來需要創建一個網站項目。

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

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

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

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

3.7 接下來，綁定 ENS 域名，選擇“ Setting ”，并找到“ ENS ”。

3.8 下拉到“ Add ENS ”。

3.9 輸入 ENS 域名。

3.10 進入到如下界面，再次點擊剛剛輸入的 ENS 地址。并選擇“ Set content hash ”，最后支付一筆 Gas 費完成綁定。

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

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

建站過程中的一些思考

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

優勢

成本低廉穩定

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

更完整的 Web3 敘事

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

對個人來說很酷

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

匿名性與隱私保護

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

不足

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

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

對國內用戶不友好

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

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

ello 大家好，我是老張，那個不務正業的PHP開發工程師。今天是我使用uni-app開發在線教育系統的第三天了，今天主要開發了底部菜單的，學習頁面，個人中心頁面，先給大家預覽下效果圖

目前底部菜單頁面已經全部開發完畢了，下面就是首頁導航切換的靜態頁面開發了，關于這兩個頁面的布局我采用了uni-app 里面的flex 布局開發，Flex是Flexible Box的縮寫，意為“彈性布局”，用來為盒狀模型提供最大的靈活性。當設置display: flex后，繼續給view等容器組件設置flex-direction: row或column，就可以在該容器內按行或列排布子組件。uni-app推薦使用flex布局。因為flex布局有利于跨更多平臺，尤其是采用原生渲染的平臺。

個人中心的圖標是uni-app 的字符圖標，目前暫時先這樣，后面會讓專業的設計師去設計這個圖標，我的設想是這個個人中心頁面的圖標是動態可以更換的。

我的學習頁面主要包含了，學習的一些數據，可以更加直觀的看到自己的學習情況，下面是觀看的歷史記錄和我已經購買的課程方便直接學習或者接著學習。

個人中心是菜單功能的一個快捷入口主要包含平臺的介紹，反饋的建議等數據

總結

使用uni-app開發其實和使用HTML 開發差不多，并不需要多么深的前端功底。慢慢對這個uni-app 越來越熟練了，其中的css 感覺是自己的弱項，后面會在開發中漸漸學習這個知識。

沒有一件事是簡單的，只要想去做就一定可以成功，堅持就OK。

輯導讀：“個人中心”相當于一個萬能口袋，承載著各類入口。如果這個口袋有趣又好看，無疑是一件錦上添花的事。本文將從三個方面圍繞“個人中心”的設計展開分析，希望對你有幫助。

五?底，我和朋友們開始合作?個UXDA?戶體驗創新?賽的參賽項?。

當七?初我們要完成“我的”頁面的設計時，我發覺?從下手，隨即做了?些“敏捷”調研，包括對雪球、餓了么、玩盤這三款APP“我的”頁面的分布?式的總結和思考。

?、“我的”頁面重要嗎？

有?說：“我的”頁面很雞肋，做得好也不加分。

可我認為不然：這個世界沒有“無用”的設計，只有“無用”的設計師。

作為底部tab欄的最后?位，“我的”頁面的重要性雖然“比上不足”，但“比下有余”。

它就像?個“萬能口袋”，可以承載各類入口；如果能讓這個口袋好看又有趣，對于?個應用來說，是錦上添花的好事。

• 對于內容類APP來說，“我的”頁面非常需要?個“社區內容的整合肉蔻”——比如：B站APP“我的”頁面有瀏覽歷史（我看過哪些），收藏夾（我喜歡看哪些）和稍后看（我打算看哪些）；
• 對于生活服務類APP來說，“我的”頁面更需要“賬戶信息”和“增值服務”來提升用戶活躍度——比如，餓了么APP“我的”頁面有紅包卡券情況（我可以少花多少錢）以及?些聯名卡的商業化區域（我還能花多少錢）。
• 而對于有不同?戶??的應用而?，“我的”頁面則需要“千人千?”，這樣不同角色可以行使各自的“權利”——比如，閑?APP有“塘主”角色，即“社區?手市場的管理員”。

N年前，我曾經是我們學校的“塘主”。 當時在“我的”頁面，除了“塘主”標志，我還有個“我的?塘-我管理的?塘”入口，以及專屬于 我的“管理區域”（每個?塘只能有唯?塘主，能操作帖?置頂、釣?帖刪除、接收?塘成員信息等等）。

“我的”頁面，不是“雞肋”的代名詞，而是“角色”和“權限”的重要落地點。

因此，當產品團隊在做“我的”頁面的時候，產品定位、?戶場景和商業模式都要考慮在內。

然?，?前絕?部分APP的“我的”頁面都是各類入口的集合，很容易形成各種功能入口的堆疊。

同時，“我的”頁面的內容?過于靜態，使頁面顯得單調，導致?戶會覺得“我的”頁面十分雞肋。

那么，如何才能避免乏味的“我的”頁面？

如果只是把設計理解為簡單的外觀設計，?上來就開始構思界?細節，缺乏完整、清晰的思路，設計?案?然容易遭到各種質疑。

所以，我們需要“智”作。

?、如何設計“我的”頁面？

1. 信息結構重組

我看了一篇雪球APP“我的”頁面的改版文章，現將作者的改版步驟整合如下：

1）整合原頁面結構

首先，通過模塊化的分類方式將原“我的”頁面入口和信息根據內容及業務屬性劃分為6大類，分別如下：

“我的” 頁面信息分類整合思路

2）將高頻功能入口放在第?視覺層次

接下來，需要對每類的入口進行整合梳理，并通過用戶行為習慣及內容的重要性來進行優先級排序。

以【社區內容入口聚合區域】為例：對雪球用戶來講，帖子是最常消費的社區內容，也是最有價值的內容，屬于高頻消費。

所以在產品結構上，社區內容入口如“收藏”、“我的評論”、“我贊過的”等都收納同一個 模塊，讓用戶在第一屏、第一視覺層次就能發現這些入口并快速訪問。

社區內容入口聚合 方便用戶快速訪問（圖片來源：雪球設計中心XDC）

其他內容模塊也根據相似的思路進行分類，整合后的頁面信息更符合用戶的使用習慣。

模塊化的處理方式除了讓信息呈現合理，在需要的時候還能支持內容之間的替換和擴展，頁面結構更為靈活。

“我的”頁面改版前后對比

3）改版有效性驗證

根據文章描述，新版本上線后，頁面的使用率大幅提升——相較改版前的版本，“我的”頁面使用率從原來的 20%提升至50% 。

也就是說：每100人來到“我的”頁面，老版本只有20人產生了點擊行為；改版后，每 100人有50人產生了點擊行為，而頁面提供的信息并沒有太大的變化。

改版后 “我的” 頁面使用率提升至50%（圖片來源：雪球設計中心XDC）

由此可見，就算頁面提供的信息并沒有太大的變化，功能的重組和歸類幫助用戶有效的區分信息層次，縮短了用戶對常用功能的訪問路徑，強化功能分區也讓用戶能更好的通過固定分類快速找到功能入口，頁面使用起來更方便。

2. “我的”頁面常見案例分析

同理，我參考上述?法對【餓了么】和【百度?盤】也進?了分析。

1）餓了么“我的”頁面

對于餓了么而言，重要的業務入口包括“超級會員“（紅包、津貼等）和“金融服務”（借錢和聯名信用卡），這些都放在“我的”頁面首屏顯眼的位置。

這樣的設計排布方式可有助于對老會員的留存以及對新會員的吸引，同時也為商業化留下了空 間（ps：“我的借款”也被歸類于“我的錢包”，這太雞賊了）。

除此之外，還有外賣社區類入口，包括“收藏”（店鋪收藏）和“購物車”（曾中途放棄的點單），有助于喚醒曾中斷的消費。

2）百度網盤“我的”頁面

作為工具類產品，百度網盤的超級會員也是它的主推業務，開通后可擁有若干特權。

同時，網盤的一些常用功能也羅列再次，比如我最常用的“手機備份”、“我的分享”和“回收站”。

除此之外，這里還增加了會員類活動的運營banner，比如：“超級會員的限時領取”和“一刻相冊[1]隨心卡免費送”。

所以總的來說，“我的”頁面元素可以分為三個部分：

第?類必要信息（粉紅?標注）：

• 用戶基礎信息（比如：昵稱、頭像等）
• 功能/內容入口（比如：社區內容聚集入口，收藏夾，瀏覽歷史等）

第?類重要信息（綠色標注）

• 重要業務入口（比如：會員專區-拉新固?；卡券專區-促進消費）

第三類附加/增值信息（藍色標注）

3. “我的”頁面——會員中心

說到“我的”頁面，就不得不提“會員中心”。

為了提升用戶粘性和增收，?部分商業APP都會增加“會員”模塊——比如盒馬、百度網盤、快看漫畫。而對于用戶來說，“會員中心”是“尊貴”的象征，能獲取更多超值福利。

美團外賣 – 盒馬 – 快看漫畫 – “我的”頁面會員中心

以百度網盤為例，其會員中心不僅承載著?付能?，而且提供了福利信息和?戶情感上的尊享感知。

比如：百度玩盤——會員中心會根據身份、動機、行為的差異進行分層布局。改變以往的“多人一面”的布局架構，打造出新的“多人多面”的靈活分層頁面布局。

• 當?戶是歷史未付費?戶時，我們更加突出?戶的特權介紹和商品?付，便于?戶了解會員服務和商品信息；
• 當?戶是開通中的?戶，我們更加突出?戶可尊享的福利信息，突出尊享感； 當?戶為即將過期?戶或已過期?戶時，我們展示?戶常?特權信息，喚醒?戶付費意愿，并為?戶提供便捷的續費能?。

百度網盤 – “我的”頁面 – 會員中心

（圖片來源：https://www.zcool.com.cn/article/ZMTEzMDA3Mg==.html）

三、總結

所以，不要?看“我的”頁面，細細拆分開來，也是?個值得深究和探索的模塊。

產品?小事， 希望每?個細節都能被打磨地光彩奪?。

如今，挑剔的?戶更愿意關注有趣?有?的產品，如何基于用戶立場，為用戶提供合理的產品 形態，并提供有價值的、有吸引力的功能或內容，是我們產品人需要不斷思考和總結方案的問題。

四、參考資料

雪球設計中心XDC，創造有價值的“我的” | 讓設計有效且有趣 https://mp.weixin.qq.com/s/VW0ngXDK6JVAPsvN39YQeg

百度網盤會員中心-體驗設計升級 https://www.zcool.com.cn/article/ZMTEzMDA3Mg==.html

[1]百度新推出的具有“無限空間”的相冊，可創作卡點視頻。

本文由 @艾薇霖 原創發布于人人都是產品經理。未經許可，禁止轉載

題圖來自Unsplash，基于CC0協議