如何基于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建一个静态网站相关推荐

基于 Vue 的轻量级静态网站生成器 VuePress
Vue.js 的创始人尤雨溪大大在 twitter 上发布了一个全新的基于 Vue 的静态网站生成器-,这对于广大 Vue 爱好者来说无疑是一个好消息! 什么是VuePress VuePress由两部 ...
怎样建一个众筹网站？
怎样建一个众筹网站? 众筹交易是时下一种比较时尚的交易方式,随着用户对众筹方式的了解,越来越多的用户参与到众筹活动中.当然,新的市场代表着新的商机.越来越多的中小企业看到了众筹市场的前景,纷纷开始自己 ...
一个网站大概多少钱_建一个外贸网站大概需要多少钱？角点科技总结建外贸网站的费用...
建一个外贸网站大概需要多少钱?小编经常遇到客户问:建一个网站需要多少钱:小编一般都是问:可以说说你的需求吗?是搭建什么类型呢?建站主要目的是什么? 因为小编一直认为网站的价格是看客户的需求和预算的,但 ...
分分钟在自己电脑上建一个视频网站，收费电影随便看，还没广告！
声明 iker干货本文仅作为技术文章,不鼓励不诱导用户观看盗版视频. 第一步分分钟在自己电脑上建一个视频网站,收费电影随便看,还没广告! 第二步安装好软件后先切换环境,推荐使用 PHP 7.0. ...
建一个手机网站到底需要多少钱
小编根据多年的实践经验总结出了一些关于手机网站建设的问题.随着移动互联网的普及,用户对它的依赖性越来越强.却来越多的企业也开始意识到建设手机网站的重要性,但是面对市场上繁多的手机网站的时候,很多企业顿 ...
mysql如何建网站_新手建站入门教程⑨：如何建一个门户网站
而且用博客程序建立的文章网站永远看上去都是个博客,可自定义的东西不是那么多,比如有的人比较想做一个大一点的门户网站,改怎么来做呢?今天我就来告诉你. 其实要建立一个门户网站也是一样不难,哪怕是你要建一 ...
一个静态网站需要服务器吗,静态网站需要服务器吗
静态网站需要服务器吗内容精选换一换某游戏网站目前已购买OBS桶服务,并存放了大量游戏软件.图片等文件在OBS中.随着用户不断增长,游戏下载.图片加载都存在响应较慢的问题,特别是离文件存放区域较远 ...
如何用自己电脑做服务器，绑定域名建一个个人网站
推荐一个专注于Java的小众技术社区:Java之音使用自己的电脑,下载一个tomcat服务器,并将域名解析到本机,这样就可以发布自己的网站了.不过,关机之后网站便登不上去了.这样做只是为了我们可以更 ...
想用自己电脑做服务器并且绑定域名建一个个人网站应该怎么做
推荐一个专注于Java的小众技术社区:Java之音使用自己的电脑,下载一个tomcat服务器,并将域名解析到本机,这样就可以发布自己的网站了.不过,关机之后网站便登不上去了.这样做只是为了我们可以更 ...

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

如何基于IPFS建一个静态网站相关推荐

最新文章

热门文章