當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

如何基于IPFS建一个静态网站

發布時間：2025/3/15 编程问答 21 豆豆

生活随笔收集整理的這篇文章主要介紹了如何基于IPFS建一个静态网站小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

在上一篇《如何在IPFS里面上傳一張圖片》里面介紹了如何搭建IPFS的應用環境，今天小編給大家介紹一下如何在IPFS上創建自己的個人網站，有過個人網站創建經歷的讀者都知道，想要創建一個個人網站，首先要找一個主機來存放自己的頁面，當然有很多地方是可以免費為大家提供主機服務的，比如著名的代碼托管網站github。

今天IPFS為我們提供的新的選擇，下面就來介紹一下如何基于IPFS創建一個靜態個人網站。

如果還沒有讀過上一篇《如何在IPFS里面上傳一張圖片》，可以先閱讀一下，本文是建立在上一篇基礎上的

1 常見的html頁面，通常由 html，css，js文件構成

創建一個文件夾來存放我們頁面：demo

在文件夾下面創建一個文件 index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hello IPFS</title>

<link href="./bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-12">
<h1 style="text-align: center">Hello IPFS!</h1>
</div>
<div class="col-xs-12">
<h3 style="text-align: center">飛向未來</h3>
</div>
<div class="col-xs-12">
<h3 style="text-align: center">時間：2017-12-26 19:35</h3>
</div>
<div class="col-xs-12">
<h3 style="text-align: center">微信公眾號: IPFS指南(ipfs_guide)</h3>
</div>
<div class="col-xs-12">
<img src="./wechat_mp.jpeg" class="img-rounded img-responsive center-block">
</div>
</div>
</div>
<script src="./jquery.min.js"></script>
<script src="./bootstrap.min.js"></script>
</body>
</html>

本文使用了bootstrap框架進行排版，把bootstrap文件同時放到文件夾demo下面。

于是你的文件夾結構如下：

demo:
--- index.html
--- bootstrap.min.
--- cssbootstrap.min.js
--- jquery.min.js
--- style.css
--- wechat_mp.jpeg

一個網站具備的全部元素都在這里了。

2 發布網站到IPFS上面

根據之前文章介紹的方法，如果你的IPFS節點沒有啟動，首先要執行 ipfs daemon 啟動節點，只有節點啟動才能與其它節點建立連接，把你的網站發布出去。

命令行定位到文件夾的上層文件夾，執行

ipfs add -r demo

返回值如下：

localhost:Desktop tt$ ipfs add -r demo
added QmYUaCPwvJWiueRXFSTTv8vdedWWzRhRdn8RMw35e7k67u demo/bootstrap.min.css
added QmNXRFREw7waGtKW9uBUze3PkR9E12HeeAQSkZQSiFUJqo demo/bootstrap.min.js
added QmaoVnNzLmM23M9EAGk7vPJMN2MHLUJQNT8Rs4nVWr2nPG demo/index.html
added QmWS8GZ4yk69ZHtBWx9RwSGc6WW7DMeCVmc74iVYnC5WQC demo/jquery.min.js
added QmZjV1QuvTkVcaR1qkvxM2RjCicYx2B8tVKLgEx8V7TUgV demo/style.css
added QmNrDoGiTMpZmmbMq1ocZvoQ7vRbZqybpe2vrvbnW6fvXb demo/wechat_mp.jpeg
added QmYaGz9ChV3PcRuz3Zmr8XP34gxAe2gunZdtM7sKhDMqUS demo

這是小編的電腦上的輸出結果，你的可能會不一樣。除非你嚴格的跟小編的內容一致，IPFS是內容尋址，只要內容完全一樣，生成的哈希值就一樣。

3 查看你發布的網站

上面輸出的最后一行，demo的文件夾哈希值，就是你的網站的根目錄，可以使用http://ipfs.io提供的網關查看https://ipfs.io/ipfs/QmYaGz9ChV3PcRuz3Zmr8XP34gxAe2gunZdtM7sKhDMqUS

截止到現在我們完成了網站的發布，是不是很簡單。

http://ipfs.io網關最近有點不太穩定，可能打開的時間稍長

4 IPNS

哈希跟ip地址一樣難以記憶和傳播，ipfs提供ipns來解決這個問題，ipns允許為哈希地址綁定域名，很簡單，只需要在域名解析里面添加一條TXT記錄即可：

dnslink=/ipfs/<your_hash>

例如小編的哈希地址是 QmYaGz9ChV3PcRuz3Zmr8XP34gxAe2gunZdtM7sKhDMqUS

TXT解析的值為： dnslink=/ipfs/QmYaGz9ChV3PcRuz3Zmr8XP34gxAe2gunZdtM7sKhDMqUS

一旦域名解析生效，那么我們可以通過 http://ipfs.io/ipfs/your.domain 來訪問網站了。

5 域名綁定

