IPFS：建立一個靜態網站
原文地址：https://blog.csdn.net/omnispace/article/details/79698681
在上一篇《如何在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>
<!-- Bootstrap -->
<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相關知識。
最後放一張截圖: 這就是本文的例子!