应用｜如何基于 IPFS 搭建一个静态网站？

在《应用｜如何在IPFS里面上传一张图片》里面介绍了如何搭建IPFS的应用环境，今天小编给大家介绍一下如何在IPFS上创建自己的个人网站，有过个人网站创建经历的读者都知道，想要创建一个个人网站，首先要找一个主机来存放自己的页面，当然有很多地方是可以免费为大家提供主机服务的，比如著名的代码托管网站github。今天IPFS为我们提供的新的选择，下面就来介绍一下如何基于IPFS创建一个静态个人网站。如果还没有读过上一篇《应用｜如何在IPFS里面上传一张图片》，可以先阅读一下，本文是建立在上一篇基础上的

1 常见的html页面，通常由 html，css，js文件构成

创建一个文件夹来存放我们页面：demo
在文件夹下面创建一个文件 index.html

1.  
2.  
3.  
4.  
5.  
6.  
7.  Hello IPFS
8.  
9.  
10.  
11.  
12.  
13.  
14.  
15.  Hello IPFS!
16.  
17.  
18.  飞向未来
19.  
20.  
21.  时间：2017-12-26 19:35
22.  
23.  
24.  微信公众号: IPFS指南(ipfs_guide)
25.  
26.  
27.  
28.  
29.  
30.  
31.  
32.  
33.  
34.

本文使用了bootstrap框架进行排版，把bootstrap文件同时放到文件夹demo下面。

于是你的文件夹结构如下：

1.  demo:
2.  --- index.html
3.  --- bootstrap.min.
4.  --- cssbootstrap.min.js
5.  --- jquery.min.js
6.  --- style.css
7.  --- wechat_mp.jpeg

一个网站具备的全部元素都在这里了。

2 发布网站到IPFS上面

根据之前文章介绍的方法，如果你的IPFS节点没有启动，首先要执行 ipfs daemon 启动节点，只有节点启动才能与其它节点建立连接，把你的网站发布出去。

命令行定位到文件夹的上层文件夹，执行

1.  ipfs add -r demo

返回值如下：

1.  localhost:Desktop tt$ ipfs add -r demo
2.  added QmYUaCPwvJWiueRXFSTTv8vdedWWzRhRdn8RMw35e7k67u demo/bootstrap.min.css
3.  added QmNXRFREw7waGtKW9uBUze3PkR9E12HeeAQSkZQSiFUJqo demo/bootstrap.min.js
4.  added QmaoVnNzLmM23M9EAGk7vPJMN2MHLUJQNT8Rs4nVWr2nPG demo/index.html
5.  added QmWS8GZ4yk69ZHtBWx9RwSGc6WW7DMeCVmc74iVYnC5WQC demo/jquery.min.js
6.  added QmZjV1QuvTkVcaR1qkvxM2RjCicYx2B8tVKLgEx8V7TUgV demo/style.css
7.  added QmNrDoGiTMpZmmbMq1ocZvoQ7vRbZqybpe2vrvbnW6fvXb demo/wechat_mp.jpeg
8.  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/

例如小编的哈希地址是 QmYaGz9ChV3PcRuz3Zmr8XP34gxAe2gunZdtM7sKhDMqUS

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

一旦域名解析生效，那么我们可以通过 ipfs.io/ipfs/your.domai 来访问网站了。

5 域名绑定

每次发布，只要内容有变化（如果没变化，你也不会重新发布网站），那么生成的哈希一定是不一样的，那样我们是不是要每次都去设置一下DNS的TXT解析呢？当然不用，如果这样子，这个技术就没有存在的必要了，ipns支持现有的域名系统。

我们可以为我们的网站绑定已有的域名：

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

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

ipfs name publish命令后面的的哈希值就是网站根文件目录 demo的哈希值。命令的输出分为两部分，意思是把你的地址 /ipfs/QmYaGz9ChV3PcRuz3Zmr8XP34gxAe2gunZdtM7sKhDMqUS 发布到了你的节点IDQmaiXZeg5PQ2CqojCTCHi9ftmPJmhiC6kRYKDx4TJ3Frxu下面。

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

1.  localhost:Desktop tt$ ipfs name resolve QmaiXZeg5PQ2CqojCTCHi9ftmPJmhiC6kRYKDx4TJ3Frxu
2.  /ipfs/QmYaGz9ChV3PcRuz3Zmr8XP34gxAe2gunZdtM7sKhDMqUS

可以执行 ipfs id随时查看你的节点ID。这个时候我们就可以使用节点ID来访问网站，ipfs.io/ipns/QmaiXZeg5P，注意这里使用的是ipns，而不是ipfs。

因为我们节点ID是不会发生变化的，以后每次更新完网站，只需要发布一次ipfs name publish就可以重新进行绑定。我们访问的地址就会一直保持不变。

第三步：绑定域名

既然我们有了一个不会发生变化哈希，那么域名绑定就变得简单了。修改我们上面的DNS的TXT解析值：

1.  dnslink=/ipns/IDQmaiXZeg5PQ2CqojCTCHi9ftmPJmhiC6kRYKDx4TJ3Frxu

如果你自己运行有ipfs节点，可以在域名解析里面添加A记录，指向自己运行ipfs节点的主机即可。
如果你不想运行自己的ipfs节点，仍然可以借助于IPFS官网提供的网关地址 gateway.ipfs.io，在域名解析里面建立一条CNAME记录，将解析指向 gateway.ipfs.io，同时建立一条TXT记录指向 _dnslink.your.domain 指向 dnslink=/ipns/<你的节点ID>

等待解析生效，

等待中……

然后，你就可以使用自己的域名来访问网站了。

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

完美的跟现有的域名系统结合在了一起，这才是好的技术。

（如果访问不了，不要怪小编，小编真的没有骗你，是因为ipns这个版本特别的慢，小编还有其他开发者都在跟ipfs开发团队抱怨这个问题，他们承诺下个版本解决）

对于想创建自己个人网站的读者，可以使用已有的静态网站生成器，比如 hexo，jekyll等，当然这不在本文讨论的范围，有兴趣的读者可以自己去学习一下。

如果有不明白地方，小编欢迎大家随时进行讨论！

今天就讲到这里，这几天小编身体略感不适，有发烧的迹象，只要小编不倒下，就会持续的为大家带来精彩的文章，为大家普及IPFS，Filecoin相关知识。

最后放一张截图: 这就是本文的例子!

域名访问：test.ipfschina.io/

IPNS域名：ipfs.io/ipns/test.ipfsc

节点id访问：ipfs.io/ipns/QmTrRNgt6M

哈希访问：ipfs.io/ipfs/QmR29A5xJ4

应用｜如何基于 IPFS 搭建一个静态网站？

1 常见的html页面，通常由 html，css，js文件构成

Hello IPFS!

飞向未来

时间：2017-12-26 19:35

微信公众号: IPFS指南(ipfs_guide)