每次發布，只要內容有變化（如果沒變化，你也不會重新發布網站），那么生成的哈希一定是不一樣的，那樣我們是不是要每次都去設置一下DNS的TXT解析呢？當然不用，如果這樣子，這個技術就沒有存在的必要了，ipns支持現有的域名系統。

我們可以為我們的網站綁定已有的域名：

第一步：執行：ipfs name publish your_hash，your_hash是剛才生成的文章根目錄demo文件的哈希地址

localhost:Desktop tt$ ipfs name publish QmYaGz9ChV3PcRuz3Zmr8XP34gxAe2gunZdtM7sKhDMqUS
Published to QmaiXZeg5PQ2CqojCTCHi9ftmPJmhiC6kRYKDx4TJ3Frxu: /ipfs/QmYaGz9ChV3PcRuz3Zmr8XP34gxAe2gunZdtM7sKhDMqUS

ipfs name publish命令后面的的哈希值就是網站根文件目錄 demo的哈希值。命令的輸出分為兩部分，意思是把你的地址 /ipfs/QmYaGz9ChV3PcRuz3Zmr8XP34gxAe2gunZdtM7sKhDMqUS 發布到了你的節點IDQmaiXZeg5PQ2CqojCTCHi9ftmPJmhiC6kRYKDx4TJ3Frxu下面。

第二步：查看解析是否生效 ipfs name resolve your_id_hash

localhost:Desktop tt$ ipfs name resolve QmaiXZeg5PQ2CqojCTCHi9ftmPJmhiC6kRYKDx4TJ3Frxu
/ipfs/QmYaGz9ChV3PcRuz3Zmr8XP34gxAe2gunZdtM7sKhDMqUS

可以執行 ipfs id隨時查看你的節點ID。這個時候我們就可以使用節點ID來訪問網站，http://ipfs.io/ipns/QmaiXZeg5PQ2CqojCTCHi9ftmPJmhiC6kRYKDx4TJ3Frxu/，注意這里使用的是ipns，而不是ipfs。

因為我們節點ID是不會發生變化的，以后每次更新完網站，只需要發布一次ipfs name publish就可以重新進行綁定。我們訪問的地址就會一直保持不變。

第三步：綁定域名

既然我們有了一個不會發生變化哈希，那么域名綁定就變得簡單了。修改我們上面的DNS的TXT解析值：

dnslink=/ipns/IDQmaiXZeg5PQ2CqojCTCHi9ftmPJmhiC6kRYKDx4TJ3Frxu

如果你自己運行有ipfs節點，可以在域名解析里面添加A記錄，指向自己運行ipfs節點的主機即可。
如果你不想運行自己的ipfs節點，仍然可以借助于IPFS官網提供的網關地址 http://gateway.ipfs.io，在域名解析里面建立一條CNAME記錄，將解析指向 http://gateway.ipfs.io，同時建立一條TXT記錄指向 _dnslink.your.domain 指向 dnslink=/ipns/<你的節點ID>

等待解析生效，

等待中......

然后，你就可以使用自己的域名來訪問網站了。

最后，每次網站有更新，執行 ipfs add 后，需要執行一次 ipfs name publish重新發布一下，就可以了。

完美的跟現有的域名系統結合在了一起，這才是好的技術。

（如果訪問不了，不要怪小編，小編真的沒有騙你，是因為ipns這個版本特別的慢，小編還有其他開發者都在跟ipfs開發團隊抱怨這個問題，他們承諾下個版本解決）

對于想創建自己個人網站的讀者，可以使用已有的靜態網站生成器，比如 hexo，jekyll等，當然這不在本文討論的范圍，有興趣的讀者可以自己去學習一下。

如果有不明白地方，小編歡迎大家隨時進行討論！

今天就講到這里，這幾天小編身體略感不適，有發燒的跡象，只要小編不倒下，就會持續的為大家帶來精彩的文章，為大家普及IPFS，Filecoin相關知識。

最后放一張截圖: 這就是本文的例子!

域名訪問：http://test.ipfschina.io/

IPNS域名：https://ipfs.io/ipns/test.ipfschina.io/

節點id訪問：https://ipfs.io/ipns/QmTrRNgt6M9syRq8ZqM4o92Fgh6avK8v862n2QZLyDPywY/

哈希訪問：https://ipfs.io/ipfs/QmR29A5xJ4W2fF8SMnFsPRQTPBLcQLCBA5XQzdxZ5Rzpwn/

本專欄的微信公眾號IPFS指南(ipfs_guide)，致力于IPFS的知識的普及，如果你對IFPS、Filecoin，挖礦感興趣，敬請關注！

本專欄的文章允許轉載，但請注明：原文來自于知乎專欄：IPFS指南(IPFS指南）作者：飛向未來

總結

以上是生活随笔為你收集整理的如何基于IPFS建一个静态网站的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。