Contents

如何創建去中心化網站

創建一個去中心化的網站比大多數人想像的要容易。事實上,去中心化網站和普通網站之間的唯一區別在於它託管在去中心化網路上。幾乎其他一切都保持不變。

在本手冊的過程中,我們將深入研究建構和推出去中心化網路平台的過程。為了完成整個過程,您必須擁有一個 Web3 網域並在您的數位錢包中擁有足夠的以太坊 (ETH) 餘額。

建立您的網站文件

在開始開發去中心化網站之前,必須準備必要的網站文件,或從信譽良好的模板提供者處獲取免費的網站模板,以用於創建去中心化網站。在此範例中,我們將從 Free CSS 取得範本來建立我們的網站。

⭐ 造訪免費CSS,選擇範本並下載。然後,將 ZIP 檔案解壓縮到包含每個單獨檔案的資料夾中,如下所示。 /bc/images/free-css-website-template.jpg

從頭建立網站時,必須將所有相關文件合併到一個目錄中,以實現組織目的和高效的專案管理。

將您的網站檔案上傳到 IPFS

IPFS 代表星際檔案系統,指廣泛分散的運算設備點對點網絡,這些運算設備透過相互協作和資料託管責任的分配,共同充當去中心化檔案儲存庫。這種創新方法因其能夠跨各種平台和環境提供對數位內容的安全可靠的訪問,同時消除集中控製或監督的需要而引起了廣泛關注。

首先,一個選擇是將網站的檔案儲存在執行獨立 IPFS 實例的個人電腦上。然而,採用這種方法時需要考慮一些限制。具體來說,為了讓使用者造訪您的去中心化網站,您的電腦必須始終保持與網路的連線。

另一個選擇是使用 IPFS 託管平台,例如 PiñataInfuraFleek 在IPFS 網路上託管和分發您的文件,使任何人都可以存取。但是,您需要付費訂閱才能使用其中一些服務。

上傳到您的 IPFS 節點

首先,需要執行一個獨立的 IPFS 節點。

首先,您可以選擇將 IPFS 用戶端軟體安裝到您的個人電腦上,或使用流行的 Web 瀏覽器 Brave 的瀏覽器擴充功能作為建立 IPFS 節點的方法。

⭐ 設定完成後,開啟 IPFS 儀表板,按一下匯入,然後上傳您的網站資料夾。 /bc/images/upload-website-to-ipfs.jpg

若要確定特定網站的活動狀態,請導覽至對應文件的右側並找到三個省略號(稱為「三個點」)。找到後,請選擇標示「共享連結」的選項,繼續複製相關程式碼,然後透過在 Brave 應用程式中新開啟的瀏覽器標籤中開啟提供的 URL 來啟動星際檔案系統 (IPFS) 的實例。若配置最佳,網站應在所述網路瀏覽平台內展現無縫功能。

上傳至 Fleek

⭐ 開啟 GitHub 儀表板並建立一個新儲存庫。 /bc/images/create-github-repository.jpg 接下來,使用 Git(一個與 GitHub 良好整合的版本控制系統)將網站檔案上傳到 GitHub 儲存庫。為了方便演示,首先將您的網站檔案保存在桌面上名為 dWeb 的資料夾中

⭐ 造訪 Git-scm ,下載並安裝最新版本的 Git。

⭐ 從 PC 開始功能表啟動 Git Bash 並輸入:

 cd desktop/dWeb

此命令讓 Git 在我們在桌面上建立的資料夾內啟動以初始化本機儲存庫。

⭐ 然後一一執行以下指令:

 git init
 git add .
 git commit -m "first commit"
 git remote add origin [url].git
 

其中 [url] 代表您的 GitHub 儲存庫位址。在我們的例子中是:

 git remote add origin https://github.com/elgwaro/dWeb.git 

執行這些指令將啟動專案資料夾中隱藏的「.git」目錄,將網站的所有內容合併到該資料夾中,提交它們進行傳輸,並最終將資料傳輸到 GitHub 儲存庫。

/bc/images/upload-website-to-github.jpg

將大量網站資產(包括文件和目錄)提交到 GitHub 儲存庫的有效方法是利用前面範例中所示的流程。

