Figma+Arweave,4步輕松打造專屬數字空間
想擁有一個專屬於自己的網頁 / dApp,卻每次因為不會寫代碼而望而卻步?其實 0 代碼去完成構建一個永久網頁已經不再是程序員的專利。即使完全沒有技術背景,你也可以通過本文的方法建立屬於自己靜態頁面並永久部署在區塊鏈上,且可以通過互聯網訪問。來吧,10 分鐘後你將有一個專屬於你的永久網頁!
我們先看一下部署一個頁面的流程:
- 設計你的頁面
- 將設計轉化為 HTML 代碼
- 將代碼上傳至 Arweave
- 設置 ArNS 通過域名訪問頁面
完成最後一步,即可通過 Arweave 的任意網關訪問網頁, 本流程中即使沒有任何編程經驗也可以輕松完成 ~
一、設計你的頁面
首選拖拉拽式圖片設計的網站來設計頁面,UI 設計行業也常常選擇用 Figma 或 Canva 來設計,猶如設計 PPT 一樣就可以把自己想展示的內容輕松設計成頁面。打开瀏覽器即可在线設計,基本半天就可以上手。
本文就選取設計行業內最常用的 Figma 來進行設計頁面,具體操作教程:
- 創建文件 :點擊“+ New File”創建一個新文件。
- 添加頁面 :在左側的“Pages”欄可以管理頁面,默認是一個頁面,可以根據需要添加多個頁面。
- 开始設計 :用工具欄的矩形、文本框等元素搭建頁面布局,或者直接從社區模板中獲取靈感。
- 管理組件 :把常用元素(比如按鈕或導航欄)保存為組件,方便重復使用。
更多教程可參考( 相關鏈接 )
也可以使用 Wix、Webflow 等無代碼網頁設計工具,上手也同樣非常簡單,而且制作出來的頁面效果會更佳,此類工具可以直接通過修改預設的模版後直接生成代碼(可能需要付費功能)。
二、將設計轉化為 HTML 代碼
Figma 頁面設計完成後,可在 Figma 社區 搜索 “Figma to HTML”插件即可將設計的頁面轉換成靜態網頁代碼,插件會自動讀取設計中的元素,並生成對應的 HTML 和 CSS 代碼。
如果有一些代碼基礎,也可以選擇手動導出相關資源並進行生成 HTML 代碼,在 Figma 中右鍵點擊設計組件,選擇“Inspect”,然後可以查看每個組件的 CSS 屬性,根據這些屬性手動編寫 HTML 和 CSS,然後將圖片資源和代碼結合,創建出完整的 HTML 頁面。
三、將代碼上傳至 Arweave
導出網頁代碼後,首先可以通過直接打开 HTML 文件或者使用 Live Server 先進行本地測試,顯示正常無誤後將上傳代碼至 Arweave,Arweave 針對網頁文件提供了前端托管,所以將網頁文件上傳後即可訪問。這裏直接推薦使用 PermaDAO 社區貢獻者 FarMer 制作的一鍵將網頁上傳至 Arweave 的工具: SiteUploaderOnArweave。
將文件整個目錄上傳至網站,確保把首頁勾選“Set as index”,然後點擊“Upload Files and Generate Manifest”即可上傳至 Arweave(錢包需要預留一些 $AR 作為文件上傳費用,文件不大的情況下 0.01 AR 足矣)
上傳之後會顯示網頁的交易哈希,以及上傳後的目標網頁,點擊最下方的 SiteURL 即可訪問網頁,於是,你的永久網頁就制作好啦!
四、設置 ArNS 通過域名訪問頁面
不知大家可否注意到網址的格式為“arweave.net/{hash}”,例如我這裏上傳之後的 網頁 。
這樣的網址可讀性非常差,那么是否可以將此哈希改為好記、易用的域名呢?當然可以,使用 ArNS 為 Arweave 區塊鏈上的任何哈希、地址與永久網站提供友好的域名。
首先需要到 ArNS 注冊一個你想要的域名,需要在 Permaswap 买入一些 $tARIO 來選擇域名期限“一年期限”或者“永久”,根據域名的長度以及域名期限決定花費 $tARIO 的數量。
注冊好域名後,將域名與交易哈希綁定,即可使用 ArNS 訪問網頁,比如筆者的 ArNS 為 marshalorange,綁定後即可訪問 網頁 ,另外可通過 AR.IO 的任意網關訪問。
通過以上簡單的四個步驟,即使沒有編程經驗,也可以輕松創建一個永久網頁,並將其部署到 Arweave 區塊鏈上。從頁面設計到代碼上傳,再到綁定友好的域名,你的網頁將成為一份專屬於你的永久數字空間。
那么現在就开始動手吧!創造你的第一個永久網頁,邁出通往 Web3 的第一步~
鄭重聲明:本文版權歸原作者所有,轉載文章僅為傳播信息之目的,不構成任何投資建議,如有侵權行為,請第一時間聯絡我們修改或刪除,多謝。
評論