如何在IPFS网络上创建一个完整的网站
2018-10-08 本文已影响26人
程序猿老古
本教程将学习如何把一个网站上传到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.html和bundle.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。
