如何在IPFS网络上创建一个完整的网站

本教程将学习如何把一个网站上传到IPFS网络上,并且通过一个简单的名字来访问。

首先,我们已经通过React创建了一个Web应用,dist目录下有以下文件:

  • index.html
  • bundle.js

其中index.html文件中包含bundle.js

<html>
  <head>
    <title>IPFS上传示例</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
</head>
  <body>
    <div id='uploader'></div>
    <div id="sendethereum"></div>
    <script src="bundle.js"></script>
  </body>
</html>

本案例是一个IPFS文件上传工具,效果如下图:


第一步:上传

index.htmlbundle.js两个文件上传到IPFS网络。
推荐方法:使用Orion点击这里下载)或者IPFS原力区开发的上传工具上传,上传成功后,获取Hash值:QmZcF1vwL4g1iwXt3ewLAPgNSY3JEvFkfZHh56UNE5VLLd

第二步:在网关中打开网页

https://ipfs.infura.io/ipfs/QmZcF1vwL4g1iwXt3ewLAPgNSY3JEvFkfZHh56UNE5VLLd/

点击这里访问

第三步:转到IPNS上

执行命令:

ipfs name publish QmZcF1vwL4g1iwXt3ewLAPgNSY3JEvFkfZHh56UNE5VLLd

稍等片刻,出现:

Published to QmYaQBZKiA69Zdnv8EECK9HFEyQtzKBW7fP1hEqvFN9YaG: /ipfs/QmZcF1vwL4g1iwXt3ewLAPgNSY3JEvFkfZHh56UNE5VLLd

其中QmYaQBZKiA69Zdnv8EECK9HFEyQtzKBW7fP1hEqvFN9YaG就是IPNS地址。
点击这里访问

效果和用ipfs方式访问一样,只是这里已经把链接固定成了ipns

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容