Figma+Arweave，4步驟輕鬆打造專屬數位空間

作者：橙子大元帥

審閱：Kyle

來源：內容公會- 新聞

想擁有專屬的網頁/ 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 的第一步～