14年专业服务器托管租用服务商!
咨询热线 : 400-880-5868

首页 > 客服中心 > 帮助中心

帮助中心

服务器托管如何基于IPFS建一个静态网站

发布时间:2018-4-12 14:28:22    返回首页

  

  服务器托管用户将主机用作网站站点是最常见的做法了。这里介绍一个搭建静态网站的方法。

  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重新发布一下,就可以了。

  浦东数据中心专业服务器托管服务商,为用户提供专业IDC技术支持。