將 Fleek 連結到 GitHub

為了在您的 Fleek 帳戶和 GitHub 之間建立連接,請按照以下步驟操作:

⭐ 造訪 Fleek ,登入您的帳戶,然後點擊新增網站 /bc/images/fleek-add-new-site.jpg

⭐ 將 Fleek 連接到 GitHub 並授權使用您的網站檔案存取儲存庫。 /bc/images/authorize-fleek-access-to-repository.jpg

⭐ Fleek 將顯示您選擇的儲存庫。進入「部署位置」標籤,選擇 IPFS,然後按一下「繼續」。 /bc/images/deploy-to-ipfs.jpg

⭐ 選擇框架(如果不確定,請將其保留為「其他」)並部署您的網站。 /bc/images/fleek-framework-selection.jpg

您的網站將部署到 IPFS 上。

連接您的 Web3 網域

當使用獨立的 IPFS 節點或像 Fleek 這樣的基於互聯網的服務時,至關重要的是,必須成功地將其網站部署到 IPFS,從而獲得其相應的 IPFS 哈希值。

為了繼續,需要將您的網站與您的 Web3 網域連結。這可以透過當前市場上信譽良好的註冊商之一獲取網域來實現。域名的價格可能會根據特定平台的條件而有所不同。此外,當使用基於區塊鏈的網域系統時,可能會產生與在分散式帳本上記錄交易相關的額外費用。

為了展示我們系統的功能,我們從以太坊名稱服務(ENS)購買了 elgwaro.eth 網域。

將 ENS 網域連結到 IPFS 網站

若要在擴充非結構化 (ENS) 網域與星際檔案系統 (IPFS) 上託管的網站之間建立連接,請依照下列步驟操作:

⭐ 打開您的 ENS 儀表板並存取您的網域部分。 /bc/images/ens-dashboard.jpg

⭐ 選擇「記錄」選項卡,然後按一下「編輯記錄」。 /bc/images/edit-records.jpg

⭐ 選擇“其他”,貼上您的獨立IPFS網站鏈接,然後點擊“儲存”。 /bc/images/edit-records-ipfs-hash.jpg

⭐ 系統會提示您連接錢包以授權交易,這將根據網路活動向您收取少量費用。 /bc/images/authorize-transaction.jpg

成功完成交易後,您的 Web3 網域將安全連接到您的去中心化網路平台。

如果使用 Fleek,人們就能夠將其網域整合到 Fleek 儀表板中。

⭐ 開啟已部署的網站儀表板並點擊「新增自訂網域」。 /bc/images/fleek-add-custom-domain.jpg

⭐ 向下捲動至 ENS 資訊並點擊新增 ENS 。 /bc/images/add-ens-domain.jpg

⭐ 輸入您的 ENS 域名,點擊“驗證”,然後確認。 /bc/images/add-ens-domain-link.jpg

⭐ 接下來,點選設定內容雜湊。您需要根據網路活動支付少量費用來連接錢包以授權交易。 /bc/images/set-content-hash.jpg 要成功設定鏈接,請確保連接的錢包帳戶是網域的控制器。

造訪您的網站

一旦您的 Web3 網域正確連接到您的去中心化網站,它將被導向到您的去中心化平台。

/bc/images/link-domain-to-website.jpg

您可以使用 ENS 網域 \+.link 存取它。例如,在本例中,它是 elgwaro.eth.link 。不過,當使用像 Brave 這樣支援 IPFS 的瀏覽器時,您不必在 URL 末尾包含.link。

/bc/images/launched-decentralized-website.jpg

您已經成功創建了去中心化網站。

超越 Web2 開發

隨著技術的進步和互聯網繼續朝著更加去中心化的方向發展,預計越來越多的基於網路的平台將從傳統的集中式伺服器基礎設施轉向分散式網路。雖然進行這種轉變可能會有些複雜性,但為 Web3 平台開發去中心化應用程式的過程不一定會造成重大障礙。因此,有興趣創建去中心化網站以提高抵禦潛在審查或其他形式乾擾的能力的個人可能會發現本指南是寶貴的資源。