Figma+Arweave,4步輕松打造專屬數字空間

2025-01-31 00:01:22

想擁有一個專屬於自己的網頁 / dApp,卻每次因為不會寫代碼而望而卻步?其實 0 代碼去完成構建一個永久網頁已經不再是程序員的專利。即使完全沒有技術背景,你也可以通過本文的方法建立屬於自己靜態頁面並永久部署在區塊鏈上,且可以通過互聯網訪問。來吧,10 分鐘後你將有一個專屬於你的永久網頁!

我們先看一下部署一個頁面的流程:

  • 設計你的頁面
  • 將設計轉化為 HTML 代碼
  • 將代碼上傳至 Arweave
  • 設置 ArNS 通過域名訪問頁面

完成最後一步,即可通過 Arweave 的任意網關訪問網頁, 本流程中即使沒有任何編程經驗也可以輕松完成

一、設計你的頁面

首選拖拉拽式圖片設計的網站來設計頁面,UI 設計行業也常常選擇用 Figma 或 Canva 來設計,猶如設計 PPT 一樣就可以把自己想展示的內容輕松設計成頁面。打开瀏覽器即可在线設計,基本半天就可以上手。

本文就選取設計行業內最常用的 Figma 來進行設計頁面,具體操作教程:

  1. 創建文件 :點擊“+ New File”創建一個新文件。
  2. 添加頁面 :在左側的“Pages”欄可以管理頁面,默認是一個頁面,可以根據需要添加多個頁面。
  3. 开始設計 :用工具欄的矩形、文本框等元素搭建頁面布局,或者直接從社區模板中獲取靈感。
  4. 管理組件 :把常用元素(比如按鈕或導航欄)保存為組件,方便重復使用。

更多教程可參考( 相關鏈接

也可以使用 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 的第一步~

鄭重聲明:本文版權歸原作者所有,轉載文章僅為傳播信息之目的,不構成任何投資建議,如有侵權行為,請第一時間聯絡我們修改或刪除,多謝。

評論

推薦文章

加密史上最大竊案》Bybit交易所14.7億美元為何遭竊、兇手是誰、有用戶擠兌風險?

加 密貨幣交易所 Bybit 昨(21)晚驚傳遭駭價值約 14.7 億美元的 ETH 和 stET...

Ting
2 1小時前

比特叢林:揭祕Bybit交易所全球最大黑客盜竊案,涉案金額近15億美元

案件簡述 北京時間2025年2月21日晚,Bybit交易所遭受APT攻擊,僞造“盲籤”突破多籤機制...

2 1小時前

Web3史上最大的黑客事件,我們見證最偉大的一場團結

原文來源: 田大俠的Web3江湖 2025 年 2 月 21 日,一個普通的夜晚,對於全球加密行業...

星球日報
2 1小時前

幣圈成Lazarus Group提款機,朝鮮是如何培養出頂級黑客的?

原文來源:深潮 TechFlow 2 月 21 日,加密貨幣交易所 Bybit 遭遇 15 億美元...

星球日報
2 1小時前

PicWe:防範黑客攻擊需依靠全鏈基礎設施

幣圈歷史上最大的黑客盜竊金額當屬“門頭溝”MT.Gox事件,在2014年時損失85萬個BTC(按現...

2 1小時前

拯救 Bybit :支援 3.2 億美元,大家口中的白馬騎士都有誰?

被盜近15億美元後的12小時內,Bybit CEO Ben Zhou 表示提款系統已完全恢復正常。...

3 1小時前